首页 > 代码库 > 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应用