030_jQuery Ajax的get方法
生活随笔
收集整理的這篇文章主要介紹了
030_jQuery Ajax的get方法
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1. $.get()方法通過(guò)HTTP GET請(qǐng)求從服務(wù)器上請(qǐng)求數(shù)據(jù)。
2. $.get()方法請(qǐng)求成功時(shí)可調(diào)用回調(diào)函數(shù)。
3. 語(yǔ)法:
$.get(url,data,function(response,textStatus,jqXHR),dataType)4. 參數(shù)
5. jqXHR對(duì)象
5.1. 所有jQuery的AJAX方法返回的是XMLHTTPRequest對(duì)象的超類。$.get()方法返回的也是XMLHTTPRequest對(duì)象的超類, 實(shí)現(xiàn)了約定的接口, 賦予其所有的屬性、方法, 以及約定的行為。出于對(duì)由$.ajax()方法使用的回調(diào)函數(shù)名稱便利性和一致性的考慮, 它提供了error(),?success()以及complete()方法。
// 請(qǐng)求生成后立即分配處理程序, 請(qǐng)記住該請(qǐng)求針對(duì)jqxhr對(duì)象 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. 新建一個(gè)名叫jQueryAjaxGet的動(dòng)態(tài)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">結(jié)果區(qū)域</div><br /><button id="btn1">get方法請(qǐng)求獲取xml數(shù)據(jù)</button> <button id="btn2">get方法請(qǐng)求獲取json數(shù)據(jù)</button><br /><br /><button id="btn3">get方法規(guī)定服務(wù)器響應(yīng)xml數(shù)據(jù)</button> <button id="btn4">get方法規(guī)定服務(wù)器響應(yīng)json數(shù)據(jù)</button></body> </html>5.3. 新建test.xml
<?xml version="1.0" encoding="UTF-8"?> <data><code>1</code><info>success</info><msg>請(qǐng)求成功。</msg> </data>5.4. 新建text.json
{"data": {"code": 1, "info": "success", "msg": "請(qǐng)求成功。"}}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();// 響應(yīng)客戶端的內(nèi)容類型是text/plain 編碼是UTF-8(包含字符編碼和網(wǎng)頁(yè)編碼)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. 運(yùn)行項(xiàng)目
《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結(jié)
以上是生活随笔為你收集整理的030_jQuery Ajax的get方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 029_jQuery Ajax简介
- 下一篇： 031_jQuery Ajax的post