032_jQuery Ajax的load方法
生活随笔
收集整理的這篇文章主要介紹了
032_jQuery Ajax的load方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. load()方法通過AJAX請求從服務器加載數據, 并把返回的數據放置到指定的元素中。
2. 語法
$(selector).load(url,data,function(response,textStatus,jqXHR))3. 參數
4. 該方法是最簡單的從服務器獲取數據的方法。它幾乎與$.get(url,data,function(response,textStatus,jqXHR))等價, 不同的是它不是全局函數, 并且它擁有隱式的回調函數。當偵測到成功的響應時(比如: 當status為"success"或"notmodified"時), load()將匹配元素的html內容設置為返回的數據。
$('#btn1').click(function(){$("#result").load("test.html"); // 這是一個GET請求 });5. 加載頁面片段
5.1. load()方法允許我們規定要插入的遠程文檔的某個部分。這一點是通過url參數的特殊語法實現的。如果該字符串中包含一個或多個空格, 緊接第一個空格的字符串則是決定所加載內容的jQuery選擇器。
$('#btn2').click(function(){$("#result").load("test.html #p1"); // 這是一個GET請求 });6. 如果提供的數據是對象, 則使用POST方法; 否則使用GET方法。
$('#btn3').click(function(){$("#result").load("JqueryAjaxLoad.action #p1", "dataType=xml"); // 這是一個GET請求 }); $('#btn4').click(function(){$("#result").load("JqueryAjaxLoad.action", {dataType: "html"}); // 這是一個POST請求 });7. 例子
7.1. 新建一個名為jQueryAjaxLoad動態WEB工程
7.2. 編寫index.html
<!DOCTYPE html> <html><head><title>jQuery-Ajax的load()方法</title><meta charset="utf-8" /><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("#result").load("test.html"); // 這是一個GET請求});$('#btn2').click(function(){$("#result").load("test.html #p1"); // 這是一個GET請求});$('#btn3').click(function(){$("#result").load("JqueryAjaxLoad.action #p1", "dataType=xml"); // 這是一個GET請求});$('#btn4').click(function(){$("#result").load("JqueryAjaxLoad.action", {dataType: "html"}); // 這是一個POST請求});$('#btn5').click(function(){// 這是一個POST請求$("#result").load("JqueryAjaxLoad.action", {dataType: "html"}, function(response, textStatus, jqXHR){console.log('response=' + response + ', textStatus=' + textStatus);}); });});</script><style type="text/css">div {width: 450px;height: 100px;background-color: pink;}</style></head><body> <div id="result">結果區域</div><br /><button id="btn1">load方法只有url</button> <button id="btn2">load方法只有url加載頁面片段</button><button id="btn3">load方法get請求參數</button> <br /><br /><button id="btn4">load方法post請求參數</button> <button id="btn5">load方法回調函數</button></body> </html>7.3. 編寫test.html
<!DOCTYPE html> <html><head><title>測試文檔</title><meta charset="utf-8" /></head><body> <h2>這是test.html文件中的h2</h2><p id="p1">這是test.html文件中的p</p></body> </html>7.4. 編寫test.xml
<?xml version="1.0" encoding="UTF-8"?> <h2>這是test.xml文件中的h2</h2> <p id="p1">這是test.xml文件中的p</p>7.5. 編寫JqueryAjaxLoad.java
package com.rjbd.jal;import java.io.BufferedReader; import java.io.FileReader; import java.io.IOException;import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;public class JqueryAjaxLoad extends HttpServlet {private static final long serialVersionUID = 1L;@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String dataType = req.getParameter("dataType");FileReader fr = new FileReader(getServletContext().getRealPath("test." + dataType));BufferedReader br = new BufferedReader(fr);StringBuffer sb = new StringBuffer();String result = null;while((result = br.readLine()) != null) {sb.append(result);}br.close();fr.close();// 響應客戶端的內容類型是text/plain 編碼是UTF-8(包含字符編碼和網頁編碼)resp.setContentType("text/plain;charset=UTF-8");resp.getWriter().write(sb.toString());}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);} }7.6. 修改web.xml
7.8. 運行項目
總結
以上是生活随笔為你收集整理的032_jQuery Ajax的load方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 031_jQuery Ajax的post
- 下一篇： 033_jQuery Ajax的ajax