web中用ajax傳遞json資料到後臺
阿新 • • 發佈：2019-01-04
個人筆記，不喜歡勿評論
今天學習了一下如何使用ajax傳遞json資料到後臺
1、首先需要匯入幾個json的jar包；
2、開始寫程式碼
前端程式碼：
<%@ 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 'index.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="index.js"></script> <script type="text/javascript" src="jquery-2.1.4.js"></script> <script type="text/javascript"> function add() { /** 當給個錯誤的url的時候，就會走到error方法裡面， 該ajax請求會返回一個status code碼，當返回值為200時，表示成功，執行success方法，否則執行error方法； */ /* $.ajax({ cache: true, type: "POST", url:"/Ajax/TestServlet", data:$('#form1').serialize(),// 你的formid async: false, error: function(request) { alert("提交失敗"); }, success: function(data) { /* $("#commonLayout_appcreshi").parent().html(data);*/ /* alert(data); $("#div1").text(data); } }); */ /** 採用json的方式進行資料傳遞 */ var jsonvalue = { "name" : "丫丫", "id" : 1, "password" : 123456 }; var jsonshuzu = { "name" : [ { "age" : 25, "height" : 160, "weight" : 100, "email" : "1946898935" }, { "age" : 26, "height" : 178, "weight" : 140, "email" : "1234567" } ], "address" : [ { "addressname" : "福州市" }, { "addressname" : "廈門市" } ] }; alert("走到了add方法裡面"); /** dataType : "json":的意思是從後臺返回的值必須為json格式，否則將執行error方法 */ $.ajax({ cache : true, type : "post", url : "/Ajax/TestServlet", data : { "ss" : JSON.stringify(jsonshuzu) }, async: false, error : function(request) { alert("提交失敗"); }, success : function(data) { alert("data:" + data); $("#div1").text(data); } }); } </script> </head> <body> <form id="form1"> <!-- 使用者名稱：<input type="text" id="input1" name="username" id="yonghu"></input><br /> 密碼：<input type="password" name="password" id="mima"></input><br /> --> <input type="button" name="提交" value="提交" onclick="add()"></input> <div id="div1"></div> </form> </body> </html>
後臺接受的程式碼：
response.setContentType("text/html"); response.setCharacterEncoding("utf-8"); System.out.println("到了dopost方法中----------------------------"); PrintWriter out = response.getWriter(); /** * 採用request.getParameter("username");獲取從頁面傳來的值時，括號中的引數為頁面中name的值 */ /*String username=request.getParameter("username"); String passwrd=request.getParameter("password"); System.out.println(username+"/"+passwrd); out.print(username+"/"+passwrd);*/ /** * 接受從前端傳遞過來的json資料,要注意引入解析json的包 */ String name=request.getParameter("ss"); JSONObject json=JSONObject.fromObject(name); Iterator iter = json.keySet().iterator(); Map<String,String> map = new HashMap<String,String>(); /** * 解析來自前端頁面的值，解析json陣列 */ while (iter.hasNext()) { String key = (String) iter.next(); String value = json.getString(key); System.out.println("key:"+key+",value:"+value); map.put(key, value); } String value=map.get("name"); JSONArray jsonArray =JSONArray.fromObject(value); System.out.println("長度為："+jsonArray.size()); for (int i = 0; i <jsonArray.size(); i++) { int age=(Integer) jsonArray.getJSONObject(i).get("age"); int height= (Integer) jsonArray.getJSONObject(i).get("height"); int weight= (Integer) jsonArray.getJSONObject(i).get("weight"); String email=(String) jsonArray.getJSONObject(i).get("email"); System.out.println("獲取到的值為："+age+","+height+","+weight+","+email); } String values=map.get("address"); JSONArray jsonArray2=JSONArray.fromObject(values); for (int i = 0; i <jsonArray2.size(); i++) { String city=(String) jsonArray2.getJSONObject(i).get("addressname"); System.out.println("獲取到的城市名為："+city); } /** * 前端頁面設定了dataType為json格式，則後臺返回時返回的格式必須為json格式 */ out.print("提交成功"); out.flush(); out.close();
注意事項：
1、前端需注意的是①json資料的寫法②ajax傳遞時，若定義datatype:"json",則表示後臺返回的值必須為json格式才可以
2、後臺需注意json陣列的解析方式