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 ，这和第二点原理 类似。

否则，无法看到正常的效果。

2、添加 JQuery 代码 这里假设你已经从 JQuery 官方网站上下载了 JQuery 基库，然后上传到了你的 WEB 服务器，并添加到你要使用的网页中。

现在新建一个 JS 文件
以下为引用内容： $(function() { $(".button").click(function() { // 处理表单验证和交给后台处理的逻辑 }); });
第 1 行的 function() 函数与 Jquery 的 document.ready 函数用法和功能相同， 都是在 DOM 准备完毕后自动触发。

第 2 行里面是一个单击触发函数 click() ，需要注意 的是， HTML 一页提交按钮上需要放置一个名为“button”的 Class ， 在 以模拟实现 submit 提交表单的功能，从第二点我们可以看出，JQuery 可以很好的将结构和逻辑分离。

3、jquery ajax 表单验证 在实际应用中，这一步是必不可少的。

在用户漏填，错填某个项目时，及时提示。

以下为引用内容： $(function() { $('.error').hide(); $(".button").click(function() { // 验证代码 $('.error').hide(); var name = $("input#name").val(); if (name == "") { $("label#name_error").show(); $("input#name").focus(); return false; } var email = $("input#email").val(); if (email == "") { $("label#email_error").show(); $("input#email").focus(); return false; } var phone = $("input#phone").val(); if (phone == "") { $("label#phone_error").show(); $("input#phone").focus(); return false; } }); });


第 2 行， 我们添加一个 $('.error').hide() 是为了在用户未输入任何信息时隐藏三个 class="error" 提示错误的 label 标签。

而只有当出现错误，即为空时，错误才会出现， 因为有 return false 的作用，每次仅会出现一个错误。

在 JQuery 里面，获取 DOM 中某个 ID 或者 Class 的值
以下为引用内容： //获取 id 的值 var name = $("input#name").val(); //获取 class 序号为 1 的值 var name = $(".name")[1].val();
现假设用户没有输入姓名，处理逻辑应该是：首先显示错误，然后将焦点定位在姓名 上。

以下为引用内容： if (name == "") { //用户名为空 $("label#name_error").show(); //错误提示 $("input#name").focus(); //焦点定位 return false; //返回 }
在必填的字段上验证时，都必须 return false ，否则会出现必填项未填完即提交的 情况。

4、Jquery Ajax 提交表单 这是实现无刷新提交的核心步骤，通过 ajax 函数来递交 javascript 从 DOM 中获 取的表单项值，然后异步提交给后台处理程序 process.php ，并发送 Email ，此步紧接 在验证程序之后：
以下为引用内容： var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone; //alert (dataString);return false; $.ajax({ type: "POST", url: "bin/process.php", data: dataString, success: function() { $('#contact_form').html("<div id='message'></div>"); $('#message').html("<h2>联系方式已成功提交！</h2>") .append("<p>Script design</p>") .hide() .fadeIn(1500, function() {


$('#message').append("<img id='checkmark' src='images/check.png' />"); }); } }); return false;
核心函数是 .ajax() ，它所起得作用就是使用 POST 方式将已经获取的表单信息 dataString 异步传送给所定义的后台 PHP url(bin/process.php) 。

如果数据成功传送， 它会将一系列我们定义好的信息返回给用户。

最后 return false ，这样是为了防止页面重 新加载。

除了返回成功信息和发送邮件外，我们还可以做其他一些更广泛的事情。

比如，将获 得的数据交由后台脚本处理时， 将数据插入数据库中， 然后再将用户提交的信息返回， 因为： 首先，获取表单项的值：
以下为引用内容： var name = $("input#name").val(); var email = $("input#email").val(); var phone = $("input#phone").val(); //将表单项的值组合成一个字符串 var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;
将此组合字符串的值通过 AJAX 函数传递给后台 url ，如果成功，则会返回成功信息 给用户：
以下为引用内容： $.ajax({ type: "POST", url: "bin/process.php", data: dataString, success: function() { $('#contact_form').html("<div id='message'></div>"); $('#message').html("<h2>Contact Form Submitted!</h2>") .append("<p>We will be in touch soon.</p>") .hide() .fadeIn(1500, function() { $('#message').append("<img id='checkmark' src='images/check.png' />"); }); } }); return false;
5、反馈信息给用户


首先，在信息提交成功之后，JQuery 会通过以下部分动态的替换掉 <div id="contact_form"></div> 中的内容：
以下为引用内容： $('#contact_form').html("<div id='message'></div>");
所以请大家记住， 如果你以后需要通过 JavaScript 动态的替换掉某个层或者 span ， 可以使用 Jquery 的 .html 方法实现。

其次，有了这个层肯定还不够，因为里面还没有内 容，所以，我们还要给 id=message 的这个层添加一些显示内容：
以下为引用内容： $('#message').html("<h2>联系方式已成功提交！</h2>")
同样是动态的为 id 为 message 的层添加了一段 html 用于提示。

还可以利用 append 方法在 message 层中追加一句：
以下为引用内容： .append("<p>We will be in touch soon.</p>")
最后为了表现出提交之后，服务器处理的动态效果，我们设置了以下特效代码：
以下为引用内容： .hide() //整个层消失 .fadeIn(1500, function() {//在 1500 毫秒内逐渐出现 //最后再动态追加一个成功图标 $('#message').append("<img id='checkmark' src='images/check.png' />"); });











。