Form表单提交和ajax提交的区别

最新推荐文章于 2020-11-27 13:09:01 发布

yyaosen

最新推荐文章于 2020-11-27 13:09:01 发布

阅读量1.8k

点赞数 4

分类专栏： html 文章标签： web

本文链接：https://blog.csdn.net/yoyoseng/article/details/95325967

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

基本介绍
在做web开发时需要从前端向后台提交数据，常见的方式有Form表单提交和ajax提交两种，基本写法如下：
form提交：

<div id="form-div">
    <form id="form1" action="/user/login" method="post">
        <p><span>用户名：</span><input name="userName" type="text" id="txtUserName" tabindex="1" /></p>
        <p><span>密　码：</span><input name="password" type="password" id="TextBox2" tabindex="2" /></p>
        <p><input type="submit" value="登录"></p>
    </form>
</div>

form提交时需要用submit按钮，访问action指向的方法或接口
ajax提交：

<body>
<div>
    <form id="form2">
        <p>用户名：<input name="userName" type="text" id="txtUserName" tabindex="1" /></p>
        <p>密　码：<input name="password" type="password" id="TextBox2" tabindex="2" /></p>
        <p><input type="button" value="登录" onclick="login()"></p>
    </form>
</div>
<script>
	function login() {
      $.ajax({
        type: "POST",
          dataType: "json",
          url: "/user/login" ,
          data: $('#form2').serialize(),
          success: function (result) {
          	//deal with result
          },
          error : function() {
          	//error
          }
      });
    }
</script>
</body>

ajax提交的触发方式可以是任意的，调用包含ajax的函数即可

区别
除了写法上的不同外，这两种提交方式的区别主要在于页面刷新方式，form提交会放弃当前页面，向后端发送请求，然后根据返回的结果创建一个新的页面，即使提交后显示的是与之前一样的页面，也需要重新加载；而ajax只进行局部数据刷新，无需更新整个页面。
ajax几个常用的属性及方法：

名称	类型	默认值	说明
url	String		访问的url
data	String		发送到服务器的数据
async	Boolean	true	异步请求
type	String	get	请求方式：get,post,put,delete
cache	Boolean	true	缓存
content	Object		相关回调函数的上下文
dataType	String		返回数据的类型：xml,html,script,json,jsonp,text
—	—	—	—
beforeSend	function		发送请求之前调用
error	function		在请求出错时调用
success	function		在请求之后调用
complete	function		无论请求成功或失败都会调用

yyaosen

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Form表单提交和ajax提交的区别

基本介绍在做web开发时需要从前端向后台提交数据，常见的方式有Form表单提交和ajax提交两种，基本写法如下：form提交：<div id="form-div"> <form id="form1" action="/user/login" method="post"> <p><span>用户名：</span&...
复制链接

扫一扫