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('提交失败')
				}
	       	}
       	)