JQuery打造PHP的AJAX表单提交实例
发布时间：2023-02-16 14:00:48 所属栏目：PHP 来源：互联网
导读：本实例只利用到JQuery类库本身的函数和功能，不需要第三方插件的支持。另外，所有表单信息都是利用PHPMailer类库邮件的形式发送给管理员。 如果你对JQuery的基本语法还不是很熟悉，请搜索本站的教程资源。如果你对PHPMailer用法不熟悉，请查看本站的另一篇文
|
将此组合字符串的值通过AJAX函数传递给后台url，如果成功，则会返回成功信息给用户： $.ajax({ type: "POST", 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; 在本示例中，ajax函数的功能就只有这些了，如果你需要进一步关于ajax函数的信息，可以参考官方文档：jQuery's documentation on the ajax function 第五步，反馈信息给用户的部分 首先，在信息提交成功之后，JQuery会通过以下部分动态的替换掉<div id="contact_form"></form>中的内容，只需要简单的一句话即可实现。 $('#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' />"); }); （编辑：十堰站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
