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

$.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">
    <!--
    <link rel="stylesheet" type="text/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(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>
  </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(); // 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转换为map
        HashMap<String, Object> map = getMapFromQueryString(jsonString);

        //将转换得到的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对象;JSP需要解析才能使用data.key
//      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;

    }

}
  • 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\"}"
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4

下图标明:

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

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

会将参数以 "a=1"&"b=2";的形式进行编码。
如:username=yanshi02&password=123456
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4

表单数据在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);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5
  • 拿到返回的data

这里写图片描述

  • 获取json属性

这里写图片描述

  • ②若使用以下方式返回,必须解析为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对象;JSP需要解析才能使用data.key
//      System.out.println("resultJson ..."+resultJson);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 拿到返回的数据【string形式】

这里写图片描述

  • 解析为json object

这里写图片描述

  • 获取json属性

这里写图片描述


【后台接收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 {

    /**
     *  request.getParameterMap();
     */
    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();

        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]);
        }

        //拿到$("#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\"}"
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

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

  • JSP 拿到后台传回的data

这里写图片描述

  • 进行解析为JSON 对象

这里写图片描述

  • 获取JSON属性

这里写图片描述

【后台接收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(); // 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();

        String name = request.getParameter("username");
        String password = request.getParameter("password");

        String jsonString ="{\"username\":"+'"'+name+'"'+",\"password\":"+'"'+password+'"'+"}";
        //手动拼接JSON如上形式,可直接返回,此时json为string非object;如果再次使用ObjectMapper转换,JSP 将最终按其字符数组对象进行单个字符遍历!!!
        System.out.println("jsonString..."+jsonString);
        //{"username":"admin","password":"123456"}

        ObjectMapper objectMapper = new ObjectMapper();
        String resultJson = objectMapper.writeValueAsString(jsonString);
        System.out.println("resultJson ..."+resultJson);
    //"{\"username\":\"admin\",\"password\":\"123456\"}"
        response.reset();

        out.println(jsonString );
        out.flush();
        out.close();
    }

    public void init() throws ServletException {

        // Put your code here
        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
  • 1
  • 1

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

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

(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; i < map.get(key).length; i++) {
                System.out.println("key :"+key+","+i+","+map.get(key)[i]);
            }
            map2.put(key, map.get(key)[0]);
        }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

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"]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

② 使用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){});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

首先看大图

这里写图片描述

数据传输形式为:

mydata:username=yanshi02&password=123456
  • 1
  • 1

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

使用request.getParameter("mydata")

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

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


综上:

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

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

如果是以{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();
  • 1
  • 1

至于queryString取如下值(JSON形式),请看下一篇queryString为json形式 
http://blog.csdn.net/J080624/article/details/54949134

queryString = $('#editform').serializeArray();//object
queryString = JSON.stringify(queryString);//string
展开阅读全文

没有更多推荐了,返回首页