1 关于前后端分离的一些基本概念

1.1 向某个url提交数据表达的方法

  1. 通过form的action属性指定提交的url，这种提交方法会刷新页面。

  2. 通过ajax，实现某些数据提交到url，这种提交方法不会刷新整个页面。

    1.2 JSON（JavaScript Object Notation）

    JSON是一种轻量级的数据交换格式，是一种特殊格式的字符串。各个编程语言中都可以使用某些模块把JSON转化一些基础的数据类型的数据。在前后端传输的过程中只能传送字符串，因此需要一种特殊的格式来组织字符串，这种格式就是JSON。

    1.3 前后端分离

  3. 前面的做法都是前后端不分离的，实现某些特定功能的页面把html写在java代码里。

  4. 今天要学的是前后端不分离的，把某些特定功能的页面分离出来，通过JSON的数据格式在前后端之间传递数据。
  5. 要解决两点
    1. 如何从前端向后端传数据。
    2. 如何从后端向前端返回结果。

      2 从前端向后端传数据

      2.1 前端页面

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>用AJAX以JSON方式提交数据</title>
  6. <script type="text/javascript" src="jquery.min.js"></script>
  7. </head>
  8. <body>
  9.     <form>
  10.         名称：<input type="text" id="name" /><br /> 血量：<input type="text"
  11.             id="hp" /><br /> <input type="button" value="提交" id="sender">
  12.     </form>
  13.     <div id="messageDiv"></div>
  15.     <script>
  16.         /*     jquery方法为结点添加动作 */
  17.         $('#sender').click(function() {
  18.             /* jquery选择结点获得结点值 行不通，因为它只是获取页面刚刚加载完成之后的值，而不是新的值
  19.             var name=$("#name").value(); 
  20.             var hp=$("#hp").value();  */
  21.             var name = document.getElementById('name').value;
  22.             var hp = document.getElementById('hp').value;
  23.             var hero = {
  24.                 "name" : name,
  25.                 "hp" : hp
  26.             };
  27.             /* alert(name);
  28.              alert(hp); */
  29.             var url = "submitServlet";
  30.             /*调用post方法向指定URL提交表单数据，提交完成后调用回调函数 */
  31.             $.post(url,/* 目标URL */
  32.             {/* 表单数据 */
  33.                 "data" : JSON.stringify(hero)
  34.             },
  35.             function(data) { /* 回调函数 */
  36.                 alert("提交成功，请在Tomcat控制台查看服务端接收到的数据");
  37.             });
  39.         });
  40.     </script>
  41. </body>
  43. </body>
  44. </html>

2.2 后端页面

  1. public class SubmitServlet extends HttpServlet {
  2.     protected void service(HttpServletRequest request, HttpServletResponse response) 
  3.             throws ServletException, IOException {
  4.         String data =request.getParameter("data");
  6.         System.out.println("服务端接收到的数据是：" +data);
  7.         //JSON字符串解析为JSON对象
  8.         //如果参数是字符串，那么是把字符串解析为JSON字符串
  9.         JSONObject json=JSONObject.fromObject(data); 
  11.         System.out.println("转换为JSON对象之后是："+ json);
  12.         //把JSON对象映射为Hero对象
  13.         Hero hero = (Hero)JSONObject.toBean(json,Hero.class); 
  14.         System.out.println("转换为Hero对象之后是："+hero);
  15.     }  
  16. }

2.3 web.xml

  1. <!-- 从客户端获得JSON数据 -->
  2.     <servlet>
  3.         <servlet-name>SubmitServlet</servlet-name>
  4.         <servlet-class>SubmitServlet</servlet-class>
  5.     </servlet>
  7.     <servlet-mapping>
  8.         <servlet-name>SubmitServlet</servlet-name>
  9.         <url-pattern>/submitServlet</url-pattern>
  10.     </servlet-mapping>

3 从后端向前端传数据-单个对象

3.1 前端页面

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  5. <title>用AJAX以JSON方式获取数据</title> 
  6. <script type="text/javascript" src="jquery.min.js"></script> 
  7. </head> 
  8. <body> 
  9.     <input type="button" value="通过AJAX获取一个Hero对象" id="sender">  
  11.     <div id="messageDiv"></div> 
  13.     <script> 
  14.     $('#sender').click(function(){ 
  15.         var url="getoneservlet"; 
  16.         $.post(
  17.                 url,
  18.                 /* 此处的data是后端返回的response数据 */
  19.                 function(data) {
  20.                      var json=JSON.parse(data); 
  21.                      var name =json.hero.name; 
  22.                      var hp = json.hero.hp;
  23.                      $("#messageDiv").html("英雄名称："+name + "<br>英雄血量:" +hp );
  25.          });  
  26.     }); 
  27.     </script> 
  28. </body> 
  30. </body>
  31. </html>

