欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery中ajax的load()與post()方法實例詳解

 更新時間：2016年01月05日 14:22:05   作者：admin  
這篇文章主要介紹了jQuery中ajax的load()與post()方法,結合實例詳細分析了jQuery中l(wèi)oad()與post()方法實現(xiàn)ajax交互的相關技巧與注意事項,需要的朋友可以參考下

本文實例講述了jQuery中ajax的load()與post()方法。分享給大家供大家參考，具體如下：

一、load()方法

在jQuery ajax的load()方法能夠載入遠程 HTML 文件代碼并插入至 DOM 中,這個與post,get還是有一點的區(qū)別，但可以快速在頁面加載時就加載一個頁面的html保存到dom中并且可執(zhí)行哦。

load()方法默認使用 GET 方式, 如果傳遞了data參數(shù)則使用Post方式.

傳遞附加參數(shù)時自動轉換為 POST 方式。jQuery 1.2 中，可以指定選擇符，來篩選載入的 HTML 文檔，DOM 中將僅插入篩選出的 HTML 代碼。語法形如 "url #some > selector", 默認的選擇器是"body>*".

講解:

load是最簡單的Ajax函數(shù), 但是使用具有局限性:

1.它主要用于直接返回HTML的Ajax接口
2.load是一個jQuery包裝集方法,需要在jQuery包裝集上調用,并且會將返回的HTML加載到對象中, 即使設置了回調函數(shù)也不過不可否認load接口設計巧妙并且使用簡單.下面通過示例來演示Load接口的使用:

load()函數(shù):

函數(shù)介紹：load(url, [data], [callback]) 返回值:jQuery

參數(shù)說明：

url:待裝入 HTML 網(wǎng)頁網(wǎng)址。
data:（可選參數(shù)）發(fā)送至服務器的 key/value 數(shù)據(jù)。
callback:（可選參數(shù)）載入成功時回調函數(shù)。

下面進行實例演示：

首先建立需要加載的test.html文件：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax演示</title>
</head>
<body>
腳本之家(www.dbjr.com.cn),提供大量腳本及素材供大家下載!
</body>
</html>

然后建立ajax.html文件，記得引入jquery。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
<script>
 $(document).ready(function(){
 $("#btn").click(function(){
  $("#result").load("test.html",function(responseText,textStatus){
  $("#display").append("<hr>responseText:"+responseText);
  $("#display").append("<hr>textStatus:"+textStatus);
  }); 
 });
 });
</script>
</head>
<body>
<input type="button" value="測試" id="btn" />
<h2>顯示的內容如下：</h2>
<div id="result"></div>
<h2>結果：</h2>
<div id="display"></div>
</body>
</html>

上面的示例演示了如何使用Load方法.

提示:

① 我們要時刻注意瀏覽器緩存,  當使用GET方式時要添加時間戳參數(shù) (net Date()).getTime() 來保證每次發(fā)送的URL不同, 可以避免瀏覽器緩存.

② 當在url參數(shù)后面添加了一個空格, 比如"  "的時候, 會出現(xiàn)"無法識別符號"的錯誤, 請求還是能正常發(fā)送. 但是無法加載HTML到DOM. 刪除后問題解決.

二、post()方法

在jquery中的ajax有二個數(shù)據(jù)發(fā)送模式，一種是get()，前面的文章有講過，另一種是post()。這里再來給大家介紹一下，有需要了解的朋友可參考.

首先認識要jQuery.post(url, [data], [callback], [type])

對參數(shù)進行說明：

url:發(fā)送請求地址。
data:待發(fā)送 Key/value 參數(shù)。
callback:發(fā)送成功時回調函數(shù)。
type:返回內容格式，xml, html, script, json, text, _default。

說明:

通過遠程 HTTP POST 請求載入信息。

這是一個簡單的 POST 請求功能以取代復雜 $.ajax 。請求成功時可調用回調函數(shù)。如果需要在出錯時執(zhí)行函數(shù)，請使用 $.ajax。

先來看一個簡單的實例

復制代碼 代碼如下:
<?php echo json_encode(array("name"=>$_POST['name']));?>

然后建立ajax.html文件，注意js代碼：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
<script>
 $(document).ready(function(){
 $("#sub").click(function(){
  $.post("testPost.php",{name:$("#name").val()},function(data,textStatus){
  $("#result").append("data:"+data.name);
  $("#result").append("<br>textStatus:"+textStatus);
  },"json");
  return false;
 });
 });
</script>
</head>
<body>
<form action="testPost.php" method="post">
 <input type="text" name="name" id="name" >
 <input type="submit" id="sub" value="提交">
</form>
<h2>顯示的內容如下：</h2>
<div id="result"></div>
</body>
</html>

用法2:(點擊post數(shù)據(jù)返回數(shù)據(jù))

<input type="button" id="bnajax" value="ajax" onclick="ajaxTest()" />
<script type="text/javascript" >
 function ajaxTest()
 {
 $.post("http://localhost:8012/t.asp", { "txt": "123" },function(data)
 {
  $("#divMsg").html(data);
 }
 );
 }
</script>

例3

JS代碼：

<script>
$(document).ready(function(){
  $(".ajax_btn").click(function(){
   $.post("ajax.php",//異步處理動態(tài)頁面
   {name:$(".name").val()},//獲取類名為"name"文本的值，以NAME異步傳值
   function(data){//data為反回值，function進行反回值處理
     $(".content").val(data);//獲得得反回值后，將其填入到類名為"content"的文本框中
   });
  })
})
</script>

ajax.php代碼：

<?php
$name=$_POST["name"];
if($name=="netxu"){
  echo "對不起，".$name."數(shù)據(jù)存在";
}
else{
  echo "恭喜你，".$name."可以使用";
}
?>

希望本文所述對大家jQuery程序設計有所幫助。

相關文章

最新評論