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

版权声明：本文原创为夏狮狮，转载请说明出处！ https://blog.csdn.net/weixin_42470791/article/details/82561053

在网页中使用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 "恭喜，这是合法的用户名！";
    }
?>