jquery中的ajax

時間 2019-11-15

標籤 jquery ajax 欄目 JQuery 简体版

原文原文鏈接

jQuery 對Ajax 作了大量的封裝，咱們使用起來也較爲方便，不須要去考慮瀏覽器兼容性。對於封裝的方式，jQuery 採用了三層封裝：最底層的封裝方法爲：$.ajax()，而經過這層封裝了第二層有三種方法：.load()、$.get()和$.post()，最高層是$.getScript()和$.getJSON()方法。javascript

1 .load()方法能夠參數三個參數：url(必須，請求html 文件的url 地址，參數類型爲String)、data(可選，發送的key/value 數據，參數類型爲Object)、callback(可選，成功或失敗的回調函數，參數類型爲函數Function)。php

若是想讓Ajax 異步載入一段HTML 內容，咱們只須要一個HTML 請求的url 便可。css

//HTML
<input type="button" value="異步獲取數據" />
<div id="box"></div>
//jQuery
$('input').click(function () {
$('#box').load('test.html');
});

若是想對載入的HTML 進行篩選，那麼只要在url 參數後面跟着一個選擇器便可。html

//帶選擇器的url
$('input').click(function () {
$('#box').load('test.html .my');
});

若是是服務器文件，好比.php。通常不只須要載入數據，還須要向服務器提交數據，那
麼咱們就可使用第二個可選參數data。向服務器提交數據有兩種方式：get 和post。java

//不傳遞data，則默認get 方式
$('input').click(function () {
$('#box').load('test.php?url=ycku');
});

//get 方式接受的PHP
<?php
if ($_GET['url'] == 'ycku') {
echo '瓢城Web 俱樂部官網';
} else {
echo '其餘網站';
}
?>

//傳遞data，則爲post 方式
$('input').click(function () {
　　$('#box').load('test.php', {
　　　　url : 'ycku'
　　});
});

//post 方式接受的PHP
<?php
if ($_POST['url'] == 'ycku') {
echo '瓢城Web 俱樂部官網';
} else {
echo '其餘網站';
}
?>

回調參數。對於必須加載完成以後才能繼續的操做，load()方法提供了回調函數（callback）jquery

 $(function(){
      $("#send").click(function(){
              $("#resText").load("test.html .para",function (responseText, textStatus, XMLHttpRequest){
                         alert( $(this).html() );    //在這裏this指向的是當前的DOM對象，即 $("#iptText")[0]
                         alert(responseText);       //請求返回的內容
                         alert(textStatus);            //請求狀態：success，error
                         alert(XMLHttpRequest);     //XMLHttpRequest對象
            });
      })
  })

2. $.get()和$.post()方法web

load（）方法一般用來從web服務器上獲取靜態的數據文件，然而這並不能體現Ajax的所有價值。在項目中，若是須要傳遞一些參數給服務器中的頁面，那麼可使用 $.get()和$.post()方法或者$.ajax()方法。ajax

.load()方法是局部方法，由於他須要一個包含元素的jQuery 對象做爲前綴。而$.get()和$.post()是全局方法，無須指定某個元素。對於用途而言，.load()適合作靜態文件的異步獲取，而對於須要傳遞參數到服務器頁面的，$.get()和$.post()更加合適。json

$.get()方法有四個參數，前面三個參數和.load()同樣，多了一個第四參數type，即服務器返回的內容格式：包括xml、html、script、json、jsonp 和text。第一個參數爲必選參數，後面三個爲可選參數。瀏覽器

//使用$.get()異步返回html 類型
$('input').click(function () {
    $.get('test.php', {
        url : 'ycku'
    }, function (response, status, xhr) {
     if (status == 'success') {
        $('#box').html(response);
     }
   }) //type 自動轉爲html
});

$.post()方法的使用和$.get()基本上一致，他們之間的區別也比較隱晦，基本都是背後的
不一樣，在用戶使用上體現不出。具體區別以下：
1.GET 請求是經過URL 提交的，而POST 請求則是HTTP 消息實體提交的；
2.GET 提交有大小限制（2KB），而POST 方式不受限制；
3.GET 方式會被緩存下來，可能有安全性問題，而POST 沒有這個問題；
4.GET 方式經過$_GET[]獲取，POST 方式經過$_POST[]獲取。

//使用$.post()異步返回html
$.post('test.php', {
    url : 'ycku'
}, function (response, status, xhr) {
    $('#box').html(response);
});

$.ajax()

$.ajax()是全部ajax 方法中最底層的方法，全部其餘方法都是基於$.ajax()方法的封裝。這個方法只有一個參數，傳遞一個各個功能鍵值對的對象。

//$.ajax 使用
$('input').click(function () {
    $.ajax({
        type : 'POST',
        url : 'test.php',
        data : {
            url : 'ycku'
        },
    success : function (response, stutas, xhr) {
        $('#box').html(response);
    }
  });
});

注意：對於data 屬性，若是是GET 模式，可使用三種以前說所的三種形式。若是是POST 模式可使用以前的兩種形式。

一個聊天室的例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* { margin:0; padding:0;}
body { font-size:12px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
 <!--   引入jQuery -->
<script src="../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
   $(function(){
        $('#send').click(function() {
            $.ajax({
              type: "GET",
              url: "test.js",
              dataType: "script"
            }); 
        });
   })
//]]>
</script>
</head>
<body>
 <br/>
 <p>
     <input type="button" id="send" value="加載"/>
 </p>
<div  class="comment">已有評論：</div>
 <div id="resText" >
 </div>
</body>
</html>

test.js

var comments = [
  {
    "username": "張三",
    "content": "沙發."
  },
  {
    "username": "李四",
    "content": "板凳."
  },
  {
    "username": "王五",
    "content": "地板."
  }
];

  var html = '';
  $.each( comments , function(commentIndex, comment) {
      html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
  })
  $('#resText').html(html);

   $(function(){
        $('#send').click(function() {
            $.ajax({
              type: "GET",
              url: "test.json",
              dataType: "json",
              success : function(data){
                     $('#resText').empty();
                      var html = '';
                      $.each( data  , function(commentIndex, comment) {
                          html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
                      })
                     $('#resText').html(html);
              }
            }); 
        });
   })

test.json

[
  {
    "username": "張三",
    "content": "沙發."
  },
  {
    "username": "李四",
    "content": "板凳."
  },
  {
    "username": "王五",
    "content": "地板."
  }
]