ajax查询数据的举例

1.根据下拉框的值异步查询信息

HTML代码如下：

<script>
$(function(){         //页面载入时执行
$("#key").change(function(){    //当下拉框中值发生变化时执行
        var cc1 = $('#key').val(); //得到下拉菜单的选中项的value值
    if (cc1!=0){ //如果下拉框中内容不为空
            //发送记录id和sid 两个参数到getweb.asp，math.random()避免缓存
        $.get("10-6.php",{id:cc1,sid:Math.random()},
            function(data){
                $("#disp").html(data);
        });
        }
        else
            $("#disp").html("还没选择！");    
});
})
</script>

<? 
    include('conn.php');
    $result=$conn->query("Select * From link Order By id Desc");
?>
请选择网站:
<select id="key">
<option value="0">==请选择==</option>
<? while($row=$result->fetch_assoc()){  ?>        <!--填充下拉框中的数据-->
<option value="<?=$row['id'] ?>"><?=$row['name'] ?></option>
<?        
   }
?>
</select>

<ul id="disp"><b>网站信息...</b></ul>

10-6.php

<?
header("Content-type: text/html; charset=gb2312"); 
include('conn.php');
  $id=$_GET["id"];  //获得$.get()发送来的id
  $sql="Select * From link Where id=$id";
$result=$conn->query($sql);
if($result->num_rows>0){
    while($row=$result->fetch_assoc()){
        echo "<li>编号：".$row['id']."</li>";
        echo "<li>网站名：".$row['name']." </li>";
        echo "<li>URL地址：".$row['URL']." </li>";
        echo "<li>介绍：".$row['intro']." </li>";
    }
}
else    echo "没有搜索到信息";
?>

2.制作级联下拉框

例如省会城市的选择

$(function(){
    $("#szSheng").change(function(){        //左边列表框值改变时触发
        $.getJSON("10-8.php",{index: $(this).val()},        //发送列表框值给10-8.asp
            function(data){     //接收10-8.asp返回的数据
            var city="";    //根据返回的JSON数据，创建<option>项
            for (var i = 0; i < data.length; i++) {
            city += '<option value="' + data[i].ID + '">' + data[i].shi + '</option>';
            };
            $("#szShi").html(city);        //在第二个下拉菜单中显示数据
        });
    });    
    $("#szSheng").change();        //让页面第一次显示的时候也有数据
})
</script>

  所在城市：<select id="szSheng">

<? include('conn.php');
    $result=$conn->query("select * from province order by shengorder");
    //var_dump($result);
    while($row=$result->fetch_assoc()){   ?>     <!--在左边列表框中加载所有省的信息-->
   <option value="<?=$row["id"] ?>" ><?=trim($row["shengname"]) ?></option>
<? }  ?> 

    </select>
  <select id="szShi"></select>         <!--右边列表框，用于加载市的信息-->

10-8.php  数据格式

<?
header("Content-type: text/html; charset=gb2312"); 
include('conn.php');
$shengid=$_GET["index"];  //获得$.getJSON发送来的数据
$sql="select * from city where Shengid=$shengid order by shiorder";

$city= "[";            //$city用来保存JSON格式字符串
$i=0;
$result=$conn->query($sql);
while($row=$result->fetch_assoc()){        //循环输出JSON格式数据
 $city = $city."{ID:".$row["shiorder"].", shi: '".$row["shiname"]."'}";

    if($result->num_rows!=++$i) $city = $city.',';    //如果不是最后一条记录
}

$city = $city."]";
echo $city;
?>

3.异步方式检测用户名是否可以注册

 在页面失去焦点 的时候，就检测该用户名是否可以注册。 如果用户输入的用户名和密码合法，则在不刷新页面的情况下完成用户注册，也就是单击“注册”按钮的时候将用户名和密码异步发送给服务器并插入到admin表中，然后返回注册成功的信息。

HTML代码

<script src="jquery.min.js"></script>
<script>
$(function(){ //在页面载入时加载
 $("#user").blur(function(){        //在文本框失去焦点时检测
     var user=$("#user").val();    
     if (user != ""){    
         $.get('10-9-2.php', {username:user,n:Math.random()}, function (data){  
        if (data==1){        //返回1表示用户名没有注册
            $("#prompt").html("<font color=#0000ff>可以注册</font>");
        }
        else  { 
            $("#user").focus().select(); 
            $("#prompt").html("<font color=#ff0000>此用户名已经注册</font>"); 
        }
    });
     }else $("#prompt").html("请输入用户名");
 });
    $("#reg").click(function(){        //单击注册按钮时
        var user=$("#user").val();    
        var password=$("#pwd").val();
        if (user != "" && password !=""){
            $.get('10-9-2.php', {username: user,password:password,act:"login"},
                function (data){   
        $("#user").val("");        $("#pwd").val("");        //清空文本框
        $("#show").html(data);            });}   
            else $("#prompt").html("请输入用户名和密码");    });
})
</script>
<form>
    <table border=1 cellpadding=4 cellspacing=0 width="296">
        <tr>
            <td width="42">用户名</td><!-- -->
            <td width="115"><input type="text" id="user" size="15"></td>
            <td width="107"><div id="prompt">请输入用户名</div></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="text" id="pwd" size="15"></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="button" value="注册" id="reg"></td>
            <td id="show"></td>
        </tr>
    </table>
</form>

10-9-2.php

<? header("Content-type: text/html; charset=gb2312"); 
require('conn.php');
  $username=$_GET["username"];  //获得10-9.html发送来的数据
  $password=$_GET["password"]; 
  $act=$_GET["act"]; 

if($act=="login"){        //处理单击“注册”按钮的代码
    $sql="insert into admin(`user`,`password`) values('$username','$password')";
    if($conn->query($sql))
        echo "欢迎 $username , 注册成功";
    else echo '注册失败,原因:'. $conn->errno. $conn->error;
    die();
}

$sql="select * from admin where user='$username'";    //处理检测用户名的代码
$result=$conn->query($sql);
if($result->num_rows==0) 
echo 1;        //如果没有记录则输出1，表示可以注册
?>