form表单提交的submit和ajax区别

简介: 有关同源策略和跨域,可以参考 跨域的那些事儿

页面


  • submit:更新数据完成后,需要转到一个空白的页面再对原页面进行提交后的处理,即重绘。
  • ajax:异步进行,直接返回原页面进行提交后的处理,比submit少增加一个页面,即局部刷新。


安全


  • ajax:出于安全性的考虑,不能对文件进行操作,所以不可以通过ajax来实现文件上传
  • submit:通过隐藏form的submit可以实现文件上传


form默认提交


如果想要submit后不刷新页面,在该方法的最后加上 return false ,就可以了。

return false 的含义不是阻止事件继续向顶层元素传播,而是阻止浏览器对事件的默认处理方式。在js中,它的作用一般是用来取消默认动作的。

return false 等效于 window.event.returnValue = false

因为原页面用 form 提交到另一个域名之后,原页面的脚本无法获取新页面中的内容。所以浏览器认为这是安全的。而 AJAX 是可以读取响应内容的,因此浏览器不能允许你这样做。 如果你细心的话你会发现,其实请求已经发送出去了,你只是拿不到响应而已。 所以浏览器这个策略的本质是,一个域名的 JS ,在未经允许的情况下,不得读取另一个域名的内容。但浏览器并不阻止你向另一个域名发送请求。 ——来自知乎

有关同源策略和跨域,可以参考 跨域的那些事儿

相关实践学习
基于函数计算快速搭建Hexo博客系统
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
25天前
|
负载均衡 前端开发 搜索推荐
Axios 和 Ajax 的区别
Axios 和 Ajax 的区别
|
8月前
|
前端开发 安全
ajax请求的时候get 和post方式的区别
ajax请求的时候get 和post方式的区别
|
2月前
|
XML 前端开发 JavaScript
CSR和 AJAX有什么区别
CSR和 AJAX有什么区别
23 1
|
5月前
|
前端开发 JavaScript API
axios和ajax的区别
axios和ajax的区别
55 0
|
5月前
|
XML JSON 前端开发
ajax中get和post的区别,datatype返回的数据类型有哪些?web开发中数据提交的几种方式,有什么区别。百度使用哪种方式?
ajax中get和post的区别,datatype返回的数据类型有哪些?web开发中数据提交的几种方式,有什么区别。百度使用哪种方式?
20 0
|
6月前
|
JSON 前端开发 JavaScript
ajax和axios、fetch的区别
ajax和axios、fetch的区别
|
7月前
|
存储 前端开发 JavaScript
HTTP进阶,Cookie,响应的回报结果含义,ajax,form表单,不同状态码代表的结果
HTTP进阶,Cookie,响应的回报结果含义,ajax,form表单,不同状态码代表的结果
HTTP进阶,Cookie,响应的回报结果含义,ajax,form表单,不同状态码代表的结果
|
11月前
|
JavaScript 前端开发
Form表单利用Jquery Validate验证以及ajax提交
Form表单利用Jquery Validate验证以及ajax提交
50 0
|
11月前
|
XML 存储 JSON
【JavaScript】爆肝 2 万字!一次性搞懂 Ajax、Fetch 和 Axios 的区别~(下)
【JavaScript】爆肝 2 万字!一次性搞懂 Ajax、Fetch 和 Axios 的区别~(下)
|
11月前
|
存储 JSON 缓存
【JavaScript】爆肝 2 万字!一次性搞懂 Ajax、Fetch 和 Axios 的区别~(中)
【JavaScript】爆肝 2 万字!一次性搞懂 Ajax、Fetch 和 Axios 的区别~(中)