AJAX局部刷新

主页面

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.11.2.min.js"></script>
</head>

<body>
<div><input type="text" id="uid" /><span id="xinxi"></span></div>
</body>

<script type="text/javascript">
$(document).ready(function(e) {
    
    $("#uid").blur(function(){
        
        //把文本框的值取出来
        var uid = $(this).val();
        /*
            数据传输：同步：传输必须等到接收方接收到，才能传下一个。
            异步：传输不用等到对方接受就可以继续传递。
            
            AJAX:同步：AJAX必须处理完才能继续向下执行，
            异步：AJAX在处理数据的同时，代码继续向下执行
            
        */
        //调用ajax        
        $.ajax({
            async:false,            //默认异步，false就是同步AJAX
            url:"ChuLi1.php",//处理页面
            data:{u:uid}, //传递的数据，JSON数据
            type:"POST", //提交方式
            datatype:"TEXT", //返回数据的类型
            success:function(data){ //回调函数
                    
                    if(data=="OK")
                    {
                        var str = "该用户名可以使用！";
                        $("#xinxi").html(str);
                    }
                    else
                    {
                        var str = "<span style='color:red'>该用户名已经存在！</span>";
                        $("#xinxi").html(str);
                    }
                }
            
            });
        
        
        })
    
});
</script>

</html>

Chuli1.php

<?php

//接收传递过来的参数
$uid = $_POST["u"];
//查数据库

include("./Tp.class.php");
$db = new Tp();

$sql = "select * from nation where code = '{$uid}'";
$attr = $db->query($sql);

if($attr[0][0]=="n001")
{
    echo "OK";
}
else
{
    echo "NO";    
}



?>

 

posted @ 2016-05-16 21:24  万里冰封  阅读(216)  评论(0)  编辑  收藏  举报