1.ajax的快捷方法可以帮我们用最少的代码发送ajax请求。
2. $.get()方法：使用GET方式来进行异步请求。它的结构为：$.get( url [, data] [, calback] [, type] )
| 参数名称 | 类型 | 说明 |
| url | String | 请求的HTML页的URL地址 |
| data（可选） | Object | 发送至服务器的key/value数据会作为QueryString附加到请求URL中 |
| callback（可选） | Function |
载入成功时回调函数（只有当Response的会犯状态时success才调用 该方法）自动将请求结果和状态传递给该方法 |
| type（可选） | String | 服务器端返回内容的格式，包括xml,html,script,json,text和_default |
代码展示：
$.get("test.php", function(data){ $('body').append( "Name: " + data.name ) // John .append( "Time: " + data.time ); // 2pm }, "json");
3. $.post()方法：它与$.get()方法的结构和使用方式都相同，不过它们之间仍然有以下区别。
- GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器。当然，在Ajax请求中，这种区别对用户是不可见的。
- GET方式对传输的数据有大小限制（通常不能大于2KB），而使用POST方式传递的数据量要比GET方式大得多（理论上不受限制）。
- GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。在某种情况下，GET方式会带来严重的安全性问题，而PODT方式相对来说就可以避免这些问题。
- GET方式和POST方式传递的数据在服务器端的获取页不相同。在PHP中，GET方式的数据可以用$_GET[]获取，而POST方式可以用$_POST[]获取。两种方式都可以用$_REQUEST[]来获取。
例子：用ajax传递一个表单并把结果在一个div中
<!DOCTYPE html> <html> <head> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> </head> <body> <form action="/" id="searchForm"> <input type="text" name="s" placeholder="Search..." /> <input type="submit" value="Search" /> </form> <!-- the result of the search will be rendered inside this div --> <div id="result"></div> <script> /* attach a submit handler to the form */ $("#searchForm").submit(function(event) { /* stop form from submitting normally */ event.preventDefault(); /* get some values from elements on the page: */ var $form = $( this ), term = $form.find( 'input[name="s"]' ).val(), url = $form.attr( 'action' ); /* Send the data using post and put the results in a div */ $.post( url, { s: term }, function( data ) { var content = $( data ).find( '#content' ); $( "#result" ).empty().append( content ); } ); }); </script> </body> </html>
4. .load()方法：从服务器载入数据并且将返回的 HTML 代码并插入至匹配的元素中。它的结构为：load( url [, data] [, callback] )。方法参数解释见下表
| 参数名称 | 类型 | 说明 |
| url | String | 请求HTML页面的URL地址 |
| data（可选） | Object | 发送至服务器的key/value数据 |
| callback（可选） | Function | 请求完成时的回调函数，无论请求成功或失败 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .comment{ background-color: gainsboro; } </style> </head> <body> <div class="comment"> <h4>张三:</h4> <p>沙发。</p> </div> <div class="comment"> <h4>李四:</h4> <p>板凳。</p> </div> <div class="comment"> <h4>王五:</h4> <p>地板。</p> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script> <style type="text/css"> .container{ width: 200px; } </style> </head> <body> <button id="loadTest">Ajax获取</button> <div id="container" class="container"></div> </body> <script type="text/javascript"> $(function(){ $("#loadTest").click(function(){ $("#container").load("test.html");//载入html代码 }); }); </script> </html>
5. $.getScript()方法：有时候，在页面初次加载时就取得所需的全部JavaScript文件是完全没有必要的。虽然可以在需要哪个JavaScript文件时，动态地创建<script>标签，但是这种方式并不理想。为此，jQuery提供了$.getScript文件进行处理，JavaScript文件会自动执行。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script> <style type="text/css"> .container{ width: 200px; } </style> </head> <body> <button id="loadTest">Ajax获取</button> <div id="container" class="container"></div> </body> <script type="text/javascript"> $(function(){ $("#loadTest").click(function(){ $.getScript("js/loadTest.js");//载入js文件 }); }); </script> </html>
$("#container").load("test.html");//载入html代码
6. $.getJSON()方法：使用一个HTTP GET请求从服务器加载JSON编码的数据，与$.getScript()方法的用法相同。
{
"username":"wangganlin",
"password":"123456"
}
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script> </head> <body> <label for="username">用户名：</label><input type="text" id="username"/><br /> <label for="password">密码：</label><input type="text" id="password"/><br /> <input type="button" id="getValue" value="获取Json数据" /> </body> <script type="text/javascript"> $(function(){ $("#getValue").click(function(){ $.getJSON('file/test.json',function(data){ //data:返回的数据 $("input#username").val(data.username); $("input#password").val(data.password); }) }) }) </script> </html>
