提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

JQuery打造PHP的AJAX表单提交实例

jQuery实例PHPAJAX 打造 提交 表单
2023-06-13 09:14:13 时间
如果你对JQuery的基本语法还不是很熟悉，请搜索本站的教程资源。如果你对PHPMailer用法不熟悉，请查看本站的另一篇文章《使用PHPMailer类库发送电子邮件》。

第一步，创建一个表单HTML页面

这里，我们只展示主要的表单部分HTML结构代码：
复制代码代码如下:

<divid="contact_form">
<formname="contact"method="post"action="">
<fieldset>
<labelfor="name"id="name_label">姓名</label>
<inputtype="text"name="name"id="name"size="30"value=""class="text-input"/>
<labelclass="error"for="name"id="name_error">此项必填</label>

<labelfor="email"id="email_label">您的Email</label>
<inputtype="text"name="email"id="email"size="30"value=""class="text-input"/>
<labelclass="error"for="email"id="email_error">此项必填</label>

<labelfor="phone"id="phone_label">您的联系电话</label>
<inputtype="text"name="phone"id="phone"size="30"value=""class="text-input"/>
<labelclass="error"for="phone"id="phone_error">此项必填</label>

<br/>
<inputtype="submit"name="submit"class="button"id="submit_btn"value="我要发送"/>
</fieldset>
</form>
</div>

几点注意：

这里用一个id为contact_form来包含整个包含信息；这是有意义的，稍后在JavaScript与用户交互信息的时候会用到。
大家应该注意到了，这里form标签的属性里面既包含了method和action；这个意义其实不大，因为Javascript直接操作DOM，所以没有这两个属性也是可以的；
务必要给用户输入的<input>标签加独立的id，这和第二点原理类似。否则，无法看到正常的效果。




第二步，开始添加JQuery代码

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

现在另外新建一个JS文件，添加如下代码：
复制代码代码如下:

$(function(){
$(".button").click(function(){
//处理表单验证和交给后台处理的逻辑
});
});

第一行的function()函数与Jquery的document.ready函数用法和功能相同，都是在DOM准备完毕后自动触发。
第二行里面是一个单击触发函数click()，需要注意的是，在HTML一页提交按钮上需要放置一个名为“button”的Class，以模拟实现submi提交表单的功能.
从第二点我们可以看出，JQuery可以很好的将结构和逻辑分离。
第三步，编写验证代码

在实际应用中，这一步是必不可少的。在用户漏填，错填某个项目时，及时提示。
复制代码代码如下:

$(function(){
$(".error").hide();
$(".button").click(function(){
//验证代码

$(".error").hide();
varname=$("input#name").val();
if(name==""){
$("label#name_error").show();
$("input#name").focus();
returnfalse;
}
varemail=$("input#email").val();
if(email==""){
$("label#email_error").show();
$("input#email").focus();
returnfalse;
}
varphone=$("input#phone").val();
if(phone==""){
$("label#phone_error").show();
$("input#phone").focus();
returnfalse;
}

});
});

几点注意：
第2行，我们添加一个$(".error").hide()是为了在用户未输入任何信息时隐藏三个class="error"提示错误的label标签。而只有当出现错误，即为空时，错误才会出现。（因为有returnfalse的作用，每次仅会出现一个错误）
在JQuery里面，获取DOM中某个ID或者Class的值非常简单
复制代码代码如下:
//获取id的值
varname=$("input#name").val();
//获取class序号为1的值
varname=$(".name")[1].val();
现假设用户没有输入姓名，处理逻辑应该是：首先显示错误，然后将焦点定位在姓名上。


if(name==""){//用户名为空
$("label#name_error").show();//错误提示
$("input#name").focus();//焦点定位
returnfalse;//返回
}

在必填的字段上验证时，都必须returnfalse，否则会出现必填项未填完即提交的情况。
第四步，通过Jquery的Ajax函数提交表单信息。

