AJAX - $.post(url,data,function,type)

2024-04-27 15:17:34

字體：大中小

供稿：網(wǎng)友

$.post()方法通過 HTTP POST 方式向服務(wù)器發(fā)送請(qǐng)求并獲取返回的數(shù)據(jù)。是 $.Ajax()的簡(jiǎn)化版。

參數(shù)講解：

url：必需。請(qǐng)求地址

data：可選。需要傳遞到服務(wù)器端的參數(shù)。參數(shù)形式為“鍵/值”。

function：可選。發(fā)送請(qǐng)求成功后的回調(diào)函數(shù),在請(qǐng)求完成時(shí)被調(diào)用。該函數(shù)參數(shù)依次為響應(yīng)體和狀態(tài)。(只有當(dāng)Response的返回狀態(tài)是success才是調(diào)用該方法)

type：可選。返回?cái)?shù)據(jù)的類型。可以是：string或json、xml等類型。

【jsp頁面】

|—————————————————— 注意，本篇傳到后臺(tái)的參數(shù)形式為username=yanshi02&passWord=123456 |——————————————————

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>My JSP 'post.jsp' starting page</title> <meta http-equiv="CSS" href="styles.css"> --> <script type="text/Javascript" src="./scripts/jquery-1.7.2.js"></script> <script type="text/javascript"> var url =""; var queryString = ""; $(function(){ $("input[type='button']").click(function(){ url = $("#editform").attr("action"); queryString = $('#editform').serialize(); $.post(url,queryString,function(data){ alert(data); //var jsonReturn=eval("("+data+")"); } ,"json"); }); }); </script> </head> <body> This is my JSP page. <br> <form id="editform" action="postServlet2" method="post"> <input type="text" name="username" value=""/> <input type="password" name="password" value=""/> </form> <input name="post" type="button" value="提交"/> </body></html>

【后臺(tái)接收servlet1】

思路：

通過request.getReader獲取一個(gè)BufferedReader；寫入到一個(gè)StringBulider，轉(zhuǎn)換為String； …….. 返回一個(gè)json。

package com.atgui.ajax.app.servlet;import java.io.BufferedReader;import java.io.IOException;import java.io.PrintWriter;import java.util.HashMap;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.codehaus.jackson.map.ObjectMapper;public class PostServlet extends HttpServlet { /** * Destruction of the servlet. <br> */ public void destroy() { super.destroy(); // Just puts "destroy" string in log // Put your code here System.out.println("postServlet destroy() ......"); } public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("application/json"); PrintWriter out = response.getWriter(); //拿到$("#editform").serialize(); String jsonString =getStringFromReq(request) ; System.out.println("jsonString..."+jsonString); //通過拿到的querystring轉(zhuǎn)換為map HashMap<String, Object> map = getMapFromQueryString(jsonString); //將轉(zhuǎn)換得到的map轉(zhuǎn)換為json并返回 ObjectMapper objectMapper = new ObjectMapper(); String resultJson = objectMapper.writeValueAsString(map); System.out.println("resultJson ..."+resultJson); out.print(resultJson); out.flush(); out.close(); } public void init() throws ServletException { // Put your code here System.out.println("postServlet init()......."); } public String getStringFromReq(HttpServletRequest request) { StringBuilder sb = new StringBuilder(); try { BufferedReader reader = request.getReader(); char[]buff = new char[1024]; int len; while((len = reader.read(buff)) != -1) { sb.append(buff,0, len); } }catch (IOException e) { e.printStackTrace(); } String resultString = sb.toString(); return resultString; } public HashMap<String, Object> getMapFromQueryString(String queryString) { HashMap map = new HashMap<String, String>(); String[] qStrings = queryString.split("&"); for (String string : qStrings) { String[] qStrings2 = string.split("="); map.put(qStrings2[0], qStrings2[1]); } return map; }}

下圖標(biāo)明：

響應(yīng)內(nèi)容類型為json；請(qǐng)求呢歐讓類型為默認(rèn)值；

Content-Type:application/x-www-form-urlencoded; charset=UTF-8會(huì)將參數(shù)以 "a=1"&"b=2";的形式進(jìn)行編碼。如：username=yanshi02&password=123456

表單數(shù)據(jù)在Form Data域；

這里寫圖片描述

【后臺(tái)接收servlet2】

思路：

通過Map<String,String[]> map=request.getParameterMap();得到參數(shù)； ……. 返回json。

package com.atgui.ajax.app.servlet;import java.io.BufferedReader;import java.io.IOException;import java.io.PrintWriter;import java.util.HashMap;import java.util.Map;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.codehaus.jackson.map.ObjectMapper;public class PostServlet2 extends HttpServlet { /** * Destruction of the servlet. <br> */ public void destroy() { super.destroy(); // Just puts "destroy" string in log // Put your code here System.out.println("postServlet2 destroy() ......"); } public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("application/json"); PrintWriter out = response.getWriter(); //拿到參數(shù) Map<String,String[]> map = request.getParameterMap(); HashMap<String, Object> map2 = new HashMap<String, Object>(); for(String key : map.keySet()){ System.out.println("key :"+key+", value : "+map.get(key)[0]); for (int i = 0; i < map.get(key).length; i++) { System.out.println(i+","+map.get(key)[i]); } map2.put(key, map.get(key)[0]); } //將轉(zhuǎn)換得到的map2轉(zhuǎn)換為json并返回 ObjectMapper objectMapper = new ObjectMapper(); String resultJson = objectMapper.writeValueAsString(map2); System.out.println("resultJson ..."+resultJson); out.print(resultJson); out.flush(); out.close(); } public void init() throws ServletException { // Put your code here System.out.println("postServlet2 init()......."); }}

result as follows：

postServlet2 init().......key :username, value : yanshi020,yanshi02key :password, value : 1234560,123456resultJson ...{"username":"yanshi02","password":"123456"}

題外話1： 如果以以下形式傳值呢？

$.post(url+"querystring="+queryString,queryString,function(data){});

一部分參數(shù)在URL后面，一部分為form data。

【如果為 get 請(qǐng)求，無論傳輸形式怎樣，數(shù)據(jù)都在Query String Parameters 里面！】點(diǎn)擊查看Get 請(qǐng)求

F12看控制臺(tái)：

(1) 請(qǐng)求URL：

Request URL:http://localhost:8080/AJAX/postServlet2?querystring=username=yanshi02&password=123456

(2) URL后面的參數(shù)放在了Query String Parameters里面。而且，分成的兩部分：

querystring:username=yanshi02password:123456//默認(rèn)以 & 分割！！！

(3) 另外正常傳的queryString放在了Form Data里面。

這里寫圖片描述

其中，接收方法思路有三種。

① 使用request.getParameterMap;

修改部分代碼：

Map<String,String[]> map = request.getParameterMap(); HashMap<String, Object> map2 = new HashMap<String, Object>(); for(String key : map.keySet()){// System.out.println("key :"+key+", value : "+map.get(key)[0]);// if (map.get(key).length>1) {// System.out.println("key :"+key+", value :"+map.get(key)[1]);// } for (int i = 0; i < map.get(key).length; i++) { System.out.println("key :"+key+","+i+","+map.get(key)[i]); } map2.put(key, map.get(key)[0]); }

result as follows ：

postServlet2 init().......key :querystring,0,username=yanshi02key :username,0,yanshi02key :password,0,123456key :password,1,123456resultJson ...{"username":"yanshi02","querystring":"username=yanshi02","password":"123456"}//可見 key為password的數(shù)組："password":["123456","123456"]

② 使用request.getReader ;

只能獲取 Form Data，不能獲取Query String Data。

同理，該方法不適用 $.get() 。

③ 使用request.getQueryString;

只能獲取Query String Data，不能獲取Form Data 。

題外話2

如果請(qǐng)求形式為：queryString = $('#editform').serialize();$.post(url,{mydata:queryString},function(data){});

首先看大圖：

這里寫圖片描述