jQuery中使用ajax对表单数据进行异步验证

发布于 2011-05-13 | 更新于 2020-09-20

在网页中使用Ajax可以让网页的响应更快,通过异步地向服务器发送请求,不需要重新载入页面,提升了用户的体验。

在jQuery中使用Ajax基本格式为:

$(‘#button’).click(function(){
var data = $(‘.username’).val();
$.ajax({
type:“POST”,
url:“validate.php”,
data: data,
success: function(html) {
$(#id).html(html);
}
});
return false;
});

Type:定义了HTTP方法的字符串,可以是GET和POST类型,默认为GET; url:需要访问的网页地址字符串; data:一个map对象或者字符串,需要发送给服务器的数据; success:回调函数,从服务器返回的数据会赋给这个回调函数的参数; 最后我们使用return false;从而抑制了浏览器的默认点击行为,因为这里是通过jQuery代码执行动作的。

下面就通过Ajax验证用户输入的数据,把结果显示在网页上:

首先是html表单如下:

请输入你的用户名:

jQuery代码如下:

$(document).ready(function() {
$(‘.result’).hide();
$(‘#submit’).click(function(){
var username = $(‘.username’).val();
var data = ‘username=’ +username;
$.ajax({
type:“POST”,
url:“validate.php”,
data:data,
success:function(html) {
$(‘.result’).show();
$(‘.result’).text(html);
}
});
return false;
});
});

服务器端执行脚本如下:

本文作者: arthinking

本文链接: https://www.itzhai.comusing-jquery-ajax-asynchronous-data-validation-on-form.html

版权声明: 版权归作者所有,未经许可不得转载,侵权必究!联系作者请加公众号。

×
IT宅

关注公众号及时获取网站内容更新。

请帅旋喝一杯咖啡

咖啡=电量,给帅旋充杯咖啡,他会满电写代码!

IT宅

关注公众号及时获取网站内容更新。