JQuery的Post方式和Java进行交互

开发环境:Eclipse Java EE + Tomcat 7.0

相关设置

在 Eclipse 里创建一个新的动态 Web 应用

一直点击next到下面这个页面JQuery的Post方式和Java进行交互_第1张图片

勾选 Generate web.xml 选项,Eclipse会自动帮你在项目内创建 web.xml
在项目的src文件夹下添加一个类,
JQuery的Post方式和Java进行交互_第2张图片
将tomcat安装目录lib下的servlet-api.jar复制到项目中的WEB-INF文件夹的lib中,并将其添加到项目中。
将静态页面复制到WebContent文件夹中
最后整个项目的框架是这样的:JQuery的Post方式和Java进行交互_第3张图片

代码部分

主要的代码包括 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部分


<html>
    <head >
        <meta charset="utf-8">
        <title>Testtitle>
        <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 TEXTdiv>
        <input class="input-sm center" id="input" />
        <button class="btn btn-defualt" id="click">CLICK ME TO CHANGEbutton>
        <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 下添加代码如下:


<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>myWebdisplay-name>
  <welcome-file-list>
    <welcome-file>index.htmlwelcome-file>
    <welcome-file>index.htmwelcome-file>
    <welcome-file>index.jspwelcome-file>
    <welcome-file>default.htmlwelcome-file>
    <welcome-file>default.htmwelcome-file>
    <welcome-file>default.jspwelcome-file>
  welcome-file-list>


  <servlet>
      <servlet-name>myClassservlet-name>
      <servlet-class>myWeb.myClassservlet-class>
  servlet>
  <servlet-mapping>
      <servlet-name>myClassservlet-name>
      <url-pattern>/myClassurl-pattern>
  servlet-mapping>


web-app>

以下内容摘自 http://blog.csdn.net/guihaijinfen/article/details/8363839

servlet元素的两个主要子元素servlet-name和servlet-class用来定义servlet所对应的class

servlet的名称
定义servlet的名称
servlet的类名称
定义servlet的类名称

servlet-mapping元素包含两个子元素servlet-name和url-pattern.用来定义servlet所对应URL.
Servlet的名称
定义Servlet的名称.
Servlet URL
定义Servlet所对应的RUL.例如:/Servlet/*

运行

运行 index.html 显示如下界面,在input中输入相关内容会post给服务器,经过myClass.class 后会返回输入的内容,结果如下图:
这里写图片描述

你可能感兴趣的:(Java-Web)