接着在https://www.cnblogs.com/dong973711/p/10907733.html的基礎上做驗證。
從前端提交數據
前端頁面，submit.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>用AJAX以JSON方式提交數據</title> <script type="text/javascript" src="jquery.min.js"></script> </head> <body> <form > 名稱：<input type="text" id="name"/><br/> 血量：<input type="text" id="hp"/><br/> 傷害： <input type="text" name="damage" id="damage"> <br> <input type="button" value="提交" id="sender"> </form> <script> $('#sender').click(function(){ var name=document.getElementById('name').value; //從輸入端獲取 值 var hp=document.getElementById('hp').value; var hero={"name":name,"hp":hp}; //把獲取的值格式化 var url="submitServlet"; //以post方式提交ajax $.post( url, {"data":JSON.stringify(hero)}, //提交的數據是把上面的hero轉化為json格式 function(data) { alert("提交成功，請在Tomcat控制台查看服務端接收到的數據"); }); }); </script> </body> </body> </html>
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify（ JSON.stringify() 詳解）
配置web.xml
<servlet> <servlet-name>SubmitServlet</servlet-name> <servlet-class>servlet.SubmitServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>SubmitServlet</servlet-name> <url-pattern>/submitServlet</url-pattern> </servlet-mapping>
SubmitServlet.java
package servlet; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import entity.Hero; import net.sf.json.JSONObject; public class SubmitServlet extends HttpServlet { protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String data =request.getParameter("data"); //獲取通過ajax提交的數據data System.out.println("服務端接收到的數據是：" +data); //輸出數據data JSONObject json=JSONObject.fromObject(data); //將其轉化為json對象 System.out.println("轉換為JSON對象之后是："+ json); Hero hero = (Hero)JSONObject.toBean(json,Hero.class); 將其轉化為一個Hero對象 System.out.println("轉換為Hero對象之后是："+hero); } }
截圖：
雙線部分是我提交后的數據，上面獲取null的是直接訪問SubmitServlet的，並沒有從前端獲取數據，所以都為null
還有就是最后一行damage(傷害為0)，原因是我前端JavaScript獲取輸入數據時沒有獲取damage的數據，所以傳過來后也沒又數據，而轉化為hero對象后，因為沒有damage所以它默認為0
獲取一個對象傳到前端
GetOneServlet.java
package servlet; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import entity.Hero; import net.sf.json.JSONObject; public class GetOneServlet extends HttpServlet{ protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { Hero hero = new Hero(); //創建一個Hero對象 hero.setName("孫大聖"); hero.setHp(353); hero.setDamage(88); JSONObject json= new JSONObject(); json.put("hero", JSONObject.fromObject(hero)); //轉化成json對象 response.setContentType("text/html;charset=utf-8"); //設置頁面的ContentType為text/html; 字符集為utf-8 response.getWriter().print(json); //將得到的數據返回到前端 } }
web.xml
<servlet> <servlet-name>GetOneServlet</servlet-name> <servlet-class>servlet.GetOneServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>GetOneServlet</servlet-name> <url-pattern>/getOneServlet</url-pattern> </servlet-mapping>
getOne.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>用AJAX以JSON方式獲取數據</title> <script type="text/javascript" src="jquery.min.js"></script> </head> <body> <input type="button" value="通過AJAX獲取一個Hero對象" id="sender"> <div id="messageDiv"></div> <script> $('#sender').click(function(){ var url="getOneServlet"; $.post( url, function(data) { var json=JSON.parse(data); //將獲得的Json對象轉換為 JavaScript 對象 var name =json.hero.name; var hp = json.hero.hp; var damage = json.hero.damage; $("#messageDiv").html("英雄名稱："+name + "<br>英雄血量:" +hp+ "<br>攻擊力:" +damage ); }); }); </script> </body> </body> </html>
JSON 通常用於與服務端交換數據。
在接收服務器數據時一般是字符串。
我們可以使用 JSON.parse() 方法將數據轉換為 JavaScript 對象。
通過ajax獲取一個data數據，然后展示出來
獲取多個對象
GetManyServlet.java
package servlet; import java.io.IOException; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import entity.Hero; import net.sf.json.JSONSerializer; public class GetManyServlet extends HttpServlet { protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { List<Hero> heros = new ArrayList<>(); //heros鏈表，盛放多個Hero對象 for (int i = 0; i < 10; i++) { Hero hero = new Hero(); hero.setName("name"+i); hero.setHp(500+i); heros.add(hero); } String result =JSONSerializer.toJSON(heros).toString(); //將鏈表內容轉化為符合json串的格式 response.setContentType("text/html;charset=utf-8"); response.getWriter().print(result); } }
web.xml
<servlet>
<servlet-name>GetManyServlet</servlet-name>
<servlet-class>servlet.GetManyServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>GetManyServlet</servlet-name>
<url-pattern>/getManyServlet</url-pattern>
</servlet-mapping>
getMany.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>用AJAX以JSON方式獲取數據</title> <script type="text/javascript" src="jquery.min.js"></script> </head> <body> <input type="button" value="通過AJAX獲取多個Hero對象" id="sender"> <div id="messageDiv"></div> <script> $('#sender').click(function(){ var url="getManyServlet"; $.post( url, function(data) { var heros = $.parseJSON(data); //將符合標准格式的的JSON字符串轉為與之對應的JavaScript對象。 for(i in heros){ var old = $("#messageDiv").html(); var hero = heros[i]; $("#messageDiv").html(old + "<br>"+hero.name+" ----- "+hero.hp); } }); }); </script> </body> </body> </html>
小結：
上面的三個前后端數據交互基本就是把數據轉化為json格式的字符串或json對象進行傳輸。
還需要去總結的json格式的字符串與json對象之間的轉化，和分析在恰當時候用恰當的格式，及其轉換方法。
還要會用jquery的ajax請求。
上例都是以post方式提交ajax請求