在网页中使用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表单如下:
<form id="register" method="post" action=""> <span class="tips">请输入你的用户名:</span> <input type="text" name="username" class="username" /> <span class="result"></span><br /> <input type="submit" id="submit" /> </form>
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; }); });
服务器端执行脚本如下:
<?php $username = $_POST['username']; //正确的用户名由小写字母,数字和下划线组成 if(!eregi("^[a-z0-9_]+$", $username)){ echo "用户名格式不正确!".$username; } else { echo "恭喜,这是合法的用户名!"; } ?>