index.html:
1 <h3>$.get(url, [data], [callback], [type])<br/> 2 $.post(url, [data], [callback], [type]) 3 </h3> 4 5 <p>以 GET|POST method 发送 ajax 请求<br/> 6 type: text|html|json|script 7 </p> 8 9 <hr/> 10 <h3>$(selector).load(url, [data], [callback])</h3> 11 12 <p>将页面片段载入到selector所代表的容器中</p> 13 <div style="border:1px dashed gray" id="container"> 14 15 </div> 16 17 <hr/> 18 <h3>$.getJSON(url, [data], [callback])<br/> 19 $.getScript(url, [callback])</h3> 20 21 <p>加载json格式数据或脚本</p> 22 23 <hr/> 24 <button class="btn btn-default btn-sm" onclick="test()"> TEST</button>
index.html 中的js:
1 // 所有快捷API都有一个共同特点： 2 // 不能指定错误时的回调 3 // 同时，有错误时（http status 或者 type 不匹配等）都没有任何提示 4 function test() { 5 //get(); 6 //post(); 7 show(); 8 //sendToTest(); 9 //testWithData(); 10 // testWithCallback(); 11 // testWithDataAndCallback(); 12 // testType(); 13 //testGetScript(); 14 // testGetJson(); 15 // testLoad(); 16 } 17 //data是请求返回的数据 18 function get(){ 19 $.get("/test/sui.php", { name: "John", time: "2pm" }, 20 function(data){ 21 alert("Data Loaded: " + data); 22 }); 23 24 } 25 //post方式是通过表单发送2个数据 26 function post() 27 { 28 $.post("/test/sui.php",{name : "suitenglong",age : '21'}, function(data){ 29 alert("Data Loaded: " + data); 30 }); 31 } 32 33 34 //$(selector).load(url, [data], [callback])取出的内容放里面 35 function show() 36 { 37 $("#container").load('/test/sui.php'); 38 }
服务器中的文件 sui.php:
1 <?php 2 3 4 sui(); 5 function sui() 6 { 7 echo "<p>你好啊</p>"; 8 echo "<p>嘿嘿</p>"; 9 } 10 11 12 13 14 ?>
