前端与后端交互 | 易学教程

设计要求：

前端的HTML页面上有文本框用于输入一个整数，点击按钮后将文本框内的数提交给后端，后端对该数进行判断是否是素数，并将结果返回给前端，前端输出结果。

前端HTML页面（index.html）：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>Powered By Leisureeen</title>
<script type="text/javascript">
    function b_req() {
        var pr = document.getElementById("priN");
        Request('IsPrime', 'post', 'priN=' + pr.value);
    }
    function Request(url, action, json) {
        var httpRequest = new XMLHttpRequest();
        httpRequest.open(action, url, true);
        httpRequest.setRequestHeader("Content-type",
                "application/x-www-form-urlencoded");
        httpRequest.send(json);
        httpRequest.onreadystatechange = function() {
            if (httpRequest.readyState == 4 && httpRequest.status == 200) {
                var json = httpRequest.responseText;
                alert(json);
            }
        };
    }
</script>
</head>
<body bgcolor="99EFFF">
    <div align="center" style="line-height:30px;">
        Please input a Integer:
        <br>
        <input type="text" id="priN" maxlength="8" value="18">
        <br>
        <input type="submit" value="IsPrime" onclick="b_req()">
        <br>
    </div>
</body>
</html>

web.xml文件：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>IsPrime</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
      <servlet-name>IsPrime</servlet-name>
      <servlet-class>controller.IsPrimeServlet</servlet-class>
  </servlet>
  <servlet-mapping>
      <servlet-name>IsPrime</servlet-name>
    <url-pattern>/IsPrime</url-pattern>
  </servlet-mapping>
</web-app>

后端收发数据Java类（IsPrimeServlet.java）：

package controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import math.Prime;

public class IsPrimeServlet extends HttpServlet{

    protected void doPost(HttpServletRequest req,HttpServletResponse resp) throws ServletException, IOException{
        String str=req.getParameter("priN");
        int n=Integer.parseInt(str);
        resp.setContentType("application/json; charset=utf-8");
        resp.getWriter().println(str+(Prime.IsPrime(n)?" is":" is not")+" a prime number.");
    }
}

后端素数判断Java类（Prime.java）：

package math;

public class Prime{

    public static boolean IsPrime(int n){
        int i=0;
        if(n<=1)
            return false;
        for(i=2;i*i<=n;i++)
            if(n%i==0)
                return false;
        return true;
    }
}

来源：https://www.cnblogs.com/leisureeen/p/12253332.html

标签

servlet

前端