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方法*的局部“刷新”页面!

上一篇:PHP多种序列化/反序列化的方法


下一篇:数据可视化之树形图(原理+Python代码)