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

首頁

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:21 PM

ajax jquery load post

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

一、load()方法

在jQuery ajax的load()方法能夠載入遠端HTML 檔案程式碼並插入至DOM 中,這個與post,get還是有一點的區別，但可以快速在頁面載入時就載入一個頁面的html儲存到dom中並且可執行哦。

load()方法預設使用 GET 方式, 如果傳遞了data參數則使用Post方式.

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

解說:

load是最簡單的Ajax函數, 但是使用具有限制:

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

load()函數:

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

參數說明：

url:待裝入 HTML 網頁網址。
data:（可選參數）傳送至伺服器的 key/value 資料。
callback:（可選參數）載入成功時回呼函數。

下面進行實例示範：

先建立需要載入的test.html檔：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax演示</title>
</head>
<body>
脚本之家(www.jb51.net),提供大量脚本及素材供大家下载!
</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方式時要加入時間戳參數 (net Date()).getTime() 來確保每次發送的URL不同, 可以避免瀏覽器快取.

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

二、post()方法

在jquery中的ajax有二個資料傳送模式，一種是get()，前面的文章有講過，另一種是post()。這裡再來跟大家介紹一下，有需要了解的朋友可參考.

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

對參數進行說明：

url:發送請求位址。
data:待傳送 Key/value 參數。
callback:發送成功時回呼函數。
type:傳回內容格式，xml, html, script, json, text, _default。

說明:

透過遠端 HTTP POST 請求載入資訊。

這是一個簡單的 POST 請求功能以取代複雜 $.ajax 。請求成功時可呼叫回調函數。如果需要在出錯時執行函數，請使用 $.ajax。

先來看一個簡單的實例

複製程式碼程式碼如下:

$_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資料回傳資料)

<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",//异步处理动态页面
   {name:$(".name").val()},//获取类名为"name"文本的值，以NAME异步传值
   function(data){//data为反回值，function进行反回值处理
     $(".content").val(data);//获得得反回值后，将其填入到类名为"content"的文本框中
   });
  })
})
</script>

登入後複製

ajax.php程式碼：

<&#63;php
$name=$_POST["name"];
if($name=="netxu"){
  echo "对不起，".$name."数据存在";
}
else{
  echo "恭喜你，".$name."可以使用";
}
&#63;>

登入後複製

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

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7746

Java教學

1643

CakePHP 教程

1397

Laravel 教程

1291

PHP教程

1234

Related knowledge

PHP 與 Ajax：建立一個自動完成建議引擎 Jun 02, 2024 pm 08:39 PM

使用PHP和Ajax建置自動完成建議引擎：伺服器端腳本：處理Ajax請求並傳回建議(autocomplete.php)。客戶端腳本：發送Ajax請求並顯示建議(autocomplete.js)。實戰案例：在HTML頁面中包含腳本並指定search-input元素識別碼。

jQuery中如何使用PUT請求方式？ Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT請求方式？在jQuery中，發送PUT請求的方法與發送其他類型的請求類似，但需要注意一些細節和參數設定。 PUT請求通常用於更新資源，例如更新資料庫中的資料或更新伺服器上的檔案。以下是在jQuery中使用PUT請求方式的具體程式碼範例。首先，確保引入了jQuery庫文件，然後可以透過以下方式發送PUT請求：$.ajax({u

如何使用Ajax從PHP方法取得變數？ Mar 09, 2024 pm 05:36 PM

使用Ajax從PHP方法取得變數是Web開發中常見的場景，透過Ajax可以實作頁面無需刷新即可動態取得資料。在本文中，將介紹如何使用Ajax從PHP方法中取得變量，並提供具體的程式碼範例。首先，我們需要寫一個PHP檔案來處理Ajax請求，並傳回所需的變數。下面是一個簡單的PHP檔案getData.php的範例程式碼：

jQuery小技巧：快速修改頁面所有a標籤的文本 Feb 28, 2024 pm 09:06 PM

標題：jQuery小技巧：快速修改頁面所有a標籤的文字在網頁開發中，我們經常需要對頁面中的元素進行修改和操作。使用jQuery時，有時候需要一次修改頁面中所有a標籤的文字內容，這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本，同時給出具體的程式碼範例。首先，我們需要引入jQuery庫文件，確保在頁面中引入了以下程式碼：&lt

使用jQuery修改所有a標籤的文字內容 Feb 28, 2024 pm 05:42 PM

標題：使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫，被廣泛用於處理DOM操作。在網頁開發中，經常會遇到需要修改頁面上連結標籤（a標籤）的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標，並提供具體的程式碼範例。首先，我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼：

PHP跳轉頁面並攜帶POST資料的實作方法 Mar 22, 2024 am 10:42 AM

PHP是一種廣泛應用於網站開發的程式語言，而頁面跳躍並攜帶POST資料是在網站開發中常見的需求。本文將介紹如何實現PHP頁面跳轉並攜帶POST數據，包括具體的程式碼範例。在PHP中，頁面跳躍一般透過header函數實現。如果需要在跳轉過程中攜帶POST數據，可以透過以下步驟完成：首先，建立一個包含表單的頁面，使用者在該頁面填寫資訊並點擊提交按鈕。在表單的acti

PHP程式碼範例：如何用POST方式傳參並實現頁面跳轉 Mar 07, 2024 pm 01:45 PM

標題：PHP程式碼範例：使用POST方式傳參並實現頁面跳轉的方法在Web開發中，經常涉及如何透過POST方式傳遞參數，並在伺服器端進行處理後實現頁面跳轉的需求。 PHP作為一種流行的伺服器端腳本語言，提供了豐富的函數和語法來實現這一目的。以下將透過一個實際的範例來介紹如何使用PHP來實現這項功能。首先，我們需要準備兩個頁面，一個用來接收POST請求並處理參數

PHP 與 Ajax：建立動態載入內容的解決方案 Jun 06, 2024 pm 01:12 PM

Ajax（非同步JavaScript和XML）允許在不重新載入頁面情況下新增動態內容。使用PHP和Ajax，您可以動態載入產品清單：HTML建立一個帶有容器元素的頁面，Ajax請求載入資料後將資料加入到該元素中。 JavaScript使用Ajax透過XMLHttpRequest向伺服器傳送請求，從伺服器取得JSON格式的產品資料。 PHP使用MySQL從資料庫查詢產品數據，並將其編碼為JSON格式。 JavaScript解析JSON數據，並將其顯示在頁面容器中。點選按鈕觸發Ajax請求，載入產品清單。

See all articles

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

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題