首先在用ajax之前，先說一下JSON:
JSON:javascript object notation js對象標記
對於json，我們只需要知道如何定義json？如何輸出？怎么遍歷？
1、定義json
var a =
{
"one":"111",
"two":"222",
"three":arr, -------可以是數組（var arr=new Array(2,3,4)）
"four":{"hello":"您好"}------可以是json
}
由此可知：我們用花括號保存對象，用逗號分隔，寫法有點像關聯數組
2、輸出json
alert(a.one)
alert(a.four.hello)
3、遍歷json
for(var k in a)
{
alert(a[k]);
}
例題1：用ajax判斷用戶是否已存在？
1、首先用到數據庫表：login表
2、要實現的效果
當輸入表中任意一個用戶名時，顯示該用戶已注冊
當輸入不再表中的任意用戶名時，顯示可以注冊
login.php代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--引入js包--> <script src="../jquery-3.2.0.js"></script> </head> <body> <h1>判斷用戶名是否已存在</h1> 登錄名：<input type="text" id="dl"/><span id="ts"></span><br /><br /> </body> </html> <script type="text/javascript"> //當鼠標失去焦點時顯示 $("#dl").blur(function(){ //必須取值，不然傳不到值 var uid = $(this).val(); //用ajax去數據庫匹配， $.ajax({ url:"login-cl.php", //要處理的頁面 data:{u:uid}, //要傳過去的數據 type:"POST", //提交方式 dataType:"TEXT", //返回的數據類型，TEXT字符串 JSON返回JSON XML返回XML；dataType中T要大寫！！ success:function(data){ //回調函數，data為形參，是從login-cl.php頁面返回的值 if(data.trim()=="ok") //trim()去空格，因為會返回全部內容，包括空格回車等，所以 { $("#ts").html("此用戶名可以注冊！"); $("#ts").css("color","blue"); } else { $("#ts").html("此用戶名已被注冊！"); $("#ts").css("color","red"); } } }); }) </script>
login-cl.php代碼：
<?php
$uid=$_POST["u"];
require "DB.class.php";
$db = new DB();
$sql = "select count(*) from login where Username = '{$uid}'";
$arr=$db->query($sql);
if($arr[0][0])
{
echo "no";
}
else{
echo "ok";
}
用ajax可以實現在當前頁面輸出，用戶體驗好~~~~
這可是我盼望很久的功能啊~~~哈哈哈~
例子2、用ajax添加數據
用到的數據庫表：yuangong表
頁面效果：
再看數據庫：已添加進去了
tianjia.php代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../jquery-3.2.0.js"></script>
</head>
<body>
<h1>添加員工</h1>
用戶名：<input type="text" id="uid" />
密碼：<input type="text" id="pwd" />
姓名：<input type="text" id="name" />
<input type="button" id="add" value="添加" />
</body>
</html>
<script type="text/javascript">
$("#add").click(function(){
var uid = $("#uid").val();
var pwd = $("#pwd").val();
var name = $("#name").val();
$.ajax({
url:"tianjia-cl.php",
data:{u:uid,p:pwd,n:name},
type:"post",
dataType:"TEXT",
success:function(data){
if(data.trim()=="ok")
{
alert("添加成功！");
}
else
{
alert("添加失敗！");
}
}
});
})
</script>
tianjia-cl.php代碼：
<?php
$username=$_POST["u"];
$pwd=$_POST["p"];
$name = $_POST["n"];
require "DB.class.php";
$db = new DB();
$sql = "insert into yuangong values('{$username}','{$pwd}','{$name}')";
if($db->query($sql,0))
{
echo "ok";
}
else
{
echo "no";
}
?>