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

2024-04-27 15:18:20

字體：大中小

來源：轉載

供稿：網友

上一篇【http://blog.csdn.net/J080624/article/details/54946974】的講解傳到后臺的參數形式為username=yanshi02&passWord=123456 字符串。

那么如果傳到后臺的格式是JSON呢？

queryString = $('#editform').serializeArray();//objectqueryString = JSON.stringify(queryString);//string$.post(url,{mydata:queryString},function(data){});

【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="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"); //alert(url); //queryString = $('#editform').serialize(); queryString = $('#editform').serializeArray(); queryString = JSON.stringify(queryString);//string alert(queryString); //[{"name":"username","value":"yanshi02"},{"name":"password","value":"123456"}] $.post(url,{mydata:queryString},function(data){ //$.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="postServlet3" method="post"> <input type="text" name="username" value=""/> <input type="password" name="password" value=""/> </form> <input name="post" type="button" value="提交"/> </body></html>

【后臺接收】

package com.atgui.Ajax.app.servlet;import java.io.IOException;import java.io.PrintWriter;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 PostServlet3 extends HttpServlet { /** * Destruction of the servlet. <br> */ public void destroy() { super.destroy(); // Just puts "destroy" string in log // Put your code here } /** * The doGet method of the servlet. <br> * * This method is called when a form has its tag value method equals to get. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ 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("text/html"); PrintWriter out = response.getWriter(); String jsonStr = request.getParameter("mydata"); System.out.println(jsonStr); ObjectMapper mapper = new ObjectMapper(); String resultJson = mapper.writeValueAsString(jsonStr); System.out.println("resultJson ..."+resultJson); out.print(resultJson); out.flush(); out.close(); } /** * Initialization of the servlet. <br> * * @throws ServletException if an error occurs */ public void init() throws ServletException { // Put your code here }}

result as follows ：

//獲取的參數[{"name":"username","value":"yanshi02"},{"name":"password","value":"123456"}]//轉換的JSONresultJson ..."[{/"name/":/"username/",/"value/":/"yanshi02/"},{/"name/":/"password/",/"value/":/"123456/"}]"

題外話：

① 若不進行轉換，直接返回，那么頁面拿到的data為[object object,object,object];

這里寫圖片描述