jQuery form插件之ajaxForm()和ajaxSubmit()
2024-05-28 18:37:08
代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>login test</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="login test">
</head>
<body>
<div id="form-div"><form id="form1" action="/users/login" method="post"><p>用户名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p><p>密 码：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p><p><input type="submit" value="登录"> <input type="reset" value="重置"></p></form>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>login test</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="ajax方式"><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script type="text/javascript">function login() {$.ajax({//几个参数需要注意一下type: "POST",//方法类型dataType: "json",//预期服务器返回的数据类型url: "/users/login" ,//urldata: $('#form1').serialize(),success: function (result) {console.log(result);//打印服务端返回的数据(调试用)if (result.resultCode == 200) {alert("SUCCESS");};},error : function() {alert("异常！");}});}</script>
</head>
<body>
<div id="form-div"><form id="form1" onsubmit="return false" action="##" method="post"><p>用户名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p><p>密 码：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p><p><input type="button" value="登录" onclick="login()"> <input type="reset" value="重置"></p></form>
</div>
</body>
</html>
ajaxSubmit 和ajaxForm区别
// 依赖的脚本文件
<script src="../Javascript/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="../Javascript/jquery.form.js" type="text/javascript"></script>
ajaxForm
ajaxForm()不能提交表单。在document的ready函数中，使用ajaxForm来为AJAX提交表单进行准备。提交动作必须由submit开始
ajaxForm()适用于以表单提交方式处理ajax技术（需要提供表单的action、id、 method，最好在表单中提供submit按钮）它大大简化了使用ajax技术提交表单时的数据传递问题，使用ajaxForm()你不需要逐个的以 JavaScript的方式获取每个表单属性的值，并且也不需要在请求路径后面通过url重写的方式传递数据。ajaxForm()会自动收集当前表单中每个属性的值，然后将其以表单提交的方式提交到目标url。这种方式提交数据较安全，并且使用起来更简单，不必写过多冗余的JavaScript代码
ajaxSubmit
ajaxSubmit()马上由AJAX来提交表单。你可以在任何情况下进行该项提交。
ajaxSubmit()适用于以事件的机制以ajax提交form表单（超链接、图片的click事件），该方法作用与ajaxForm()类似，但它更为灵活，因为他依赖于事件机制，只要有事件存在就能使用该方法。你只需指定该form的action属性即可，不需要提供submit按钮。
代码：
<!--HTML--><form id="form1" name="form1"><input id="userName" name="userName" value="姓名" /><input id="age" name="age" value="30" /><input type="submit" value="submit" /></form><input id="myButton" type="button" value="提交" /><!--javascript--><script type="text/javascript">var myData = {"CnName": "詹姆斯","EnName":"James"};$(function () {var ajaxFormOption = {type: "post", //提交方式 dataType: "json", //数据类型 data: myData,//自定义数据参数，视情况添加url: "TestHandler.ashx?type=ajaxForm", //请求url success: function (data) { //提交成功的回调函数 document.write("success");}};//form中有submit按钮——方式1$("#form1").ajaxForm(ajaxFormOption);//form中有submit按钮——方式2$("#form1").submit(function () {$(this).ajaxSubmit(ajaxFormOption);return false;});//不需要submit按钮，可以是任何元素的click事件$("#myButton").click(function () {$("#form1").ajaxSubmit(ajaxFormOption);return false;});});</script>
参考：
- jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
- 表单提交-form提交和ajax提交
- Bootstrap使用模态框modal实现表单提交弹出框
- ajax form数据封装,ajax提交整个form表单,ajax 自动获取当前form数据
- 使用ajax提交form表单，包括ajax文件上传
- 使用ajax方法实现form表单的提交
- jQuery form插件的使用–ajaxForm()和ajaxSubmit()的可选参数项对象
- jquery.form.js的ajaxSubmit和ajaxForm使用
- jQuery form plugin中文使用说明
- Ajax表单提交插件jquery form
- jquery ajax提交表单获取返回文本
- ajaxForm和ajaxSubmit 的用法及整理
- 关于form表单提交ajaxForm和ajaxSubmit的用法与区别
- jQuery使用ajaxSubmit()提交表单示例
- Jquery表单插件ajaxForm用法详解
- 使用jquery.form.js的ajaxsubmit方法提交数据的Bug
- DJANGO笔记总结(六)–AJAX操作、中间件相关
- form.ajaxSubmit获取上传的文件名
- ajax form表单提交 input file中的文件
- ajax form表单提交 input file中的文件
- ajax上传后获取文件名
- jQuery Form Plugin——官网
jQuery form插件之ajaxForm()和ajaxSubmit()相关推荐
- jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
原文:http://www.jb51.net/article/78536.htm Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署 ...
- 接上篇 jquery.form.js 的 $.ajaxForm()和 $.ajaxSubmit()
2019独角兽企业重金招聘Python工程师标准>>> AjaxSubmit 和AjaxForm区别 AjaxForm ajaxForm()不能提交表单.在document的read ...
- jQuery form插件的使用--ajaxForm()和ajaxSubmit()的可选参数项对象
jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax. jQuery Form有两个核心方法 – ajaxForm ...
- 【转】4.2使用jQuery.form插件，实现完美的表单异步提交
传送门:异步编程系列目录-- 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 抓住6月份的尾巴,今天的主题是 今天我想介绍的是一款jQuery的插件:Jquery.form. ...
- jQuery form插件使用详解
点击打开: jquery选择器全解 jquery中的style样式操作 jquery中的DOM操作 jquery中的事件操作全解 jquery中的动画操作全解 jquery中ajax的应用 自定义jq ...
- jQuery form插件的使用
jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax. jQuery Form有两个核心方法 – ajaxFor ...
- jquery form插件(ajax)上传文件实现及原理
原理: jquery form插件ajax上传文件的原理, 1.浏览器实现了XMLHttpRequest level2规范的,则插件使用xhr直接提交文件.通常来说chrome.firefox都实现了 ...
- JQeury form插件的ajaxForm方法和ajaxSubmit方法的区别
为什么80%的码农都做不了架构师?>>> /*** ajaxForm() provides a mechanism for fully automating form subm ...
- form参数化 jq_[转载]Jquery Form插件表单参数
表单插件API提供了几个方法,让你轻松管理表单数据和进行表单提交. ajaxForm 增 加所有需要的事件监听器,为AJAX提交表单做好准备.ajaxForm不能提交表单.在document的read ...
最新文章
- linux系统给jvm分配来多少内存
- Win10添加或删除开机自启项
- 把cmakelist转化为Qt Pro文件
- linux 目录大小是12288,为什么有些目录数的引用超过3，为什么很多目录的大小都是4096...
- c语言调用话筒的程序,c – OpenAL：如何创建简单的“麦克风回声”程序？
- 7.11牛客题（指针）
- 前端中心化管理API使用说明
- python函数运行没有结果_python之函数
- 百元价位的水下相机？！1000个去海边的人有900个选择了它！
- 操作系统—进程同步与互斥问题之生产者消费者问题，附赠PV操作题解题思路（思维导图版）
- OpenCV-Python实战（21）——OpenCV人脸检测项目在Web端的部署
- 彻底搞定char/wchar_t/unicode
- [bbk4965] 第102集 -第13章 - 表空间管理 00
- Atitit 代理与分销系统(1) 子代理 充值总额功能设计概览 sum() groubpy subagt
- android外设按键,Android 外接键盘的按键处理
- 靠自己。linux manul手册入门
- linux 安装pureftp
- 程序员是不是青春饭？年纪大了何去何从
- html常用标签和属性
- ABAP-SAP 账号批量创建分配权限程序