ajax提交表单在项目中常用,前台无论是简单的html、jsp或者是使用了easyui框架,提交表单都会使用到ajax,extjs框架其实也是使用了ajax只不过对其进行了封装了,我们使用的时候就更固定了些。
总的来说ajax提交表单可以分为两种,一种是无返回结果的,就是将表单数据提交给后台,后台处理完就完了;另一种就是有返回结果的,后台执行成功或失败的信息需要返回到前台。
1,无返回结果的
最简单的就是$("#formid").submit();直接将form表单提交到后台。
2,有返回结果的
这种方式是使用最多的一种,因为程序的执行成功与否都需要给用户提示,程序一般也都是多步完成的,执行完插入操作,需要发起流程,这就需要在界面上判断成功与否。
ajax本身属于有返回结果的一类,其中的success方法就是处理后台返回结果的。
ajax提交表单有返回结果的有两种实现方式:
1)将form表单数据序列化
<span style="font-size:18px;"> $.ajax({
type: "POST",
url:your-url,
data:$('#yourformid').serialize(),
async: false,
error: function(request) {
alert("Connection error");
},
success: function(data) {
//接收后台返回的结果
}
});</span>
这种方式需要注意的是form表单中的项一定要有name属性,后台获取的键值对为key=name值,value=各项值,注意无论是input标签还是span或者是其他标签,一定要有name属性,没有name属性后台是获取不到该项的
2)通过窗口查找form提交
<span style="font-size:18px;"> // 提交表单
var obj = document.getElementById("xx_iframe").contentWindow;
obj.$("#yourform").form("submit",{
success :function(data){
//对结果处理
}
});</span>
我使用easyui dialog对话框插入信息时使用过这种提交方式,因为在当前界面上弹出对话框,然后在对话框上的按钮触发对话框中表单提交,对话框又是链接的另外的html页面,如此通过$("#formid")的方式是找不到对话框中的form的,因此这种情况下只能使用这种方式提交表单。
另外ajax中封装的get,post请求也都属于有返回结果的一类。
现在遇到的例子也就这些,以后遇到新形式的再补充上来。。
分享到:
相关推荐
利用ajax提交表单完整流程
利用jquery的ajax提交表单数据到后台。后台使用spring.
vue1/2 ajax提交表单
ajax提交表单,并对提交中文时的乱码进行处理.
完整的jq ajax提交表单,奖解压后jq文档加入页面中,调用就可惟了。 表单结构 <form id="myForm" action="comment.php" method="post"> Name: <input type="text" name="name" /> Comment: <...
Asp+ajax提交表单实例,很好用的啊.
这是一个ajax提交表单插件,支持文件上传,用起来非常方便。具体使用说明 http://blog.csdn.net/qq122453418/article/details/79511164 欢迎留言
该例子是使用 Ajax 提交 Ext 表单,并通过 success 和 failer 返回相应的值。
开门见山,因为laravel以post形式提交数据时候需要加{{csrf_field()}}防止跨站攻击,所以当你用ajax提交表单时候自然也要加。 在网上看了很多的解决方式,我是用下面这种方法解决的: 1,首先在模板里面加上一个meta : ...
在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的方法。$get方式提交表单get() 方法通过远程HTTP ,下面我...
主要介绍了AJAX提交表单数据的方法,实例分析了Ajax调用的原理与实现技巧,需要的朋友可以参考下
本文实例讲述了jQuery使用$.ajax提交表单的方法。分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
该资源包含了一个使用jquery提交表单的代码,简单易懂,喜欢的下载。
用ajax技术将表单中的控件内容全部提交。
本篇文章主要是对ajax提交url与ajax提交表单的区别进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传.
Laravel-Bootstrap-Modal-Form, 使用AJAX提交模式中的Bootstrap 表单,使用 Laravel 验证 Laravel-Bootstrap-Modal-Form你的Laravel 应用程序的表单验证扩展插件。... 这里脚本保持模式打开,通过AJAX提交表单,查
主要介绍了thinkPHP5 ajax提交表单操作,结合实例形式分析了thinkPHP5的ajax提交表单操作技巧,并附带说明了表单提交中的参数传递与处理技巧,需要的朋友可以参考下