首页 > 代码库 > JQuery学习之Ajax应用
JQuery学习之Ajax应用
1.AJAX=异步javaScript和XML:在不重载整个网页的情况下,AJAX通过后台加载数据,并在网页上进行显示
2.load():简单但强大的AJAX方法,load()方法从服务器加载数据,并把返回的数据放入被选元中;
语法:$(selector).load(URL,data,callback);
**必需的URL参数规定所希望加载的URL
**可选的data参数规定与请求一同发送的查询字符串键/值对集合
**可选的callback参数是load()方法完成后执行的函数名称
$("#div1").load("demo_test.txt") //把文件"demo_test.txt"的内容加载到指定<div>元素中
$("#div1").load("demo_test.txt #p1"); //把"demo_test.txt"文件中id="p1"的元素的内容,加载到指定的<div>中
**可选的callback参数规定当load()方法完成后所要允许的回调函数,回调函数可以设置不同的参数:
(1)responseTxt:包含调用成功时的结果内容
(2)statusTXT:包含调用的状态
(3)xhr:包含XMLHttpRequest对象
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,status,xhr){
if(statusTxt="success")
alert("外部内容加载成功!");
if(status="error")
alert("Error: "+xhr.statusText);
});
});
});
3.HTTP请求:GET 和POST
**$.get()方法:通过HTTP GET请求从服务器上请求数据
$("button").click(function(){
$.get("demo_test.php",function(data,status){
alert("数据: "+data+"\n状态:"+status)
});
});
语法:$.get(URL,callback);
//必需URL参数规定你需要请求的URL
//可选的callback参数是请求成功后执行的函数名
4.$.post()方法:通过HTTP POST请求从服务器上请求数据
$("button").click(function(){
$.post("/try/ajax/demo_text_post.php",
{
name:"菜鸟教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("数据:\n" + data +"\n状态: "+status);
});
});
语法:$.post(URL,data,callback)
//必需的URL参数规定你希望请求的URL
//可选的data参数规定连同请求发送的数据
//可选的callback参数是请求成功后所执行的函数名
JQuery学习之Ajax应用