# 簡介 AJAX = 非同步 JavaScript 和 XML(Asynchronous JavaScript and XML 不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示 常用方式 ``` $.ajax({ url:, method:, dataType:, data: success:function(res){console.log(res)}, error:function(err){console.log(err)}, }); ``` # load() load() 方法从服务器加载数据,并把返回的数据放入被选元素中。 $(selector).load(URL,data,callback); ``` <h2>jQuery AJAX 是个非常棒的功能!</h2> <p id="p1">这是段落的一些文本。</p> ``` ``` $("#div1").load("demo_test.txt"); ``` jQuery 选择器添加到 URL 参数。 下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的 <div> 元素中: ``` <h2>jQuery AJAX 是个非常棒的功能!</h2> <p id="p1">这是段落的一些文本。</p> ``` ``` $("#div1").load("demo_test.txt h2"); $("#div1").load("demo_test.txt #p1"); ``` callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数: responseTxt - 包含调用成功时的结果内容 statusTXT - 包含调用的状态 xhr - 包含 XMLHttpRequest 对象 ``` $("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() $.get(URL,callback); 或 $.get( URL [, data ] [, callback ] [, dataType ] ) URL:发送请求的 URL字符串。 data:可选的,发送给服务器的字符串或 key/value 键值对。 callback:可选的,请求成功后执行的回调函数。 dataType:可选的,从服务器返回的数据类型。 ``` <?php echo '这是个从PHP文件中读取的数据。'; ?> ``` ``` $("button").click(function(){ $.get("demo_test.php",function(data,status){ alert("数据: " + data + "\n状态: " + status); }); ``` ## post() $.post(URL,callback); 或 $.post( URL [, data ] [, callback ] [, dataType ] ) URL:发送请求的 URL字符串。 data:可选的,发送给服务器的字符串或 key/value 键值对。 callback:可选的,请求成功后执行的回调函数。 dataType:可选的,从服务器返回的数据类型。 ``` <?php $name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : ''; $url = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : ''; echo '网站名: ' . $name; echo "\n"; echo 'URL 地址: ' .$url; ?> ``` ``` $("button").click(function(){ $.post("/try/ajax/demo_test_post.php", { name:"菜鸟教程", url:"http://www.runoob.com" }, function(data,status){ alert("数据: \n" + data + "\n状态: " + status); }); }); ```