AJAX - $.post(url,data,function,type)-(参数为value-type-string)

前端之家收集整理的这篇文章主要介绍了AJAX - $.post(url,data,function,type)-(参数为value-type-string)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

$.post()方法通过 HTTP POST 方式向服务器发送请求并获取返回的数据。是 $.ajax()的简化版。

参数讲解:

url:必需。请求地址

data:可选。需要传递到服务器端的参数。 参数形式为“键/值”。

function:可选。发送请求成功后的回调函数,在请求完成时被调用。该函数参数依次为响应体和状态。(只有当Response的返回状态是success才是调用方法)

type:可选。返回数据的类型。可以是:string或json、xml等类型。

【jsp页面

|——————————————————
注意,本篇传到后台的参数形式为username=yanshi02&password=123456
|——————————————————

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>
  3.  
  4. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  5. <html>
  6. <head>
  7. <base href="<%=basePath%>">
  8.  
  9. <title>My JSP 'post.jsp' starting page</title>
  10.  
  11. <Meta http-equiv="pragma" content="no-cache">
  12. <Meta http-equiv="cache-control" content="no-cache">
  13. <Meta http-equiv="expires" content="0">
  14. <Meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  15. <Meta http-equiv="description" content="This is my page">
  16. <!-- <link rel="stylesheet" type="text/css" href="styles.css"> -->
  17. <script type="text/javascript" src="./scripts/jquery-1.7.2.js"></script>
  18. <script type="text/javascript"> var url =""; var queryString = ""; $(function(){ $("input[type='button']").click(function(){ url = $("#editform").attr("action"); //这里需注意,不是serializeArray queryString = $('#editform').serialize(); $.post(url,queryString,function(data){ alert(typeof data+",返回的内容为 "+data); //alert(data.username+","+data.password); //var jsonReturn = this.data; //var jsonReturn = eval("("+data+")"); //var jsonReturn = $.parseJSON(data); var jsonReturn = JSON.parse(data);//将JSON字符串转换为对象 alert(typeof jsonReturn+" 转换后内容 "+jsonReturn); // 解析JSON对象 alert(jsonReturn.username+","+jsonReturn.password); },"json"); }); }); </script>
  19. </head>
  20.  
  21. <body>
  22. This is my JSP page. <br>
  23. <form id="editform" action="postServlet2" method="post">
  24. <input type="text" name="username" value=""/>
  25. <input type="password" name="password" value=""/>
  26.  
  27. </form>
  28. <input name="post" type="button" value="提交"/>
  29. </body>
  30. </html>

后台接收servlet1】

思路:

通过request.getReader获取一个BufferedReader;
写入到一个StringBulider,转换为String;
……..
返回一个json。

  1. package com.atgui.ajax.app.servlet;
  2.  
  3. import java.io.BufferedReader;
  4. import java.io.IOException;
  5. import java.io.PrintWriter;
  6. import java.util.HashMap;
  7.  
  8. import javax.servlet.ServletException;
  9. import javax.servlet.http.HttpServlet;
  10. import javax.servlet.http.HttpServletRequest;
  11. import javax.servlet.http.HttpServletResponse;
  12.  
  13. import org.codehaus.jackson.map.ObjectMapper;
  14.  
  15.  
  16. public class PostServlet extends HttpServlet {
  17.  
  18. /** * Destruction of the servlet. <br> */
  19. public void destroy() {
  20. super.destroy(); // Just puts "destroy" string in log
  21. // Put your code here
  22. System.out.println("postServlet destroy() ......");
  23. }
  24.  
  25. public void doGet(HttpServletRequest request,HttpServletResponse response)
  26. throws ServletException,IOException {
  27.  
  28. doPost(request,response);
  29. }
  30.  
  31. public void doPost(HttpServletRequest request,IOException {
  32.  
  33. response.setContentType("application/json");
  34. PrintWriter out = response.getWriter();
  35.  
  36. //拿到$("#editform").serialize();
  37. String jsonString =getStringFromReq(request) ;
  38. System.out.println("jsonString..."+jsonString);
  39.  
  40. //通过拿到的querystring转换为map
  41. HashMap<String,Object> map = getMapFromQueryString(jsonString);
  42.  
  43. //将转换得到的map转换为json并返回
  44. ObjectMapper objectMapper = new ObjectMapper();
  45. String resultJson = objectMapper.writeValueAsString(map);
  46. //此处直接返回JSON object对象,JSP可直接使用data.key
  47. System.out.println("resultJson ..."+resultJson);
  48.  
  49. // resultJson = resultJson.replace("\"","\\\"");
  50. // resultJson = "\""+resultJson+"\"";
  51. //此处返回JSON 字符串 string对象;JSP需要解析才能使用data.key
  52. // System.out.println("resultJson ..."+resultJson);
  53.  
  54. out.print(resultJson);
  55. out.flush();
  56. out.close();
  57. }
  58.  
  59. public void init() throws ServletException {
  60.  
  61. // Put your code here
  62. System.out.println("postServlet init().......");
  63. }
  64.  
  65. public String getStringFromReq(HttpServletRequest request) {
  66.  
  67. StringBuilder sb = new StringBuilder();
  68. try {
  69. BufferedReader reader = request.getReader();
  70. char[]buff = new char[1024];
  71. int len;
  72. while((len = reader.read(buff)) != -1) {
  73. sb.append(buff,0,len);
  74. }
  75. }catch (IOException e) {
  76. e.printStackTrace();
  77. }
  78. String resultString = sb.toString();
  79.  
  80. return resultString;
  81.  
  82. }
  83.  
  84. public HashMap<String,Object> getMapFromQueryString(String queryString) {
  85.  
  86. HashMap map = new HashMap<String,String>();
  87. String[] qStrings = queryString.split("&");
  88. for (String string : qStrings) {
  89. String[] qStrings2 = string.split("=");
  90. map.put(qStrings2[0],qStrings2[1]);
  91. }
  92.  
  93. return map;
  94.  
  95. }
  96.  
  97. }
  1. postServlet init().......
  2. jsonString...username=admin&password=123456
  3. resultJson ...{"username":"admin","password":"123456"}
  4. resultJson ..."{\"username\":\"admin\",\"password\":\"123456\"}"

下图标明:

响应内容类型为json;
请求类型为默认值;

  1. Content-Type:application/x-www-form-urlencoded; charset=UTF-8
  2.  
  3. 会将参数以 "a=1"&"b=2";的形式进行编码。
  4. 如:username=yanshi02&password=123456

表单数据在Form Data域;

【特别提醒】

  • ①若使用以下方式返回,不用解析为JSON object 可以直接使用data.key 获取属性
  1. //将转换得到的map转换为json并返回
  2. ObjectMapper objectMapper = new ObjectMapper();
  3. String resultJson = objectMapper.writeValueAsString(map);
  4. //此处直接返回JSON object对象,JSP可直接使用data.key
  5. System.out.println("resultJson ..."+resultJson);
  • 拿到返回的data
  • ②若使用以下方式返回,必须解析为JSON object 才可以使用data.key 获取属性
  1. //将转换得到的map转换为json并返回
  2. ObjectMapper objectMapper = new ObjectMapper();
  3. String resultJson = objectMapper.writeValueAsString(map);
  4. //此处直接返回JSON object对象,JSP可直接使用data.key
  5. System.out.println("resultJson ..."+resultJson);
  6.  
  7. // resultJson = resultJson.replace("\"","\\\"");
  8. // resultJson = "\""+resultJson+"\"";
  9. //此处返回JSON 字符串 string对象;JSP需要解析才能使用data.key
  10. // System.out.println("resultJson ..."+resultJson);
  • 拿到返回的数据【string形式】
  • 解析为json object

后台接收servlet2】

思路:

通过Map<String,String[]> map=request.getParameterMap();得到参数;
…….
返回json。

  1. package com.atgui.ajax.app.servlet;
  2.  
  3. import java.io.BufferedReader;
  4. import java.io.IOException;
  5. import java.io.PrintWriter;
  6. import java.util.HashMap;
  7. import java.util.Map;
  8.  
  9. import javax.servlet.ServletException;
  10. import javax.servlet.http.HttpServlet;
  11. import javax.servlet.http.HttpServletRequest;
  12. import javax.servlet.http.HttpServletResponse;
  13.  
  14. import org.codehaus.jackson.map.ObjectMapper;
  15.  
  16.  
  17. public class PostServlet2 extends HttpServlet {
  18.  
  19. /** * request.getParameterMap(); */
  20. public void destroy() {
  21. super.destroy(); // Just puts "destroy" string in log
  22. // Put your code here
  23. System.out.println("postServlet2 destroy() ......");
  24. }
  25.  
  26. public void doGet(HttpServletRequest request,HttpServletResponse response)
  27. throws ServletException,response);
  28. }
  29.  
  30. public void doPost(HttpServletRequest request,IOException {
  31.  
  32. response.setContentType("application/json");
  33. PrintWriter out = response.getWriter();
  34.  
  35. Map<String,String[]> map = request.getParameterMap();
  36. HashMap<String,Object> map2 = new HashMap<String,Object>();
  37. for(String key : map.keySet()){
  38. // System.out.println("key :"+key+",value : "+map.get(key)[0]);
  39. // if (map.get(key).length>1) {
  40. // System.out.println("key :"+key+",value :"+map.get(key)[1]);
  41. // }
  42. for (int i = 0; i < map.get(key).length; i++) {
  43. System.out.println("key :"+key+","+i+","+map.get(key)[i]);
  44. }
  45. map2.put(key,map.get(key)[0]);
  46. }
  47.  
  48. //拿到$("#editform").serialize();
  49. // String jsonString =getStringFromReq(request) ;
  50. // System.out.println("jsonString..."+jsonString);
  51.  
  52. //通过拿到的querystring转换为map
  53. // HashMap<String,Object> map = getMapFromQueryString(jsonString);
  54.  
  55. //将转换得到的map转换为json并返回
  56. ObjectMapper objectMapper = new ObjectMapper();
  57. String resultJson = objectMapper.writeValueAsString(map2);
  58. System.out.println("resultJson1: "+resultJson);
  59.  
  60. //如下,进行手动拼接!!!如果不拼接,JSP可以直接使用data.key获取json属性
  61. resultJson = resultJson.replace("\"","\\\"");
  62. resultJson = "\""+resultJson+"\"";
  63. System.out.println("resultJson ..."+resultJson);
  64. // "{\"username\":\"admin\",\"password\":\"123456\"}"
  65. out.print(resultJson);
  66. out.flush();
  67. out.close();
  68. }
  69.  
  70. public void init() throws ServletException {
  71.  
  72. // Put your code here
  73. System.out.println("postServlet2 init().......");
  74. }
  75.  
  76.  
  77. }

result as follows:

  1. postServlet2 init().......
  2. key :username,admin
  3. key :password,123456
  4. resultJson1: {"username":"admin",\"password\":\"123456\"}"

【这里讲述一下手动拼接后JSP解析过程,如果没有手动拼接,那么为上述特别提醒中第二种方式】

  • JSP 拿到后台传回的data
  • 进行解析为JSON 对象

后台接收Servlet3】

思路:
直接使用request.getParameter();
获取字符串;
手动拼接为JSON字符串直接返回。

  1. package com.atgui.ajax.app.servlet;
  2.  
  3. import java.io.BufferedReader;
  4. import java.io.IOException;
  5. import java.io.PrintWriter;
  6. import java.util.HashMap;
  7.  
  8. import javax.servlet.ServletException;
  9. import javax.servlet.http.HttpServlet;
  10. import javax.servlet.http.HttpServletRequest;
  11. import javax.servlet.http.HttpServletResponse;
  12.  
  13. import org.codehaus.jackson.map.ObjectMapper;
  14.  
  15.  
  16. public class PostServlet5 extends HttpServlet {
  17.  
  18. /** * queryString = $('#editform').serialize(); 使用request.getParameter() */
  19. public void destroy() {
  20. super.destroy(); // Just puts "destroy" string in log
  21. // Put your code here
  22. System.out.println("postServlet destroy() ......");
  23. }
  24.  
  25. public void doGet(HttpServletRequest request,IOException {
  26.  
  27. response.setContentType("application/json");
  28. PrintWriter out = response.getWriter();
  29.  
  30. String name = request.getParameter("username");
  31. String password = request.getParameter("password");
  32.  
  33. String jsonString ="{\"username\":"+'"'+name+'"'+",\"password\":"+'"'+password+'"'+"}";
  34. //手动拼接JSON如上形式,可直接返回,此时json为string非object;如果再次使用ObjectMapper转换,JSP 将最终按其字符数组对象进行单个字符遍历!!!
  35. System.out.println("jsonString..."+jsonString);
  36. //{"username":"admin","password":"123456"}
  37.  
  38. ObjectMapper objectMapper = new ObjectMapper();
  39. String resultJson = objectMapper.writeValueAsString(jsonString);
  40. System.out.println("resultJson ..."+resultJson);
  41. //"{\"username\":\"admin\",\"password\":\"123456\"}"
  42. response.reset();
  43.  
  44. out.println(jsonString );
  45. out.flush();
  46. out.close();
  47. }
  48.  
  49. public void init() throws ServletException {
  50.  
  51. // Put your code here
  52. System.out.println("postServlet5 init().......");
  53. }
  54.  
  55. }

此时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,function(data){});

一部分参数在URL后面,一部分为form data。

【如果为 get 请求,无论传输形式怎样,数据都在Query String Parameters 里面!】点击查看Get 请求


F12看控制台:

(1) 请求URL:

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

(2) URL后面的参数放在了Query String Parameters里面。
而且,分成的两部分:

  1. querystring:username=yanshi02
  2. password:123456
  3. //默认以 & 分割 !!!

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

其中,接收方法思路有三种。

① 使用request.getParameterMap;

getParameterMap 会把键值对参数,解析为对应map 的key:value !

修改部分代码

  1. Map<String,map.get(key)[0]);
  2. }

result as follows :

  1. postServlet2 init().......
  2. key :querystring,username=yanshi02
  3. key :username,yanshi02
  4. key :password,123456
  5. key :password,1,123456
  6. resultJson ...{"username":"yanshi02","querystring":"username=yanshi02","password":"123456"}
  7.  
  8. //可见 key为password的数组:"password":["123456","123456"]

② 使用request.getReader ;

只能获取 Form Data,不能获取Query String Data。

同理,该方法不适用 $.get() 。

③ 使用request.getQueryString;

只能获取Query String Data,不能获取Form Data 。


题外话2

  1. 如果请求形式为:
  2.  
  3. queryString = $('#editform').serialize();
  4.  
  5. $.post(url,{mydata:queryString},function(data){});

首先看大图

数据传输形式为:

  1. mydata:username=yanshi02&password=123456

那么除了上述前两种思路外。
还有第三种思路!

使用request.getParameter("mydata")

  1. String jsonStr = request.getParameter("mydata");
  2. System.out.println(jsonStr);

只要获得拼接的string,就可以返回json!


综上:

默认ContentType下,数据会以username=yanshi02&password=123456形式进行编码。

  1. Content-Type:application/x-www-form-urlencoded; charset=UTF-8

如果是以{key : value} 形式传输的,有三种接收思路:

$.post(url,function(data){});

① 使用request.getReader;
② 使用request.getParameterMap;
③ 使用request.getParameter("key");

如果是以 value形式传输的,则可以使用前两种思路。

$.post(url,function(data){});
如果使用第三种思路,则需要将获取得到的string手动拼接为json string

注意 :此时的queryString取值!

  1. queryString = $('#editform').serialize();

至于queryString取如下值(JSON形式),请看下一篇queryString为json形式
http://www.jb51.cc/article/p-eplduxhq-bpe.html

  1. queryString = $('#editform').serializeArray();//object
  2. queryString = JSON.stringify(queryString);//string

猜你在找的Ajax相关文章