PHP JQUERY AJAX 提交表单FORM详解

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 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会通过以下部分动态的替换掉

id="contact_form">

中的内容:

所以请大家记住,如果你以后需要通过JavaScript动态的替换掉某个层或者span,可以使用Jquery的.html方法实现。其次,有了这个层肯定还不够,因为里面还没有内容,所以,我们还要给id=message的这个层添加一些显示内容:

同样是动态的为id为message的层添加了一段html用于提示。还可以利用append方法在message层中追加一句:

最后为了表现出提交之后,服务器处理的动态效果,我们设置了以下特效代码:

相关文档
最新文档