这是本教程实现无刷新提交的核心步骤，通过ajax函数来递交javascript从DOM中获取的表单项值，然后异步提交给后台处理程序（process.php），并发送Email。此步紧接在验证程序之后：
复制代码代码如下:
vardataString="name="+name+"&email="+email+"&phone="+phone;
//alert(dataString);returnfalse;

$.ajax({
type:"POST",
url:"bin/process.php",
data:dataString,
success:function(){
$("#contact_form").html("<divid="message"></div>");
$("#message").html("<h2>联系方式已成功提交！</h2>")
.append("<p>ScriptbyCode52.net</p>")
.hide()
.fadeIn(1500,function(){
$("#message").append("<imgid="checkmark"src="images/check.png"/>");
});
}
});
returnfalse;

以上代码的核心函数是.ajax()，它所起得作用就是使用POST方式将已经获取的表单信息(dataString)异步传送给所定义的后台PHPurl(bin/process.php)。如果数据成功传送，它会将一系列我们定义好的信息返回给用户。最后returnfalse，这样是为了防止页面重新加载。
除了返回成功信息和发送邮件外，我们还可以做其他一些更广泛的事情。比如，将获得的数据交由后台脚本处理时，将数据插入数据库中，然后再将用户提交的信息返回。
详细解释：

首先，获取表单项的值，方法我们已经在第三步中提到过了：
varname=$("input#name").val();
varemail=$("input#email").val();
varphone=$("input#phone").val();
//将表单项的值组合成一个字符串
vardataString="name="+name+"&email="+email+"&phone="+phone;
将此组合字符串的值通过AJAX函数传递给后台url，如果成功，则会返回成功信息给用户：
复制代码代码如下:
$.ajax({
type:"POST",
url:"bin/process.php",
data:dataString,
success:function(){
$("#contact_form").html("<divid="message"></div>");
$("#message").html("<h2>ContactFormSubmitted!</h2>")
.append("<p>Wewillbeintouchsoon.</p>")
.hide()
.fadeIn(1500,function(){
$("#message").append("<imgid="checkmark"src="images/check.png"/>");
});
}
});
returnfalse;

在本示例中，ajax函数的功能就只有这些了，如果你需要进一步关于ajax函数的信息，可以参考官方文档：jQuery"sdocumentationontheajaxfunction
第五步，反馈信息给用户的部分

首先，在信息提交成功之后，JQuery会通过以下部分动态的替换掉<divid="contact_form"></form>中的内容，只需要简单的一句话即可实现。
$("#contact_form").html("<divid="message"></div>");
所以请大家记住，如果你以后需要通过JavaScript动态的替换掉某个层或者<span>，可以使用Jquery的.html方法实现，非常简单和方便。
其次，有了这个层肯定还不够，因为里面还没有内容，所以，我们还要给id=message的这个层添加一些显示内容：
$("#message").html("<h2>联系方式已成功提交！</h2>")
同样是动态的为id为message的层添加了一段html用于提示。还可以利用append方法在message层中追加一句：
.append("<p>Wewillbeintouchsoon.</p>")
最后，为了表现出提交之后，服务器处理的动态效果，我们设置了以下特效代码：
.hide()//整个层消失
.fadeIn(1500,function(){//在1500毫秒内逐渐出现
//最后再动态追加一个成功图标
$("#message").append("<imgid="checkmark"src="images/check.png"/>");
});

后记：如果要将此实例运用在实际中，可能还需要对一些地方做出修改。比如，增加验证信息规则，在用户提交信息的过程中设置一个Loading的图标等等，本教程仅作抛砖引玉之用了。另外，请注意，后台提交数据给邮箱，我这里就不再解释了。打包下载的实例中有很详细的注释，你需要改动的地方仅仅是用户名和密码。下载压缩包之后，你也许会发现里面有个runonload.js文件，此文件的作用是在加载表单文件时，将焦点聚焦在输入表单上，仅此而已。

相关文章