PHP JQUERY AJAX 提交表单FORM详解
JQuery提交表单 Form.js官方插件介绍
JQuery提交表单Form.js官方插件介绍Form插件，支持Ajax，支持Ajax文件上传，功能强大，基本满足日常应用。
1、JQuery框架下载/2、Form插件下载/jquery/form/#download3、Form插件的简单入门第二步：jquery.js和form.js文件的包含表单插件API提供了几个方法，让你轻松管理表单数据和进行表单提交。
ajaxForm增加所有需要的事件监听器，为AJAX提交表单做好准备。
ajaxForm不能提交表单。
在document的ready函数中，使用ajaxForm来为AJAX提交表单进行准备。
ajaxForm接受0个或1个参数。
这个单个的参数既可以是一个回调函数，也可以是一个Options对象。
可链接（Chainable）：可以。
实例：$('#myFormId').ajaxForm();ajaxSubmit马上由AJAX来提交表单。
大多数情况下，都是调用ajaxSubmit来对用户提交表单进行响应。
ajaxSubmit接受0个或1个参数。
这个单个的参数既可以是一个回调函数，也可以是一个Options对象。
可链接（Chainable）：可以。
实例：// 绑定表单提交事件处理器$('#myFormId').submit(function() {// 提交表单$(this).ajaxSubmit();// 为了防止普通浏览器进行表单提交和产生页面导航（防止页面刷新？）返回falsereturn false;});formSerialize将表单串行化（或序列化）成一个查询字符串。
这个方法将返回以下格式的字符串：name1=value1&name2=value2。
可链接（Chainable）：不能，这个方法返回一个字符串。
实例：var queryString = $('#myFormId').formSerialize();// 现在可以使用$.get、$.post、$.ajax等来提交数据$.post('myscript.php', queryString);fieldSerialize将表单的字段元素串行化（或序列化）成一个查询字符串。
jQuery使用ajaxSubmit（）提交表单示例
jQuery使⽤ajaxSubmit（）提交表单⽰例ajaxSubmit(obj)⽅法是jQuery的⼀个插件jquery.form.js⾥⾯的⽅法，所以使⽤此⽅法需要先引⼊这个插件。
如下所⽰：复制代码代码如下:<script src="/jquery-1.11.0.min.js"></script><script src="http://malsup.github.io/jquery.form.js"></script>那么，如何通过ajaxSubmit(obj)提交数据呢？⾸先我们需要⼀个form：XHTML复制代码代码如下:<form>标题：<input type="text" name="title" /><br />内容：<textarea name="content"><textarea/><br /><button>提交</button></form>上⾯是⼀个需要提交内容的form，通常情况下，我们直接通过form提交的话，提交后当前页⾯跳转到form的action所指向的页⾯。
然⽽，很多时候我们⽐不希望提交表单后页⾯跳转，那么，我们就可以使⽤ajaxSubmit(obj)来提交数据。
使⽤⽅法如下所⽰：复制代码代码如下:$('button').on('click', function() {$('form').on('submit', function() {var title = $('inpur[name=title]').val(),content = $('textarea').val();$(this).ajaxSubmit({type: 'post', // 提交⽅式 get/posturl: 'your url', // 需要提交的 urldata: {'title': title,'content': content},success: function(data) { // data 保存提交后返回的数据，⼀般为 json 数据// 此处可对 data 作相关处理alert('提交成功！');}$(this).resetForm(); // 提交后重置表单});return false; // 阻⽌表单⾃动提交事件});});。
jquery的ajax获取form表单数据、提交表单form
jquery的ajax获取form表单数据、提交表单formjq是对dom进⾏的再次封装。
是⼀个js库，极⼤简化了js使⽤。
jquery库在js⽂件中，包含了所有jquery函数，引⽤：<script src="jquery-1.11.1.min.js"></script>。
这⾥主要介绍jquery获取页⾯form数据使⽤的过程，html页⾯代码如下，有⼀个form表单，id是login_value.填写内容后请求接⼝。
<form id="login_value"><div><label>⽤户名：</label><input id="username" type="text" name="username" placeholder="请输⼊⽤户名" value="admin"></div><div><label>密码：</label><input id="passwd" type="password" name="passwd" placeholder="请输⼊密码" value="123456"></div><div><input type="button" value="登陆" onclick="login()"><input type="reset" value="重置"></div></form>ajax使⽤:ajax只能传⽂本，不能传⽂件。
使用ajax提交form表单，包括ajax文件上传
使⽤ajax提交form表单，包括ajax⽂件上传前⾔使⽤ajax请求数据，很多⼈都会，⽐如说：$.post(path,{data:data},function(data){...},"json");⼜或者是这样的ajax$.ajax({url:"${pageContext.request.contextPath}/public/testupload",type:"post",data:{username:username},success:function(data){window.clearInterval(timer);console.log("over..");},error:function(e){alert("错误！！");window.clearInterval(timer);}});同样的，很多⼈也会。
但是写的越多就越会发现，这样⼦虽然可以避免刷新页⾯，但是我们要写⼤量的js来到得数据：var username = $("#username").val();var password = $("#password").val();...如果数量少的话，那还没有什么，但是如果数据⼗分⼤的话，那就⼗分的⿇烦，那有没有什么简单的⽅法呢？答案肯定有的！下⾯介绍两种⽅法，可以极⼤的提⾼开发⼈员的效率。
⽅法⽅法⼀：使⽤FormData对象FormData对象是html5的⼀个对象，⽬前的⼀些主流的浏览器都已经兼容。
额，如果你说ie8什么的，那我们还是来谈谈今天的天⽓吧，我没听见。
呵呵，开个玩笑，不⽀持FormData的，可以使⽤⽅法⼆，下⾯会介绍。
接着说FormData，它是⼀个html5的javascript对象，⾮常的强⼤。
FormData可以凭空创建⼀个对象，然后往这个对象⾥⾯添加数据，然后直接提交，不需要写⼀⾏html代码，如下：var form = new FormData();form.append("username","zxj");form.append("password",123456);var req = new XMLHttpRequest();req.open("post", "${pageContext.request.contextPath}/public/testupload", false);req.send(form);这样就可以向浏览器发送表单数据了，或者也可以使⽤Jquery这样发送：var form = new FormData();form.append("username","zxj");form.append("password",123456); $.ajax({url:"${pageContext.request.contextPath}/public/testupload",type:"post",data:form,processData:false,contentType:false,success:function(data){window.clearInterval(timer);console.log("over..");}});这样也可以直接发送数据到后台。
jQueryform插件之ajaxForm（）和ajaxSubmit（）的可选参数项对象
jQueryform插件之ajaxForm（）和ajaxSubmit（）的可选参数项对象Form Plugin API ⾥提供了很多有⽤的⽅法可以让你轻松的处理表单⾥的数据和表单的提交过程。
测试环境：部署到Tomcat中的web项⽬。
本⽂演⽰的是：jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象ajaxForm()和ajaxSubmit()的可选参数项对象ajaxForm 和 ajaxSubmit 都⽀持⼤量的可选参数，它们通过可选参数项对象传⼊。
可选参数项对象只是⼀个简单的 JavaScript 对象，⾥边包含了⼀些属性和⼀些值:target⽤server端返回的内容更换指定的页⾯元素的内容。
这个值可以⽤jQuery 选择器来表⽰, 或者是⼀个jQuery 对象，⼀个 DOM 元素。
缺省值： nullurl表单提交的地址。
缺省值：表单的action的值type表单提交的⽅式，'GET' 或 'POST'.缺省值：表单的 method 的值 (如果没有指明则认为是 'GET')beforeSubmit表单提交前执⾏的⽅法。
这个可以⽤在表单提交前的预处理，或表单校验。
如果'beforeSubmit'指定的函数返回false，则表单不会被提交。
'beforeSubmit'函数调⽤时需要3个参数：数组形式的表单数据，jQuery 对象形式的表单对象，可选的⽤来传递给ajaxForm/ajaxSubmit 的对象。
数组形式的表单数据是下⾯这样的格式：[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]缺省值： nullsuccess当表单提交后执⾏的函数。
使用AJAX提交Form表单
使用AJAX提交Form表单的方法，其中主要的就是ajaxForm()和ajaxSubmit()，ajaxForm和ajaxSubmit都支持众多的选项参数，这些选项参数可以使用一个Options对象来提供。
Options只是一个JavaScript对象，它包含了如下一些属性与值的集合：Options对象的详解：1.)target指明页面中由服务器响应进行更新的元素。
元素的值可能被指定为一个jQuery 选择器字符串，一个jQuery对象，或者一个DOM元素。
默认值：null。
2.)url重写或者指定表单的'action'属性。
默认值：表单的action属性值3.)type重写或者指定表单的'method' 属性,"GET"或"POST"。
默认值：表单的method属性值（如果没有找到默认为“GET”）。
4.)beforeSubmit表单提交前被调用的回调函数，该方法通常被提供来运行预提交逻辑或者校验表单数据。
如果"beforeSubmit"回调函数返回false，那么表单将不被提交。
"beforeSubmit"回调函数带三个调用参数：数组形式的表单数据，jQuery表单对象，以及传入ajaxForm/ajaxSubmit中的Options对象。
表单数组接受以下方式的数据：[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]默认值：null5.)success表单成功提交后调用的回调函数。
如果提供"success"回调函数，当从服务器返回响应后它被调用。
然后由dataType选项值决定传回responseText还是responseXML的值。
jquery表单插件form使用方法详解
jquery表单插件form使⽤⽅法详解传统的表单提交，都是页⾯跳转的形式，但是现在更流⾏ajax提交，那么如果希望有表单提交的简便，也有ajax的效果，有什么解决办法吗？怎么使⽤两种使⽤⽅式：第⼀种⽅式<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-1.9.1.min.js"></script><script src="js/jquery-form.js"></script><script>// 使⽤ajaxForm$(function(){$("#myForm").ajaxForm(function(){$("#output1").html("提交成功").show();})})</script></head><body><form id="myForm"><input type="text" name="username"><input type="text" name="password"><input type="submit" value="提交"><div id="output1" style="display: none"></div></form></body></html>第⼆种⽅式<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-1.9.1.min.js"></script><script src="js/jquery-form.js"></script><script>$(function(){//⽅式⼆与⽅式⼀效果⼀样$("#myForm").submit(function(){// 使⽤ajaxSubmit$(this).ajaxSubmit(function(){$("#output1").html("提交成功").show();});return false;})})</script></head><body><form id="myForm"><input type="text" name="username"><input type="text" name="password"><input type="submit" value="提交"><div id="output1" style="display: none"></div></form></body></html>感觉上第⼀种要更⽅便⼀点。
利用ajax提交form表单到数据库详解（无刷新）
利⽤ajax提交form表单到数据库详解（⽆刷新）⼤家应该都知道，在静态页⾯提交表单到数据库很简单就是单纯的<form action="test.php" method="post"></form>这个缺点是会刷新页⾯，会跳转页⾯的。
今天给⼤家带来的技术就是ajax提交表单优点是不刷新页⾯，不跳转页⾯，静默提交的。
⾄于什么是ajax，⾃⼰去百度了解。
⾸先我们得要有⼀个表单提交页⾯：index.html这个页⾯由两个部分组成1、表单控件2、jQuery+ajax处理脚本jQuery脚本会获取form表单的数据，通过post的⽅式提交给api.php<!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"><script src="/libs/jquery/2.1.4/jquery.min.js"></script><script type="text/javascript">function insert() {$.ajax({type: "POST",//⽅法url: "api.php" ,//表单接收urldata: $('#form1').serialize(),success: function () {//提交成功的提⽰词或者其他反馈代码var result=document.getElementById("success");result.innerHTML="成功!";},error : function() {//提交失败的提⽰词或者其他反馈代码var result=document.getElementById("success");result.innerHTML="失败!";}});}</script></head><body><div id="form-div"><form id="form1" onsubmit="return false" action="##" method="post"><p><input name="title" id="title" type="text" value="title"/></p><p><input name="url" id="url" type="text" value="url"/></p><p><input type="button" value="插⼊" onclick="insert()"></p><p><div id="success"></div></p></form></div></body></html>下⾯就是表单接收页⾯api.php该页⾯其实很简单就是连接数据库然后插⼊数据库插⼊数据库的两个值为title和url<?php$title = $_POST['title'];$url = $_POST['url'];$con = mysql_connect("localhost","root","root");if (!$con){die('Could not connect: ' . mysql_error());}mysql_select_db("test", $con);mysql_query("INSERT INTO testdata (title, url)VALUES ('$title', '$url')");mysql_close($con);>然后我们需要建⽴好⼀个数据库数据库名为test，表名为testdata下⾯是数据库截图到此，本次案例完成。
Jquery中ajax提交表单几种方法（get、post两种方法）
Jquery中ajax提交表单⼏种⽅法（get、post两种⽅法）在jquery中ajax提交表单有post与get⽅式，在使⽤get⽅式时我们可以直接使⽤ajax 序列化表单$( 表单ID) serialize();就⾏了，下⾯我来介绍两个提交表单数据的⽅法。
$get⽅式提交表单get() ⽅法通过远程HTTP ，下⾯我来介绍两个提交表单数据的⽅法。
$get⽅式提交表单get() ⽅法通过远程 HTTP GET 请求载⼊信息格式$(selector).get(url,data,success(response,status,xhr),dataType)请求 test.php ⽹页，传送2个参数，忽略返回值：$.get("test.php", { name: "John", time: "2pm" } );显⽰ test.php 返回值(HTML 或 XML，取决于返回值)：$.get("test.php", function(data){alert("Data Loaded: " + data);});ajax 序列化表单$.Form.serialize( NameValuePair )虚拟⼀个表单，并设置表单控件名与值。
参数NameValuePair必选项。
设置虚拟的表单控件。
该参数形式为：{ name1=value, name2=value2, ......}返回值虚拟表单序列化后的字符串，其格式如：username=%E5%95%8A%E8%94%A1&password=123456<form><div><inputtype="text"name="a"value="1"id="a"/></div><div><inputtype="text"name="b"value="2"id="b"/></div><div><inputtype="hidden"name="c"value="3"id="c"/></div><div><textareaname="d"rows="8"cols="40">4</textarea></div><div><selectname="e"><optionvalue="5"selected="selected">5</option><optionvalue="6">6</option><optionvalue="7">7</option></select></div><div><inputtype="checkbox"name="f"value="8"id="f"/></div><div><inputtype="submit"name="g"value="Submit"id="g"/></div></form>.serialize() ⽅法可以操作已选取个别表单元素的 jQuery 对象，⽐如 <input>, <textarea> 以及 <select>。
PHP jQuery Ajax 提交表单form详解
PHP jQuery Ajax Form 表单提交实例解析，包括创建一个表单 html 页面、添加 JQuery 代码、 jquery ajax 表单提交、 jquery ajax 表单验证、 反馈信息给用户， php ajax 表单验证，php ajax 提交表单，php ajax form 验证，php ajax 提交 form 。
本实例用到 JQuery 类库本身的函数和功能， 所有表单信息利用 PHPMailer 类库邮 件的形式发送。
1、创建一个表单 html 页面 表单部分 html 代码以下为引用内容： <div id="contact_form"> <form name="contact" method="post" action=""> <fieldset> <label for="name" id="name_label">姓名</label> <input type="text" name="name" id="name" size="30" value="" class="text-input" /> <label class="error" for="name" id="name_error">此项必填</label> <label for="email" id="email_label">您的 Email</label> <input type="text" name="email" id="email" size="30" value="" class="text-input" /> <label class="error" for="email" id="email_error">此项必填</label> <label for="phone" id="phone_label">您的联系电话</label> <input type="text" name="phone" id="phone" size="30" value="" class="text-input" /> <label class="error" for="phone" id="phone_error">此项必填</label> <br /> <input type="submit" name="submit" class="button" id="submit_btn" value=" 我要发送" /> </fieldset> </form> </div>这里用一个 id 为 contact_form 来包含整个包含信息；这是有意义的，稍后在 JavaScript 与用户交互信息的时候会用到，这里 form 标签的属性里面既包含了 method 和 action ；这个意义其实不大，因为 Javascript 直接操作 DOM ，所以没有 这两个属性也是可以的；务必要给用户输入的 input 标签加独立的 id ，这和第二点原理 类似。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
PHP jQuery Ajax Form表单提交实例解析，包括创建一个表单html页面、添加JQuery代码、jquery ajax表单提交、jquery ajax表单验证、反馈信息给用户，php ajax 表单验证，php ajax提交表单，php ajax form验证，php ajax提交form。
本实例用到JQuery类库本身的函数和功能，所有表单信息利用PHPMailer类库邮件的形式发送。
1、创建一个表单html页面
表单部分html代码
这里用一个id为contact_form来包含整个包含信息；这是有意义的，稍后在JavaScript与用户交互信息的时候会用到，这里form标签的属性里面既包含了method和action；这个意义其实不大，因为Javascript直接操作DOM，所以没有这两个属性也是可以的；务必要给用户输入的input标签加独立的id，这和第二点原理类似。
否则，无法看到正常的效果。
2、添加JQuery代码
这里假设你已经从JQuery官方网站上下载了JQuery基库，然后上传到了你的WEB服务器，并添加到你要使用的网页中。
现在新建一个JS文件
第1行的function()函数与Jquery的document.ready函数用法和功能相同，都是在DOM准备完毕后自动触发。
第2行里面是一个单击触发函数click()，需要注意的是，在HTML一页提交按钮上需要放置一个名为“button”的Class，以模拟实现submit 提交表单的功能，从第二点我们可以看出，JQuery可以很好的将结构和逻辑分离。
3、jquery ajax表单验证
在实际应用中，这一步是必不可少的。
在用户漏填，错填某个项目时，及时提示。
第2行，我们添加一个$('.error').hide()是为了在用户未输入任何信息时隐藏三个class="error"提示错误的label标签。
而只有当出现错误，即为空时，错误才会出现，因为有return false的作用，每次仅会出现一个错误。
在JQuery里面，获取DOM中某个ID或者Class的值
现假设用户没有输入姓名，处理逻辑应该是：首先显示错误，然后将焦点定位在姓名上。
在必填的字段上验证时，都必须return false，否则会出现必填项未填完即提交的情况。
4、Jquery Ajax提交表单
这是实现无刷新提交的核心步骤，通过ajax函数来递交javascript从DOM中获取的表单项值，然后异步提交给后台处理程序process.php，并发送Email，此步紧接在验证程序之后：
核心函数是.ajax()，它所起得作用就是使用POST方式将已经获取的表单信息dataString异步传送给所定义的后台PHP url(bin/process.php)。
如果数据成功传送，它会将一系列我们定义好的信息返回给用户。
最后return false，这样是为了防止页面重新加载。
除了返回成功信息和发送邮件外，我们还可以做其他一些更广泛的事情。
比如，将获得的数据交由后台脚本处理时，将数据插入数据库中，然后再将用户提交的信息返回，因为：首先，获取表单项的值：
将此组合字符串的值通过AJAX函数传递给后台url，如果成功，则会返回成功信息给用户：
5、反馈信息给用户
首先，在信息提交成功之后，JQuery会通过以下部分动态的替换掉<div
id="contact_form"></div>中的内容：
所以请大家记住，如果你以后需要通过JavaScript动态的替换掉某个层或者span，可以使用Jquery的.html方法实现。
其次，有了这个层肯定还不够，因为里面还没有内容，所以，我们还要给id=message的这个层添加一些显示内容：
同样是动态的为id为message的层添加了一段html用于提示。
还可以利用append方法在message层中追加一句：
最后为了表现出提交之后，服务器处理的动态效果，我们设置了以下特效代码：。