初学网站制作，jquery中ajax的使用-优快云博客

本文链接：https://blog.youkuaiyun.com/open_curry/article/details/52119201

本文介绍了一个使用Java和jQuery实现的学生信息查询系统。该系统通过前端页面接收查询条件，并利用Ajax异步请求后端Servlet来获取并展示学生信息。后端通过数据库操作返回JSON格式的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%--
  Created by IntelliJ IDEA.
  User: ZDR
  Date: 2016/8/1
  Time: 10:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>学生信息查询</title>
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript"></script>
    <script>
        $(document).ready(function(){
            $("#search").click(function(){
                $.ajax({
                    type: "POST",
                    url: "StuServlet",
                    data: {//发送的数据部分
                        id: $("#staffId").val(),
                        name: $("#staffname").val(),
                        birthday: $("#staffbirthday").val(),
                        sex: $("#staffsex").val(),
                        address: $("#staffaddress").val(),
                        teacher: $("#staffteacher").val()
                    },
                    dataType: "json",
                    success: function(data){
                        //if (data.success) {
                        if (true) {
                            //$("#searchResult").html(data[0].id);
                            $('#searchResult tr').empty();//删除之前的数据
                            var s = '';
                            for (var i = 0; i < data.length; i++) s += '<tr><td>' + data[i].name + '</td><td>' + data[i].id + '</td><td>' + data[i].birthday + '</td>'
                                    + '<td>' + data[i].sex + '</td><td>' + data[i].address +  '</td><td>' + data[i].teacher +  '</td></tr>';
                            $('#searchResult').append(s);

                        } else {
                            $("#searchResult").html("出现错误：" + data.msg);
                        }
                    },
                    error: function(jqXHR){
                        alert("发生错误：" + jqXHR.status);
                    },
                });
            });
        });
    </script>
</head>
<body>

id&nbsp&nbsp&nbsp&nbsp
<input type="text" id="staffId"><br>
name&nbsp&nbsp&nbsp
<input type="text" id="staffname"><br>
birt&nbsp&nbsp&nbsp
<input type="text" id="staffbirthday"><br>
sex &nbsp&nbsp&nbsp
<select id="staffsex">
    <option></option>
    <option>female</option>
    <option>male</option>
</select><br>
addr&nbsp&nbsp&nbsp
<input type="text" id="staffaddress"><br>
lead&nbsp&nbsp&nbsp
<input type="text" id="staffteacher">
<br>
<button id="search">查询</button>
<br>
<table id="searchResult" border="1" cellpadding="20" cellspacing="0"></table>
</body>

</html>

网站前端代码

package com.hundsun.zdr;

import com.google.gson.Gson;


import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;


/**
 * Created by ZDR on 2016/8/3.
 */
public class StuServlet extends HttpServlet {
    private String message;
    public  List<Stu>  AL = new ArrayList<Stu>();

    public void init() throws ServletException {

        //System.out.println("I AM WORKING in init");
        message = "Hello world, this message is from servlet!";
    }

    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置响应内容类型
        resp.setContentType("text/html");
        resp.setCharacterEncoding("UTF-8");
        resp.setCharacterEncoding("utf-8");
        //设置逻辑实现

        String name = null;
        String id = null;
        String birthday = null;
        String sex = null;
        String address = null;
        String teacher = null;
        name = req.getParameter("name");
        id = req.getParameter("id");
        birthday = req.getParameter("birthday");
        sex = req.getParameter("sex");
        address = req.getParameter("address");
        teacher = req.getParameter("teacher");

        System.out.println(id);
        System.out.println(name);
        System.out.println(birthday);
        System.out.println(sex);
        System.out.println(address);
        System.out.println(teacher);


        DB myDB = new DB();
        AL = myDB.check(id,name,birthday,sex,address,teacher);
        System.out.println((new Gson()).toJson(AL));
        //向界面发送查询结果数据
        resp.getWriter().write((new Gson()).toJson(AL));
        //System.out.println("{\"success\":true,\"msg\":\"学生信息\"}");
        //String data=new String("{\"success\":true,\"msg\":\"学生信息\"}");
        //String data2="{\"msg\":\"aaaaaaaaaaaaa\"}";
        //resp.getWriter().write(data);

        //跳转回原界面
        //req.getRequestDispatcher("index.jsp").forward(req, resp);
    }

    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }


    public void destroy() {
        super.destroy();
    }
}
后端代码