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

JQuery打造PHP的AJAX表单提交实例 JQuery打造PHP的AJAX表单提 交实例 JQuery打造PHP的AJAX表单提交实例2010年06月18日星期五23:08 第一步，创建一个表单HTML页面这里，我们只展示主要的表单部分HTML结构 代码: div id=contact_form form name=contactmethod=postaction=fieldset label for=nameid=name_label姓名/label input type=textname=nameid=namesize=30value=class=text- input/label class=errorfor=nameid=name_error此项必填/label label for=emailid=email_label您的Email/label input type=textname=emailid=emailsize=30value=class=text- input/label class=errorfor=emailid=email_error此项必填/label label for=phoneid=phone_label您的联系电话/label input type=textname=phoneid=phonesize=30value=class=text- input/label class=errorfor=phoneid=phone_error此项必填/label br/input type=submitname=submitclass=buttonid=submit_btnvalue=我要发 送//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();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=$(