javaWeb的前後端交互（一）： servlet與js

本文中，後臺使用jetty的servlet類，前臺使用JS，演示servlet和JS之間的數據交互。

後臺

我後臺使用的jetty的servlet，純servlet沒試過。使用jetty在桌面端程序內創建服務，使其能夠接收web請求。

jetty創建web服務

依賴

下面是需要使用到的依賴，前兩個依賴是jetty需要用到的。當需要接收參數的類型是字符串時，只需要這些即可。如果接收參數的類型是對象時，則需要使用fastJson。本地使用fastJson接收數據，也可以換成其他的JSON工具類。

   <!-- jetty -->
    <dependency>
      <groupId>org.eclipse.jetty</groupId>
      <artifactId>jetty-webapp</artifactId>
      <version>9.3.7.v20160115</version>
    </dependency>
    <dependency>
      <groupId>org.eclipse.jetty</groupId>
      <artifactId>jetty-servlet</artifactId>
      <version>9.3.7.v20160115</version>
    </dependency>

    <!-- fastJson-->
    <!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.47</version>
    </dependency>

接收請求

創建一個handler來接收請求。該類繼承jetty的AbstractHandler類。

public class JettyController extends AbstractHandler {
    @Override
    public void handle(String target, Request baseRequest, HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
        
        String queryString = request.getQueryString();
       
        response.setContentType("text/html; charset=utf-8");
        request.setCharacterEncoding("utf-8");
        response.setStatus(HttpServletResponse.SC_OK);
        // 解決跨域問題
        response.setHeader("Access-Control-Allow-Origin", "*");
        baseRequest.setHandled(true);
        PrintWriter out = response.getWriter();
        if(target.equals("/favicon.ico")) {
            System.out.println("1");
            out.println("404");
        } else if (target.equals("/testGet")){
            // 這裏接收一個對象類型的參數，先接受一個字符串（該字符串在前臺由JSON轉化）。如果參數類型爲純字符串，只要下面的第一行即可接收。
            String data = request.getParameter("data");
            Action action = JSON.parseObject(data, Action.class);
           	// 返回一個succeed字符串給前臺。
            out.print("succeed");
        } else if (target.equals("/test")) {
            System.out.println("2");
            // 可以在括號內添加html字符串，實現直接返回前端界面的結果，此時在瀏覽器中輸入http://.../test便可以顯示內容
            out.print();
        }
    }
}

使用FASTJSON需要有一個相應的接收類。在上例中，使用一個Action對象接收，該對象的方法如下。

import java.util.Arrays;

public class Action {
    public String actionId;

    public String actionName;

    public String anotherName;

    public String urlTemplate;

    public String[] params;

	// get和set方法省略

    public Action(String actionId, String actionName, String anotherName, String urlTemplate, String[] params) {
        this.actionId = actionId;
        this.actionName = actionName;
        this.anotherName = anotherName;
        this.urlTemplate = urlTemplate;
        this.params = params;
    }

    @Override
    public String toString() {
        return "Action{" +
                "actionId='" + actionId + '\'' +
                ", actionName='" + actionName + '\'' +
                ", anotherName='" + anotherName + '\'' +
                ", urlTemplate='" + urlTemplate + '\'' +
                ", params=" + Arrays.toString(params) +
                '}';
    }
}

選擇一個端口，來啓動該服務。

public class JettyServer {
    public static void main(String[] args) throws Exception {
    	// 使用端口8084啓動服務。該服務就是上文中創建的handler。之後使用localhost:8084便可以啓動服務。
    	// 例如： http:://localhost:8084/test 便可以得到具體的結果。
        Server server = new Server(8084);
        server.setHandler(new JettyController());
        server.start();
        server.join();
    }
}

前端部分

	// 使用JQ的 $.post方法發送post請求。下文中的三個參數分別是對應的後臺地址，參數和回調方法。
        $.post(
	        "http://localhost:8084/testGet",
	        {
	           // 使用JSON.stringify方法將JS對象轉化爲字符串
	        	data: JSON.stringify(this.actions[this.selectedIndex])
	        },
	      	function (data) {
	      		// 根據後臺的反饋結果，進行相應的顯示。在上文中，out.print()返回的結果時succeed，所以這裏的判斷依據也是該字符串。
				if (data == "succeed") {
					alert('提交成功')
				} else {
					alert('提交失敗')
				}
	       	}
       	)