AJAX - $.post(url,data,function,type)-(参数为value-type-stri
参数讲解: url:必需。请求地址 data:可选。需要传递到服务器端的参数。 参数形式为“键/值”。 function:可选。发送请求成功后的回调函数,在请求完成时被调用。该函数参数依次为响应体和状态。(只有当Response的返回状态是success才是调用该方法) type:可选。返回数据的类型。可以是:string或json、xml等类型。 【jsp页面】 |—————————————————— <%@ 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"); //这里需注意,不是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>
</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>
【后台接收servlet1】 思路: 通过 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,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;
}
}
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域; 【特别提醒】
//将转换得到的map转换为json并返回
ObjectMapper objectMapper = new ObjectMapper();
String resultJson = objectMapper.writeValueAsString(map);
//此处直接返回JSON object对象,JSP可直接使用data.key
System.out.println("resultJson ..."+resultJson);
//将转换得到的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);
【后台接收servlet2】 思路: 通过 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,response);
}
public void doPost(HttpServletRequest request,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().......");
}
}
result as follows: postServlet2 init().......
key :username,admin
key :password,123456
resultJson1: {"username":"admin","password":"123456"}"
【这里讲述一下手动拼接后JSP解析过程,如果没有手动拼接,那么为上述特别提醒中第二种方式】
【后台接收Servlet3】 思路: 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,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().......");
}
}
此时String jsonString 返回的 json type 为string ,需要进行解析为object 才能使用 data.key 获取json属性。。。过程参考上面。 一定要分清,虽然JS里面一切皆为对象,但是 typeof :string 与 typeof :object 不是一回事!!! 但是如果你使用 instance of object,那么 string 或者object 都会返回true! 点击查看JS中对象的前生今世 题外话1:
一部分参数在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里面。 其中,接收方法思路有三种。 ① 使用 getParameterMap 会把键值对参数,解析为对应map 的key:value ! 修改部分代码: Map<String,map.get(key)[0]);
}
result as follows : postServlet2 init().......
key :querystring,username=yanshi02
key :username,yanshi02
key :password,123456
key :password,1,123456
resultJson ...{"username":"yanshi02","querystring":"username=yanshi02","password":"123456"}
//可见 key为password的数组:"password":["123456","123456"]
② 使用 只能获取 Form Data,不能获取Query String Data。 同理,该方法不适用 $.get() 。 ③ 使用 只能获取Query String Data,不能获取Form Data 。 题外话2 如果请求形式为:
queryString = $('#editform').serialize();
$.post(url,{mydata:queryString},function(data){});
首先看大图: 数据传输形式为: mydata:username=yanshi02&password=123456
那么除了上述前两种思路外。 使用 String jsonStr = request.getParameter("mydata");
System.out.println(jsonStr);
只要获得拼接的string,就可以返回json! 综上: 默认ContentType下,数据会以 Content-Type:application/x-www-form-urlencoded; charset=UTF-8
如果是以{key : value} 形式传输的,有三种接收思路: 如 ① 使用 如果是以 value形式传输的,则可以使用前两种思路。 如 注意 :此时的queryString取值! queryString = $('#editform').serialize();
至于queryString取如下值(JSON形式),请看下一篇queryString为json形式 queryString = $('#editform').serializeArray();//object
queryString = JSON.stringify(queryString);//string (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |