使用Jquery / AJAX

时间:2016-02-23 11:11:01

标签: javascript java jquery ajax jsp

作为我之前帖子(unable to get the passed data from servlet)的扩展,这是我原来的问题。

在常规JSP / Servlet MVC通信中,我们使用requestdispatcher将数据从servlet响应发送到下一个jsp。以下是我目前的代码。

的index.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
    <form name="form1" id="name1" method="post" action="GetData">
        <input type="text" id="name" name="name" /> <input type="text"
            id="number" name="number" /> <input type="submit" />
    </form>
</body>
</html>

Index1.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
    <input id="Name" name="Name" type="text"
        value="${userBeans[0].getName()}" />
    <input id="Number" name="Number" type="text"
        value="${userBeans[0].getNumber()}" />
</body>
</html>

的UserBean

public class UserBean {
    private String name;
    private int number;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getNumber() {
        return number;
    }

    public void setNumber(int number) {
        this.number = number;
    }
}

GetData servlet

import java.io.IOException;
import java.sql.SQLException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class GetData
 */
@WebServlet("/GetData")
public class GetData extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public GetData() {
        super();
        // TODO Auto-generated constructor stub
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        GetDataDAO getdatadao = new GetDataDAO();

        List<UserBean> userBeans = null;
        try {
            userBeans = getdatadao.list();
        } catch (ClassNotFoundException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        request.setAttribute("userBeans", userBeans);
        request.getRequestDispatcher("index1.jsp").forward(request, response);

    }

}

GetDATADAO

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;

public class GetDataDAO {

    public List<UserBean> list() throws ClassNotFoundException, SQLException {
        ArrayList<UserBean> list = new ArrayList<UserBean>();
        Connection conn = null;
        Statement stmt = null;
        ResultSet rs;
        String queryString = null;
        Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
        String userName = "sa";
        String password = "T!ger123";
        String url = "jdbc:sqlserver://home\\SQLEXPRESS;DatabaseName=TEST";
        conn = DriverManager.getConnection(url, userName, password);
        System.out.println("Connecting to database…");
        System.out.println("Oracle JDBC Driver Registered!");
        if (conn != null) {
            System.out.println("You made it, take control your database now!");
        } else {
            System.out.println("Failed to make connection!");
        }
        stmt = conn.createStatement();
        queryString = "SELECT * from UserTable";
        rs = stmt.executeQuery(queryString);

        while (rs.next()) {
            UserBean userBean = new UserBean();
            userBean.setName(rs.getString("name"));
            userBean.setNumber(rs.getInt("number"));
            list.add(userBean);
        }

        return list;
    }

}

基本上在我的程序中有两个文本框,一旦我点击提交按钮,数据库中的数据应该被拉出并显示在第二页的文本框中(index1.jsp)。

当我以这种方式完成我的程序时,一切正常。但是当我使用Jquery / AJAX时,它没有将值传递给下一页。

我已删除操作和方法,并将输入类型更改为按钮并分配了ID。以下是我更新的文件(与Jquery / AJAX一起使用)。

<form name="form1" id="name1">
        <input type="text" id="name" name="name" /> <input type="text"
            id="number" name="number" /> <input type="button" id="getCase" name="getCase"/>
<script type="text/javascript" src="indexJS.js"></script>
    </form>

我已经创建了一个JS文件,如下所示,在我的索引页面中,我添加了所需的jquery和ajax文件(网页链接)。

$('#getCase').click(function() {
    $.ajax({
        type : 'post',
        url : 'GetData',
        success : function(data) {
            alert(data);
            console.log(data);
        },
    });
});

当我运行此程序时,没有任何事情发生,但数据将打印在控制台中,整个HTML文件中包含值。

有人可以告诉我如何在下一页文本框中显示值?

由于

1 个答案:

答案 0 :(得分:0)

像这样发送Ajax请求,

$('#getCase').click(function() {

  var name = $("#name").val();
  var number = $("#number").val();
  $.ajax({
    type : 'post',
    url : 'GetData',
    data: { name: name, number: number},
    success : function(data) {
        alert(data);
        console.log(data);
    },
  });
});

在servlet中,

 protected void doGet(HttpServletRequest request, 
 HttpServletResponse response) throws ServletException, IOException {

    String userName = request.getParameter("name").trim();
    String number= request.getParameter("number").trim();

    String greetings = "Hello " + userName + "-"+ number;

    response.setContentType("text/plain");
    response.getWriter().write(greetings);
}

现在,在您的提醒中,您将获得数据。希望这会有所帮助。