3.2 后端页面

  1. import java.io.IOException;
  3. import javax.servlet.ServletException;
  4. import javax.servlet.http.HttpServlet;
  5. import javax.servlet.http.HttpServletRequest;
  6. import javax.servlet.http.HttpServletResponse;
  8. import net.sf.json.JSONObject;
  10. public class GetOneServlet extends HttpServlet {
  11.     protected void service(HttpServletRequest request, HttpServletResponse response) 
  12.             throws ServletException, IOException{
  13.         //获取
  14.         Hero hero = new Hero();
  15.         hero.setName("盖伦");
  16.         hero.setHp(353);
  18.         JSONObject json= new JSONObject();
  20.         json.put("hero", JSONObject.fromObject(hero));
  21.         response.setContentType("text/html;charset=utf-8"); 
  22.         response.getWriter().print(json);
  23.     }
  25. }

3.3 web.xml

  1.     <!-- 从服务端获取响应返回单个JSON对象，response内容作为参数传入AJAX -->
  2.     <servlet>
  3.         <servlet-name>GetOneServlet</servlet-name>
  4.         <servlet-class>GetOneServlet</servlet-class>
  5.     </servlet>
  7.     <servlet-mapping>
  8.         <servlet-name>GetOneServlet</servlet-name>
  9.         <url-pattern>/getoneservlet</url-pattern>
  10.     </servlet-mapping>

4 从后端向前端传数据-多个对象

4.1 前端页面

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  5. <title>用AJAX以JSON方式获取数据</title> 
  6. <script type="text/javascript" src="jquery.min.js"></script> 
  7. </head> 
  8. <body> 
  9.     <input type="button" value="通过AJAX获取多个Hero对象" id="sender">  
  11.     <div id="messageDiv"></div> 
  13.     <script> 
  14.     $('#sender').click(function(){ 
  15.         var url="getmanyservlet"; 
  16.         $.post(
  17.                 url,
  18.                 function(data) {
  19.                     /* 用jquery把JSON转化为数组 */
  20.                     var heros = $.parseJSON(data);
  21.                      for(i in heros){
  22.                          var old = $("#messageDiv").html();
  23.                          var hero = heros[i];
  24.                          $("#messageDiv").html(old + "<br>"+hero.name+"   -----   "+hero.hp); 
  25.                      }
  26.          });  
  27.     }); 
  28.     </script> 
  29. </body> 
  31. </body>
  32. </html>

4.2 后端页面

  1. import java.io.IOException;
  2. import java.util.ArrayList;
  3. import java.util.List;
  5. import javax.servlet.ServletException;
  6. import javax.servlet.http.HttpServlet;
  7. import javax.servlet.http.HttpServletRequest;
  8. import javax.servlet.http.HttpServletResponse;
  10. import net.sf.json.JSONSerializer;  
  12. public class GetManyServlet extends HttpServlet {  
  13.     protected void service(HttpServletRequest request, HttpServletResponse response)  
  14.             throws ServletException, IOException {
  15.         List<Hero> heros = new ArrayList<>();
  16.         for (int i = 0; i < 10; i++) {
  17.             Hero hero = new Hero();
  18.             hero.setName("name"+i);
  19.             hero.setHp(500+i);
  20.             heros.add(hero);
  21.         }
  23.         //List类型JSON 序列化
  24.         String result =JSONSerializer.toJSON(heros).toString();
  26.         response.setContentType("text/html;charset=utf-8");  
  27.         response.getWriter().print(result);
  28.     }  
  29.     public static void main(String[] args) {
  30.         //用来测试，看一看List在JSON序列化之后是什么
  31.         List<Hero> heros = new ArrayList<>();
  32.         for (int i = 0; i < 10; i++) {
  33.             Hero hero = new Hero();
  34.             hero.setName("name"+i);
  35.             hero.setHp(500+i);
  36.             heros.add(hero);
  37.         }
  39.         System.out.println(JSONSerializer.toJSON(heros).toString());
  40.     }
  41. }

4.3 web.xml

  1.     <!-- 从服务端获取响应返回JSON数组，response作为参数传入AJAX -->
  2.     <servlet>
  3.         <servlet-name>GetManyServlet</servlet-name>
  4.         <servlet-class>GetManyServlet</servlet-class>
  5.     </servlet>
  7.     <servlet-mapping>
  8.         <servlet-name>GetManyServlet</servlet-name>
  9.         <url-pattern>/getmanyservlet</url-pattern>
  10.     </servlet-mapping>

5 更多

更多的内容会在下学期Servlet、Ajax课程上学到