AJAX學習筆記（五、AJAX+JSON與Servlet前後端互動）

前後端分離實作

前後端分離的好處就不用多說了，前後端那麼Java Web項目前後端分離是怎麼實作的呢？

1.浏覽器發送請求

2.直接到達html頁面（前端控制路由與渲染頁面，整個項目開發的權重前移）

3.html頁面負責調用服務端接口産生資料（通過ajax等等，背景傳回json格式資料，json資料格式因為簡潔高效而取代xml）

4.填充html，展現動态效果，在頁面上進行解析并操作DOM。

它的核心思想是前端html頁面通過ajax調用後端的restuful api接口并使用json資料進行互動。如果後端采用了Spring MVC架構的話，那麼隻需要·加一個@ResponseBody注解就可以傳回json對象,一個@RequestBody就可以接收前台json資料，這就是架構的好處吧，可以省很多工夫，但是現在先不用，用最基本的Servlet來接收和傳回json資料。

JQuery 對ajax的支援

JQuery也有對AJAX的支援，使得其對AJAX的操作簡化了很多,這樣就不用用原生js了。

關鍵字	簡介
$.ajax	送出AJAX請求
$.get	使用get方式送出ajax
$.post	使用post方式送出ajax
load	最簡單的調用ajax的方式
serialize	格式化form下的輸入資料

前後端互動

建一個實體類

package edu.hpu.Pojo;

public class Role {
    private String name;
    private String film;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getFilm() {
        return film;
    }
    public void setFilm(String film) {
        this.film = film;
    }
    @Override
    public String toString() {
        return "Role [name=" + name +  ", film=" + film + "]";
    }
    
}

我們的前後端資料就主要圍繞這個實體類展開了。

導入相應的包和jquery.min.js

解析json資料好像用Jackson的比較多（可以參考【3】），但這個用的不是，具體用的包直接參考【2】。

送出資料

submit.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>送出資料</title>
    <script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<form>
    <p>影視角色</p>
    姓名：<input type="text" id="name"><br>
    電影：<input type="text" id="film"><br>
    <input type="button" value="送出" id="sender">
</form>
<div id="message"></div>
<script type="text/javascript">
   $('#sender').click(function () {              //點選按鈕觸發
       var name=document.getElementById("name").value;
       var film=document.getElementById("film").value;
       var role={"name":name,"film":film};            //建立一個json對象
       var url="submitServlet";

       $.post(
           url,
           {"data":JSON.stringify(role)},
           function(data) {
               alert("送出成功，請在Tomcat控制台檢視服務端接收到的資料");
           });
   });
</script>
</body>
</html>

SubmitServlet:

package edu.hpu.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import edu.hpu.Pojo.Role;
import net.sf.json.JSONObject;

/**
 * Servlet implementation class SubmitServlet
 */

public class SubmitServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
 
    public SubmitServlet() {
        super();
        
    }


    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        doPost(request, response);
    }


    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
           String data=request.getParameter("data");        //擷取前端傳遞資料
           System.out.println("服務端接收到的資料是：" +data);
           
            JSONObject json=JSONObject.fromObject(data); 
              
            System.out.println("轉換為JSON對象之後是："+ json);
               
            Role role = (Role)JSONObject.toBean(json,Role.class); 
            System.out.println("轉換為Hero對象之後是："+role);       
    }

}

web.xml配置：

<servlet>
        <servlet-name>SubmitServlet</servlet-name>
        <servlet-class>edu.hpu.servlet.SubmitServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>SubmitServlet</servlet-name>
        <url-pattern>/submitServlet</url-pattern>
    </servlet-mapping>

跑一下，結果：

前端擷取一個對象

GetOneServlet:

package edu.hpu.servlet;

import edu.hpu.pojo.Role;
import net.sf.json.JSONObject;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;


public class GetOneServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Role role=new Role();
        role.setName("柳飄飄");
        role.setFilm("喜劇之王");
        JSONObject json= new JSONObject();
        json.put("role", JSONObject.fromObject(role));
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().print(json);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
}

