利用Ajax获取并显示学生列表

怎么创建一个网页students.jsp?怎么在students.jsp中,使用jQeury,以Ajax技术,从后台请求学生列表,再将学生列表显示在网页中?

你能问这样的问题说明你是一个 java的初学者,我可以告诉你思路,但是还是建议你系统的学习一下 Java Web,以及要用到的前端知识,比如Ajax请求,和你说的JQuery,Ajax可以直接学JQuery的,比较简单,代码也比较少,原生的代码多,初学者理解起来也比较麻烦。

  • students.jsp页面

    <%@ page language="java" contentType="text/html; charset=UTF-8"
      pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>学生列表</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    $(function() {
    $.ajax({
      url: "studentServlet", // 后台Servlet的URL
      type: "GET",   // 请求类型
      success: function(result) { // 请求成功的回调函数
        $("#list").html(result);  // 将结果添加到id为list的元素中
      }
    });  
    });  
    </script>
    </head>
    <body>
    <div id="list"></div>
    </body>
    </html>
    
  • 服务器端编写 studentServlet,查询学生列表,构造HTML返回给前端

public class StudentServlet extends HttpServlet {
  public void doGet(HttpServletRequest request, HttpServletResponse response)  
                  throws ServletException, IOException {
    // 查询学生列表
    List<Student> list = StudentDao.selectAll();
    
    // 构造HTML
    StringBuilder html = new StringBuilder();
    html.append("<table>");
    for(Student student : list) {
      html.append("<tr>");
      html.append("<td>" + student.getName() + "</td>");
      // 其他学生信息td...
      html.append("</tr>");
    }  
    html.append("</table>");
    
    // 返回HTML
    response.setContentType("text/html;charset=UTF-8");  
    response.getWriter().write(html.toString());
  }
}  

这是一个简单的demo,你可以借鉴理解一下,但是我还是好心提醒你最好还是系统的学一下,这些都是编程的基础,跳不过去的。

望采纳!

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/650804
  • 你也可以参考下这篇文章:$.ajax的写法,jq与ajax实现异步刷新,实例:对搜索框进行模糊查询,并且将查询结果显示在jsp页面上
  • 除此之外, 这篇博客: Ajax实现的注册异步显示中的 jq2.jsp 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-1.8.3.js" ></script>
    
    <script type="text/javascript">
    //文档加载完执行
    
     
     $(function(){
    	 $("#xxx").blur(function(){	//失去焦点时
    		
    		 var value=$("#xxx").val();
    			$.ajax({
    				 url:"jquerytest/JQuerySevlet",//要请求服务器的url
    				 data:{val:value},//这是一个对象,表示请求的参数,服务器可以通过getparement获取
    				 async:true,//是否异步请求
    				 cache:false,//是否缓存
    				 type:"POST",//请求方式
    				 dataType:"json",//服务器返回类型
    				 success:function(result){		//服务器返回什么类型这里就是什么类型
    					/* if(result)
    					 	$("label").text("好人");
    					else
    						$("label").text("坏人"); */
    				 
    				 		$("label").text(result.name+","+result.age);
    				 }
    			});
    	 });
    	
     });
    
    </script>
    
    
    </head>
    <body>
    用户名:<input type="text" name="name" id="xxx"/><label></label><br>
    年	龄:<input type="text" name="age" value="qwes"><br>
    
    </body>
    </html>
    
    • <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-1.8.3.js" ></script>
    • 这句代码就是导入我们的包,引入我们需要用的东西
    • 然后关于ajax的7个参数,我都有注释讲解,同时我们需要知道这个是在文本框失去焦点的时候才调用
    • 然后这里的返回类型很重要,例如你用json类型和String类型就是两回事了,例如“true”,json就会解析成布尔值,String就会解析成字符串,这里需要注意没不然很容易出错,常用类型就是xml、json
  • 以下回答来自chatgpt:

    针对优化后的问题:

    首先需要在后台编写一个获取学生列表信息的接口,并返回JSON数据格式的学生列表。假设这个接口的URL为/students/list。

    接下来可以在students.jsp中通过jQuery的Ajax技术从后台请求学生列表,并将学生列表显示在网页中。

    代码如下:

    $(function() {
      $.ajax({
        url: '/students/list',
        type: 'GET',
        dataType: 'json',
        success: function(data) {
          // 清空学生列表
          $('#students').empty();
          // 遍历学生列表
          data.forEach(function(student) {
            // 创建一个<li>元素
            var li = $('<li></li>');
            // 添加学生信息
            li.append($('<span></span>').text(student.name));
            li.append($('<span></span>').text(student.age));
            li.append($('<span></span>').text(student.gender));
            // 将<li>元素添加到<ul>元素中
            $('#students').append(li);
          });
        },
        error: function() {
          alert('获取学生列表失败!');
        }
      });
    });
    

    以上代码会在页面加载时自动从后台获取学生列表,并将学生列表显示在id为students的

    • 元素中。

      需要注意的是,从后台获取学生列表时需要的HTTP请求方式和返回的数据格式可能会受到后台编程语言的影响,需要根据具体情况进行修改。


    如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^