031_jQuery Ajax的post方法
生活随笔
收集整理的這篇文章主要介紹了
031_jQuery Ajax的post方法
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1. $.post()方法通過HTTP POST請求從服務(wù)器載入數(shù)據(jù)。
2. $.post()方法請求成功時可調(diào)用回調(diào)函數(shù)。
3. 語法
$.post(url,data,funxtion(response, textStatus, jqXHR),dataType)4. 參數(shù)
5. jqXHR對象
5.1. 所有jQuery的AJAX方法返回的是XMLHTTPRequest對象的超類。$.post()方法返回的也是XMLHTTPRequest對象的超類, 實現(xiàn)了約定的接口, 賦予其所有的屬性、方法, 以及約定的行為。出于對由$.ajax()方法使用的回調(diào)函數(shù)名稱便利性和一致性的考慮, 它提供了error(),?success()以及complete()方法。
// 請求生成后立即分配處理程序, 請記住該請求針對jqxhr對象 var jqXHR = $.post("login.action", function(response, textStatus, jqXHR) {}) .success(function(response,textStatus,jqXHR) { }) .error(function(jqXHR,textStatus,error) { }) .complete(function(jqXHR,textStatus) { });6. 例子
6.1. 新建一個名叫jQueryAjaxPost的動態(tài)WEB工程
6.2. 新建index.html
<!DOCTYPE html> <html><head><title>jQuery-Ajax的post()方法</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 = $.post("getVideo.action", {id: '1001', videoName: 'jQuery視頻教程', lession: '10', dataType: 'xml'}, function(response, textStatus, jqXHR){$("#result").text(response);}); console.log(jqXHR);});$('#btn2').click(function(){$.post("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(){$.post("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(){$.post("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">post方法請求獲取xml數(shù)據(jù)</button> <button id="btn2">post方法請求獲取json數(shù)據(jù)</button><br /><br /><button id="btn3">post方法規(guī)定服務(wù)器響應(yīng)xml數(shù)據(jù)</button> <button id="btn4">post方法規(guī)定服務(wù)器響應(yīng)json數(shù)據(jù)</button></body> </html>6.3. 新建test.xml
<?xml version="1.0" encoding="UTF-8"?> <data><code>1</code><info>success</info><msg>請求成功。</msg> </data>6.4. 新建text.json
{"data": {"code": 1, "info": "success", "msg": "請求成功。"}}6.5. 新建JqueryAjaxPost.java
package com.rjbd.jap;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 JqueryAjaxPost 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 = req.getParameter("videoName");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)頁編碼)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);} }6.6. 修改web.xml
6.7. 運行項目
總結(jié)
以上是生活随笔為你收集整理的031_jQuery Ajax的post方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 030_jQuery Ajax的get方
- 下一篇： 032_jQuery Ajax的load