jQuery之Ajax快捷方法_编程设计

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>

本文参考链接：https://www.cnblogs.com/wgl1995/p/6235945.html