JQuery（学习笔记五）AJAX常用三种方法

一、 AJAX 简介

一句话：在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

二、load() 方法

一句话：load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

//把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中 $("#div1").load("demo_test.txt");   //把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素 $("#div1").load("demo_test.txt #p1");   /* responseTxt - 包含调用成功时的结果内容 statusTXT - 包含调用的状态 xhr - 包含 XMLHttpRequest 对象 在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示"外部内容加载成功！"，而如果失败，则显示错误消息 */ $("button").click(function(){ $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){ if(statusTxt=="success") alert("外部内容加载成功!"); if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText); }); );

三、get() 和 post() 方法

一句话：GET 从指定的资源请求数据，POST 向指定的资源提交要处理的数据。

/* $.get(URL,callback); 必需的 URL 参数规定您希望请求的 URL。 可选的 callback 参数是请求成功后所执行的函数名。 */ //使用 $.get() 方法从服务器上的一个文件中取回数据 $("button").click(function(){ $.get("soleil.php",function(data,status){ alert("数据: " + data + "\n状态: " + status); }); });   /* $.post(URL,data,callback); 必需的 URL 参数规定您希望请求的 URL。 可选的 data 参数规定连同请求发送的数据。 可选的 callback 参数是请求成功后所执行的函数名。 */ //使用 $.post() 连同请求一起发送数据 $("button").click(function(){ $.post("soleil.php", { name:"soleil", url:"http://www.soleil.com" }, function(data,status){ alert("数据: \n" + data + "\n状态: " + status); }); });