JQuery的Post方式和Java进行交互

最新推荐文章于 2023-10-16 11:03:39 发布

Xie-CLEXMA

最新推荐文章于 2023-10-16 11:03:39 发布

阅读量450

点赞数

分类专栏： Java-Web 文章标签： post ajax Java-Web 前端

本文链接：https://blog.csdn.net/qq1024407215/article/details/58111736

版权

Java-Web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

开发环境：Eclipse Java EE + Tomcat 7.0

代码部分

主要的代码包括 myClass.java index.html 和 web.xml三个部分

myClass.java的代码：

package myWeb;
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class myClass extends HttpServlet{
    private String message;
    //Servlet 初始化时调用init()方法，并进行相关的操作
    public void init() throws ServletException
    {

    }
    //doPost 和 doGet, servlet会检查不同的请求，并根据传输的方式执行 doPost 还是 doGet
    //此处只需要些doPost
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        //用getParameter()方法来取得传来的数据
        message = request.getParameter("value");
        PrintWriter out = response.getWriter();
        out.print("Your input is "+ message);
        out.flush();
        out.close();
    }

    public void destroy()
    {

    }

}

index.html 代码：

包含html, js部分

<!DOCTYPE html>
<html>
    <head >
        <meta charset="utf-8">
        <title>Test</title>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/jquery-3.1.1.min.js"></script>
        <script src="js/angular.min.js"></script>
        <link rel="stylesheet" href="css/bootstrap.min.css">
    </head>
    <body>

        <div class="container" id="showbox">HERE IS SOME TEXT</div>
        <input class="input-sm center" id="input" />
        <button class="btn btn-defualt" id="click">CLICK ME TO CHANGE</button>
        <script>
        "use strict";

            $(function(){
            $("#click").click(function(){
                //$("#showbox").text($("#input").val());
                $.post("myClass",
                {"value":$("#input").val()},//传入数据为json对象
                function(data,textStatus){
                    $("#showbox").text(data);//显示返回的数据
                }
                );

            })

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

web.xml

在自动创建的 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>myWeb</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>myClass</servlet-name>
      <servlet-class>myWeb.myClass</servlet-class>
  </servlet>
  <servlet-mapping>
      <servlet-name>myClass</servlet-name>
      <url-pattern>/myClass</url-pattern>
  </servlet-mapping>


</web-app>