使用 jquery 和 ajax 显示来自 mysql 的数据

Posted 2023-02-24

【中文标题】使用 jquery 和 ajax 显示来自 mysql 的数据

【英文标题】：Display data from mysql using jquery and ajax

【发布时间】：2014-12-15 04:43:13

【问题描述】：

我是一个初学者，我正在尝试制作一个简单的应用程序来使用 javascript 和 jquery、json 对象显示来自 mysql 的表。这没有给我任何错误，但我不知道如何继续。请提供您的反馈！

这是我的书.java

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;

public class Books 
    private int id;
    private String title;
    private String author;
    private float price;
    private int qty;
    public int getId() 
        return id;
    
    public void setId(int id) 
        this.id = id;
    
    public String getTitle() 
        return title;
    
    public void setTitle(String title) 
        this.title = title;
    
    public String getAuthor() 
        return author;
    
    public void setAuthor(String author) 
        this.author = author;
    
    public float getPrice() 
        return price;
    
    public void setPrice(float price) 
        this.price = price;
    
    public int getQty() 
        return qty;
    
    public void setQty(int qty) 
        this.qty = qty;
    
    public Books(int id, String title, String author, float price, int qty) 
        super();
        this.id = id;
        this.title = title;
        this.author = author;
        this.price = price;
        this.qty = qty;
    

    public Books() 

    
    public ArrayList <Books> getBooks(ArrayList<Books>  bookList)

        Connection conn =null;
        ResultSet rset = null;

        try 
            Class.forName("com.mysql.jdbc.Driver");
            conn = DriverManager.getConnection(
                    "jdbc:mysql://localhost:3306/ebookshop", "root", "root");
            PreparedStatement pst = (PreparedStatement) conn
                    .prepareStatement("SELECT * from books");
            rset = pst.executeQuery();

            while (rset.next())
                Books books = new Books();
                books.setId(rset.getInt("id"));
                books.setAuthor(rset.getString("author"));
                books.setTitle(rset.getString("title"));
                books.setPrice(rset.getFloat("price"));
                books.setQty(rset.getInt("qty"));
                bookList.add(books);

            
         catch (SQLException e) 
            System.out.println("Could not connect to DB" + e);
         catch (ClassNotFoundException classexpt)
            System.out.println("Couldn't find the class" + classexpt);
        

        return bookList;

    

Servlet 文件：

        import java.io.IOException;
        import java.util.ArrayList;

        import javax.servlet.RequestDispatcher;
        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 BooksServlet
         */
        @WebServlet("/BooksServlet")
        public class BooksServlet extends HttpServlet 
            private static final long serialVersionUID = 1L;

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

            /**
             * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
             */
            protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 

response.setContentType("application/json");
                Books books = new Books();
                ArrayList <Books> bookList = new ArrayList <Books>();
                bookList = books.getBooks(bookList);
                request.setAttribute("bookList", bookList);

    JSONObject obj=new JSONObject();
            JSONArray arr = new JSONArray();
            for(int i = 0 ; i< bookList.size() ; i++)
            
                Books b = bookList.get(i);

                obj.put("id", b.getId());
                obj.put("title", b.getTitle());
                obj.put("author", b.getAuthor());
                obj.put("price", b.getPrice());
                obj.put("qty", b.getQty());

                arr.add(obj.toString());

                obj = new JSONObject();
            

                String address = "DisplayBook.jsp";
                RequestDispatcher dispatcher =
                        request.getRequestDispatcher(address);
                      dispatcher.forward(request, response);
            

            /**
             * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
             */
            protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
                // TODO Auto-generated method stub
            

        

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>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
    function showBook()
        $.ajax(
            type:"GET",
            url:"BooksServlet.java",
            dataType: "json",
            data: JSON.stringify( bookList: bookdata ),
            success:function(data)
                $("#content").html(data);
            
        );
    
    showBook();
);
</script>

<h3 align="center">Manage Book Details</h3>
<table border="1" align="center">
   <tr>
       <td> <input type="button" id="display" value="Display All Data" /> </td>
   </tr>
</table>
<div id="content" align="center"></div>
<table>
    <tr>
        <td>id</td>
    </tr>
</table>

</body>
</html>

JSp 文件是我迷路的地方。我想我正在发送列表中的数据，但没有收到它。还是我在 servlet 中发送错误的数据？ 任何帮助将不胜感激！

【参考方案1】：

BooksServlet.java 不应该在您的 jquery url 中，而是一个返回 JSON 的 servlet。我不明白你想用你的 jquery 代码做什么。现在它似乎准备好接收 HTML，而不是 JSON。

我建议您使用 firebug 或类似的插件进入网络并分析您正在创建的请求/响应。 我会使用DataTables 在前端处理JSON 我会为后端部分示例“Struts 2 结果类型JSON”使用 JSON 解析器。

【讨论】：

我添加了 response.setContentType("application/JSON")，这样好还是我如何让它接收 JSON？

将 contentType 更改为 JSON 不会自动将您的内容更改为 JSON。首先熟悉 Ajax 和 HTML，然后从 JSON 开始。

【参考方案2】：

尝试访问 [server]/[context]/BooksServlet，例如 localhost:8080/myappp/BookServlet，因为 /BookServlet 是 servlet 中的映射 URL。

看到这个@WebServlet annotation with Tomcat 7和http://www.codejava.net/java-ee/servlet/webservlet-annotation-examples

顺便说一句，我还是不明白，你的 Ajax URL 转到 /BookServlet 并返回 json，但那个 servlet 不返回 json 数据。