<servlet>
        <servlet-name>GetOneServlet</servlet-name>
        <servlet-class>edu.hpu.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 charset="UTF-8">
<title>擷取一個對象</title>
 <script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
   影視角色：<br>
   <input type="submit"  value="通過AJAX擷取一個Role對象" id="sender">
   <div id="message"></div>
   <script type="text/javascript">
      $('#sender').click(function(){
         var url="getOneServlet";
        $.post(
                url,
                function(data) {
                   var json=JSON.parse(data);
                   var name =json.role.name;
                   var film = json.role.film;
                   $("#message").html("角色名字："+name + "<br>電影:" +film );

                });
     });
   </script>
</body>
</html>

F12可以進入調試模式，檢視前端發出的異步請求以及後端的響應：

前端擷取多個對象

GetManyServlet:

package edu.hpu.servlet;

import edu.hpu.pojo.Role;
import net.sf.json.JSONSerializer;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

@WebServlet(name = "GetManyServlet")
public class GetManyServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        List<Role> roles=new ArrayList<>();
        for (int i=0;i<10;i++){
            Role role=new Role();
            role.setName("燕雙鷹"+i);
            role.setFilm("宇宙第一豪傑、滅霸殺手"+i);
            roles.add(role);
        }
        String result= JSONSerializer.toJSON(roles).toString();  //通過通過JSONSerializer.toJSON(heros)把集合轉換為JSON字元串
        response.setContentType("text/html;charset=utf-8");         //設定編碼
        response.getWriter().print(result);                          //以流的形式傳遞給前端
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
}

配置：

<servlet>
        <servlet-name>GetManyServlet</servlet-name>
        <servlet-class>edu.hpu.servlet.GetManyServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>GetManyServlet</servlet-name>
        <url-pattern>/getManyServlet</url-pattern>
    </servlet-mapping>

getMany.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>擷取多個對象</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 roles=$.parseJSON(data);       //把傳回的資料轉換為json數組
                  for(i in roles){                   //循環json數組
                      var old = $("#messageDiv").html();
                      var role = roles[i];
                      $("#messageDiv").html(old + "<br>"+role.name+"   -----   "+role.film);
                  }
              }
          );
      });
  </script>
</body>
</html>

跑一下結果：

參考：

【1】、

https://blog.csdn.net/piantoutongyang/article/details/65446892?tdsourcetag=s_pctim_aiomsg###

【2】、

http://how2j.cn/k/jquery/jquery-ajax/474.html#step1002

【3】、

https://blog.csdn.net/qq1940879801/article/details/77854906

【4】、

http://how2j.cn/k/servlet/servlet-submit-json/1323.html#nowhere

【5】、

http://how2j.cn/k/servlet/servlet-get-one-json/1324.html#nowhere

【6】、

http://how2j.cn/k/servlet/servlet-get-many-json/1325.html

AJAX學習筆記（五、AJAX+JSON與Servlet前後端互動）

JQuery 對ajax的支援

前後端互動

建一個實體類

導入相應的包和jquery.min.js

送出資料

前端擷取一個對象

前端擷取多個對象

繼續閱讀

适用于JavaScript的ECMAScript 2020規範向前發展

GitHub連夜封殺！這份阿裡 10W 字内部 Java 字面試手冊到底有多強？

spark/scala關于【資源檔案】加載方法概述外部檔案加載方案測試資源檔案打包入jar包中小結

mybatis_入門程式Mybatis入門

JS生成uuid的四種方法

vue-cli簡介（中文翻譯）

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Ajax發送和擷取json資料到Spring mvc 1.spring mvc後端2.web前段

Effective Java 8:通用程式設計

OOM三種類型

工廠模式-三種類型

【遞歸】高效率求2的n次幂

layui多任務上傳添加進度條

win10本地scala和spark安裝安裝scala安裝spark

scala (3) Function 和 Method

JSONObject包導入異常 java.lang.NoClassDefFoundErrorweb項目的導入包的問題