$.post()
方法通过 HTTP POST 方式向服务器发送请求并获取返回的数据。是 $.ajax()
的简化版。
参数讲解:
url:必需。请求地址
data:可选。需要传递到服务器端的参数。 参数形式为“键/值”。
function:可选。发送请求成功后的回调函数,在请求完成时被调用。该函数参数依次为响应体和状态。(只有当Response的返回状态是success才是调用该方法)
type:可选。返回数据的类型。可以是:string或json、xml等类型。
【jsp页面】
|——————————————————
注意,本篇传到后台的参数形式为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="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<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(typeof data+" ,返回的内容为 "+data);
var jsonReturn = JSON.parse(data);
alert(typeof jsonReturn+" 转换后内容 "+jsonReturn);
alert(jsonReturn.username+" , "+jsonReturn.password);
}
,"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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
【后台接收servlet1】
思路:
通过request.getReader
获取一个BufferedReader;
写入到一个StringBulider,转换为String;
……..
返回一个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();
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();
String jsonString =getStringFromReq(request) ;
System.out.println("jsonString..."+jsonString);
HashMap<String, Object> map = getMapFromQueryString(jsonString);
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 {
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;
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
postServlet init().......
jsonString...username=admin&password=123456
resultJson ...{"username":"admin","password":"123456"}
resultJson ..."{\"username\":\"admin\",\"password\":\"123456\"}"
下图标明:
响应内容类型为json;
请求类型为默认值;
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
会将参数以 "a=1"&"b=2";的形式进行编码。
如:username=yanshi02&password=123456
表单数据在Form Data域;
【特别提醒】
- ①若使用以下方式返回,不用解析为JSON object 可以直接使用data.key 获取属性
//将转换得到的map转换为json并返回
ObjectMapper objectMapper = new ObjectMapper();
String resultJson = objectMapper.writeValueAsString(map);
//此处直接返回JSON object对象,JSP可直接使用data.key
System.out.println("resultJson ..."+resultJson);
- ②若使用以下方式返回,必须解析为JSON object 才可以使用data.key 获取属性
//将转换得到的map转换为json并返回
ObjectMapper objectMapper = new ObjectMapper()
String resultJson = objectMapper.writeValueAsString(map)
//此处直接返回JSON object对象,JSP可直接使用data.key
System.out.println("resultJson ..."+resultJson)
// resultJson = resultJson.replace("\"", "\\\"")
// resultJson = "\""+resultJson+"\""
//此处返回JSON 字符串 string对象
// System.out.println("resultJson ..."+resultJson)
【后台接收servlet2】
思路:
通过Map<String,String[]> map=request.getParameterMap();
得到参数;
…….
返回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 {
public void destroy() {
super.destroy()
// 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()
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
System.out.println("key :"+key+","+i+","+map.get(key)[i])
}
map2.put(key, map.get(key)[0])
}
//拿到$("#editform").serialize()
// String jsonString =getStringFromReq(request)
// System.out.println("jsonString..."+jsonString)
//通过拿到的querystring转换为map
// HashMap<String, Object> map = getMapFromQueryString(jsonString)
//将转换得到的map转换为json并返回
ObjectMapper objectMapper = new ObjectMapper()
String resultJson = objectMapper.writeValueAsString(map2)
System.out.println("resultJson1: "+resultJson)
//如下,进行手动拼接!!!如果不拼接,JSP可以直接使用data.key获取json属性
resultJson = resultJson.replace("\"", "\\\"")
resultJson = "\""+resultJson+"\""
System.out.println("resultJson ..."+resultJson)
// "{\"username\":\"admin\",\"password\":\"123456\"}"
out.print(resultJson)
out.flush()
out.close()
}
public void init() throws ServletException {
// Put your code here
System.out.println("postServlet2 init().......")
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
result as follows:
postServlet2 init().......
key :username,0,admin
key :password,0,123456
resultJson1: {"username":"admin","password":"123456"}
resultJson ..."{\"username\":\"admin\",\"password\":\"123456\"}"
【这里讲述一下手动拼接后JSP解析过程,如果没有手动拼接,那么为上述特别提醒中第二种方式】
【后台接收Servlet3】
思路:
直接使用request.getParameter();
获取字符串;
手动拼接为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 PostServlet5 extends HttpServlet {
/**
* queryString = $('#editform').serialize();
使用request.getParameter()
*/
public void destroy() {
super.destroy();
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();
String name = request.getParameter("username");
String password = request.getParameter("password");
String jsonString ="{\"username\":"+'"'+name+'"'+",\"password\":"+'"'+password+'"'+"}";
System.out.println("jsonString..."+jsonString);
ObjectMapper objectMapper = new ObjectMapper();
String resultJson = objectMapper.writeValueAsString(jsonString);
System.out.println("resultJson ..."+resultJson);
response.reset();
out.println(jsonString );
out.flush();
out.close();
}
public void init() throws ServletException {
System.out.println("postServlet5 init().......");
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
此时String jsonString 返回的 json type 为string ,需要进行解析为object 才能使用 data.key 获取json属性。。。过程参考上面。
一定要分清,虽然JS里面一切皆为对象,但是 typeof :string 与 typeof :object 不是一回事!!!
但是如果你使用 instance of object ,那么 string 或者object 都会返回true!
点击查看JS中对象的前生今世
题外话1:
如果以以下形式传值呢?
$.post(url+"querystring="+queryString,queryString,function(data){});
一部分参数在URL后面,一部分为form data。
【如果为 get 请求,无论传输形式怎样,数据都在Query String Parameters 里面!】点击查看Get 请求
F12看控制台:
(1) 请求URL:
Request URL:http://localhost:8080/AJAX/postServlet2?querystring=username=yanshi02&password=123456
(2) URL后面的参数放在了Query String Parameters里面。
而且,分成的两部分:
querystring:username=yanshi02
password:123456
//默认以 & 分割 !!!
(3) 另外正常传的queryString放在了Form Data里面。
其中,接收方法思路有三种。
① 使用request.getParameterMap
;
getParameterMap 会把键值对参数,解析为对应map 的key:value !
修改部分代码:
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
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=yanshi02
key :username,0,yanshi02
key :password,0,123456
key :password,1,123456
resultJson ...{"username":"yanshi02","querystring":"username=yanshi02","password":"123456"}
//可见 key为password的数组:"password":["123456","123456"]
② 使用request.getReader ;
只能获取 Form Data,不能获取Query String Data。
同理,该方法不适用 $.get() 。
③ 使用request.getQueryString
;
只能获取Query String Data,不能获取Form Data 。
题外话2
如果请求形式为:
queryString = $('#editform').serialize();
$.post(url,{mydata:queryString},function(data){});
首先看大图:
数据传输形式为:
mydata:username=yanshi02&password=123456
那么除了上述前两种思路外。
还有第三种思路!
使用request.getParameter("mydata")
String jsonStr = request.getParameter("mydata")
System.out.println(jsonStr)
只要获得拼接的string,就可以返回json!
综上:
默认ContentType下,数据会以username=yanshi02&password=123456
形式进行编码。
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
如果是以{key : value} 形式传输的,有三种接收思路:
如$.post(url,{mydata:queryString},function(data){});
① 使用request.getReader
;
② 使用request.getParameterMap
;
③ 使用request.getParameter("key")
;
如果是以 value形式传输的,则可以使用前两种思路。
如$.post(url,queryString,function(data){});
如果使用第三种思路,则需要将获取得到的string手动拼接为json string
注意 :此时的queryString取值!
queryString = $('#editform').serialize();
至于queryString取如下值(JSON形式),请看下一篇queryString为json形式
【http://blog.csdn.net/J080624/article/details/54949134】
queryString = $('#editform').serializeArray();
queryString = JSON.stringify(queryString);