ajax查询数据的举例
生活随笔
收集整理的這篇文章主要介紹了
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.aspfunction(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,表示可以注冊 ?>?
轉載于:https://www.cnblogs.com/xs-yqz/p/5115814.html
與50位技術專家面對面20年技術見證,附贈技術全景圖總結
以上是生活随笔為你收集整理的ajax查询数据的举例的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 挺水的一门课,发现全系都过了,就自己挂了
- 下一篇: 72、android状态栏一体化,状态栏