030_jQuery Ajax的get方法
生活随笔
收集整理的這篇文章主要介紹了
030_jQuery Ajax的get方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. $.get()方法通過HTTP GET請求從服務器上請求數據。
2. $.get()方法請求成功時可調用回調函數。
3. 語法:
$.get(url,data,function(response,textStatus,jqXHR),dataType)4. 參數
5. jqXHR對象
5.1. 所有jQuery的AJAX方法返回的是XMLHTTPRequest對象的超類。$.get()方法返回的也是XMLHTTPRequest對象的超類, 實現了約定的接口, 賦予其所有的屬性、方法, 以及約定的行為。出于對由$.ajax()方法使用的回調函數名稱便利性和一致性的考慮, 它提供了error(),?success()以及complete()方法。
// 請求生成后立即分配處理程序, 請記住該請求針對jqxhr對象 var jqXHR = $.get("login.action", function(response, textStatus, jqXHR) {}) .success(function(response,textStatus,jqXHR) { }) .error(function(jqXHR,textStatus,error) { }) .complete(function(jqXHR,textStatus) { });6. 例子
6.1. 新建一個名叫jQueryAjaxGet的動態WEB工程
6.2. 新建index.html
<!DOCTYPE html> <html><head><title>jQuery-Ajax的get()方法</title><meta charset="utf-8" /><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){var jqXHR = $.get("getVideo.action", {id: '1001', videoName: 'jQuery視頻教程', lession: '10', dataType: 'xml'}, function(response, textStatus, jqXHR){$("#result").text(response);}); console.log(jqXHR);});$('#btn2').click(function(){$.get("getVideo.action", {id: '1001', videoName: 'jQuery視頻教程', lession: '10', dataType: 'json'}, function(response, textStatus, jqXHR){$("#result").text(response);console.log('-------Start-------------');console.log('-------End-------------');}).success(function(response,textStatus,jqXHR) { console.log('-------success Start-------------');for(var i = 0; i < arguments.length; i++){console.log(arguments[i]);} console.log('-------success End-------------');}).error(function(jqXHR,textStatus,error) { console.log('-------error Start-------------');for(var i = 0; i < arguments.length; i++){console.log(arguments[i]);} console.log('-------error End-------------');}).complete(function(jqXHR,textStatus) { console.log('-------complete Start-------------');for(var i = 0; i < arguments.length; i++){console.log(arguments[i]);}console.log('-------complete End-------------'); }); });$('#btn3').click(function(){$.get("getVideo.action", {id: '1001', videoName: 'jQuery視頻教程', lession: '10', dataType: 'xml'}, function(response, textStatus, jqXHR){var data = $(response);$("#result").text('code=' + data.find('code').text() + ',info=' + data.find('info').text() + ',msg=' + data.find('msg').text());}, "xml");});$('#btn4').click(function(){$.get("getVideo.action", {id: '1001', videoName: 'jQuery視頻教程', lession: '10', dataType: 'json'}, function(response, textStatus, jqXHR){$("#result").text('code=' + response.data.code + ',info=' + response.data.info + ',msg=' + response.data.msg);}, "json"); });});</script><style type="text/css">div {width: 450px;height: 100px;background-color: pink;}</style></head><body> <div id="result">結果區域</div><br /><button id="btn1">get方法請求獲取xml數據</button> <button id="btn2">get方法請求獲取json數據</button><br /><br /><button id="btn3">get方法規定服務器響應xml數據</button> <button id="btn4">get方法規定服務器響應json數據</button></body> </html>5.3. 新建test.xml
<?xml version="1.0" encoding="UTF-8"?> <data><code>1</code><info>success</info><msg>請求成功。</msg> </data>5.4. 新建text.json
{"data": {"code": 1, "info": "success", "msg": "請求成功。"}}5.5. 新建JqueryAjaxGet.java
package com.rjbd.jag;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 JqueryAjaxGet extends HttpServlet {private static final long serialVersionUID = 1L;@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String id = req.getParameter("id");String videoName = new String(req.getParameter("videoName").getBytes("ISO-8859-1"), "utf-8");String lession = req.getParameter("lession");String dataType = req.getParameter("dataType");System.out.println("id = " + id + ", videoName = " + videoName + " , lession = " + lession + " , dataType = " + 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);} }5.6. 修改web.xml
5.7. 運行項目
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的030_jQuery Ajax的get方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 029_jQuery Ajax简介
- 下一篇： 031_jQuery Ajax的post