Jquery easyui异步提交表单的两种方式示例详解
这篇文章分享一下easyui常用的两种表单异步提交的方式。
开始前的准备工作
1、使用HBuilderX创建一个简单的html项目,删除img和html目录,只保留js目录和index.html;
2、下载jquery.min.js和jquery.easyui.min.js,复制到js目录下;
3、修改index.html的代码,增加一个表单,包含三个输入框和一个提交按钮,在页面引入easyui的js文件;
页面效果如下:
方式一:利用jquery ajax提交
这种方式只需要引入jquery.min.js
$.post()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>easyui异步提交表单</title> <script src="js/jquery.min.js"></script> </head> <body> <form id="ajax_form"> 姓名:<input id="name" /> 年龄:<input id="age" /> 手机号:<input id="phone" /> <button type="button" id="submit">提交</button> </form> <script> $(function( $("#submit").click(function() { $.post("/xxx/save", { name: $("#name").val(), age: $("#age").val(), phone: $("#phone").val() }, function(resp) { // 处理响应的数据 }, "json"); }); )); </script> </body> </html>
$.ajax()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>easyui异步提交表单</title> <script src="js/jquery.min.js"></script> </head> <body> <form id="ajax_form"> 姓名:<input id="name" /> 年龄:<input id="age" /> 手机号:<input id="phone" /> <button type="button" id="submit">提交</button> </form> <script> $(function( $("#submit").on("click", function() { $.ajax({ url: "/xxx/save", type: "post", data: { name: $("#name").val(), age: $("#age").val(), phone: $("#phone").val() }, async: true, cache: false, dataType: "json", processData: true, success: function(resp) { // 处理成功的响应 }, error: function(resp) { // 处理失败的响应 } }); }); )); </script> </body> </html>
方式二:使用easyui提供的表单提交方式
easyui官网已经介绍了这种方式,不过和上面的ajax提交不一样,这种提交方式要给输入框设置name属性。
案例代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>easyui异步提交表单</title> <script src="js/jquery.min.js"></script> <script src="js/jquery.easyui.min.js"></script> </head> <body> <form id="ajax_form" method="post"> 姓名:<input name="name" /> 年龄:<input name="age" /> 手机号:<input name="phone" /> <button type="submit">提交</button> </form> <script> let requestUrl = "/xxx/save"; $(document).ready(function() { $("#ajax_form").form({ url: requestUrl, success: function(resp) { // 处理成功的响应 } }); }); </script> </body> </html>
到此这篇关于Jquery easyui异步提交表单的两种方式的文章就介绍到这了,更多相关jquery easyui异步提交表单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
jQuery Select(单选) 模拟插件 V1.3.62 改进版
改进jQuery Select(单选) 模拟插件 V1.3.6,增加mouseover事件2010-07-07web开发人员学习jQuery的6大理由及jQuery的优势介绍
jQuery是一个用来简化HTML客户端开发的JS(JavaScrip)库,它支持HTML DOM处理,同时还融合了部分HTML和CSS2013-01-01formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
原理很简单,通过本地存储机制(userData或者localStorage),存储表单中元素的状态到本地. 需要时可以把所存储的状态还原到表单元素上2012-01-01Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
想要利用ExtJS的库函数对DOM进行各类操作,就要得到Element类型的对象,但是Ext.get()取到的虽然是Element,但是参数只能是id,如果大家对jQuery的selector方式很喜欢和崇拜,那么就一定要学习Ext.get()和Ext.query()的组合方式。2011-09-09
最新评论