jQuery之Ajax--快捷方法

時間 2019-11-10

原文原文鏈接

1.ajax的快捷方法能夠幫咱們用最少的代碼發送ajax請求。javascript

2.　　$.get()方法：使用GET方式來進行異步請求。它的結構爲：$.get( url [, data] [, calback] [, type] )php

參數名稱	類型	說明
url	String	請求的HTML頁的URL地址
data（可選）	Object	發送至服務器的key/value數據會做爲QueryString附加到請求URL中
callback（可選）	Function	載入成功時回調函數（只有當Response的會犯狀態時success才調用css 該方法）自動將請求結果和狀態傳遞給該方法html
type（可選）	String	服務器端返回內容的格式，包括xml,html,script,json,text和_default

代碼展現：java

$.get("test.php",
   function(data){
     $('body').append( "Name: " + data.name ) // John
              .append( "Time: " + data.time ); //  2pm
   }, "json");

3.　　$.post()方法：它與$.get()方法的結構和使用方式都相同，不過它們之間仍然有如下區別。jquery

GET請求會將參數跟在URL後進行傳遞，而POST請求則是做爲HTTP消息的實體內容發送給Web服務器。固然，在Ajax請求中，這種區別對用戶是不可見的。
GET方式對傳輸的數據有大小限制（一般不能大於2KB），而使用POST方式傳遞的數據量要比GET方式大得多（理論上不受限制）。
GET方式請求的數據會被瀏覽器緩存起來，所以其餘人就能夠從瀏覽器的歷史記錄中讀取到這些數據，例如帳號和密碼等。在某種狀況下，GET方式會帶來嚴重的安全性問題，而PODT方式相對來講就能夠避免這些問題。

GET方式和POST方式傳遞的數據在服務器端的獲取頁不相同。在PHP中，GET方式的數據能夠用$_GET[]獲取，而POST方式能夠用$_POST[]獲取。兩種方式均可以用$_REQUEST[]來獲取。

　　例子：用ajax傳遞一個表單並把結果在一個div中ajax

<!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] )。方法參數解釋見下表json

參數名稱	類型	說明
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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。