$.ajax({
type: "POST",
url: "bin/process.php",
data: dataString,
success: function() {
$('#contact_form').html("<div></div>");
$('#message').html("<h2>Contact Form Submitted!</h2>")
.append("<p>We will be in touch soon.</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img src='https://www.jb51.net/images/check.png' />");
});
}
});
return false;
在本示例中，ajax函数的功能就只有这些了，如果你需要进一步关于ajax函数的信息，可以参考官方文档：jQuery's documentation on the ajax function
第五步，反馈信息给用户的部分
首先，在信息提交成功之后，JQuery会通过以下部分动态的替换掉<div></form>中的内容，只需要简单的一句话即可实现。
$('#contact_form').html("<div></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 src='https://www.jb51.net/images/check.png' />");
});
后记：如果要将此实例运用在实际中，可能还需要对一些地方做出修改。比如，增加验证信息规则，在用户提交信息的过程中设置一个Loading的图标等等，本教程仅作抛砖引玉之用了。另外，请注意，后台提交数据给邮箱，我这里就不再解释了。打包下载的实例中有很详细的注释，你需要改动的地方仅仅是用户名和密码。下载压缩包之后，你也许会发现里面有个runonload.js文件，此文件的作用是在加载表单文件时，将焦点聚焦在输入表单上，仅此而已。
您可能感兴趣的文章: