JQuery中实现Ajax

简单小案例：

$("input").click(function() {

$.get("test.txt",function(data){

$("h1").html(data);

});

});

JQuery中，$.get()表示发出了一个异步的get请求；

语法：

$.get(路径?k=v&k=v,回调函数)

回调函数系统会自动的注入一个实参，就是哪个文本文件的内容；

JQuery中，$.post()表示发出了一个异步的post请求；

语法：

$.post(路径,{k:v,k:v},回调函数);

$.get("chaxun.php?jiangyaochaxundeyonghuming="+$(this).val(),function(data){

if(data == "you"){

$(".tip").css("color","red").html("已经被占用了，换一个吧！");

}else if( data == "meiyou"){

$(".tip").css("color","green").html("恭喜，用户名可以使用");

}

})

注意：get请求的路径上面的黄底红字是真正的路径（URL），粉底儿蓝字是缀加的参数；

Data表示后台输出的结果；

<?php

mysql_connect("localhost","root",123456);

mysql_select_db("student");

mysql_query("SET NAMES UTF8");

$yaochaxundeyonghuming = $_GET["jiangyaochaxundeyonghuming"];

// sql语句

$sql = "SELECT * FROM banji0219 WHERE xingming = '{$yaochaxundeyonghuming}'";

// 执行sql

$result = mysql_query($sql);

// 把输出结果转换成个数

$tiaoshu = mysql_num_rows($result);

if( $tiaoshu > 0){

echo "you";

}else{

echo "meiyou";

}

?>

mysql_num_rows()//统计条数

$.post("zhuce.php",{

yonghuming:$("#yonghuming").val(),

mima:$("#mima").val()

},function(data){

if( data == "charuchenggong" ){

alert("恭喜,成功");

}else if( data == "shibai" ){

alert("sorry");

}

});

红色是URL地址，紫字是参数，格式是JSON格式；data是后台的输出的结果；

前台页面得到data后，可以用DOM方法自由的局部“刷新”页面！