后端数据呈现在前端页面，利用Ajax和jsp的El表达式

末蓝、 2023-06-11 05:20 3阅读 0赞

在SSM和springboot的工具上呈现

本博客只显示WEB-INF的页面和Controller层的内容，展现从数据库中查询的数据怎么展示在html和jsp页面中，jsp的本质是servlet，使用out.write()变成html，所以html的页面不在叙述。

一、jsp中要使用jstl和el表达式来获取Controller里面封装的在model里面的数据

userList.jsp

二、jsp中使用Ajax来获取后端的list数据，或者vo对象，并且利用each遍历list里面的内容，添加到页面上。

ajax.jsp

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Ajax</title>
    <script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
    
    </head>
    <body>
    	<table id="tab" border="1px" width="65%" align="center">
    		<tr>
    			<td colspan="6" align="center"><h3>学生信息</h3></td>
    		</tr>
    		<tr>
    			<th>编号</th>
    			<th>姓名</th>
    			<th>年龄</th>
    			<th>性别</th>
    			<th></th>
    		</tr>
    	</table>
    	
    <script type="text/javascript">
    //让页面加载完成之后开始运行js
    $(function(){
    		alert("稀罕你");
    		//常见的ajax请求方式$.get(url,data,callback,type){}
    		$.post("/ajax",function(result){
    			alert("稀罕你111");
    			var tr = null;
    			console.log(result);
    			$(result).each(function(index,user) {
    					//var user = result[index];
    					var id = user.id;
    					var name = user.name;
    					var age = user.age;
    					var sex = user.sex;
    					tr += "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+
    					age+"</td><td>"+sex+"</td></tr>";
    				});
    					//将tr标签添加到table
    				$("#tab").append(tr);
    			});
    
    		/* ajax基础版本
    		  data格式常见2种
    		  1.js格式{key:value}
    		  2.字符串格式 表单序列(大量数据 serialize 查看文档)化格式化后 id=1&name=tom&xxx=xxx
    		 */
    		/*  $.ajax({
    				type: "get",//请求类型
    				url:  "/findAll-ajax",
    				//data: "{id:100}",   //提交的参数
    				dataType: "json",   //返回值类型
    				async:  false,		//设定同步异步
    				success: function(result){
    					alert("回调函数成功时执行!!!");
    				},
    				error:   function(result){
    					alert("当ajax请求报异常时执行");
    				} 
    			}); */
    
    			
    		/* $.get(url,data,callback,json)
    		$.getJSON(url,data,callback){
    
    			} */
    })		
    </script>
    </body>
    </html>

UserController.java

package com.jt.controller;
    
    import java.util.List;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.servlet.ModelAndView;
    import org.springframework.web.servlet.support.RequestContext;
    
    import com.jt.dao.UserMapper;
    import com.jt.pojo.User;
    import com.jt.service.UserService;
    
    
    
    @Controller
    @RequestMapping("/")
    public class UserController {
    	@Autowired
    	private UserService userService;
    	//localhost/userList
    	@RequestMapping("userList")
    	public String userList(Model model) {
    		List<User> userList = userService.findAll();
    		model.addAttribute("userList",userList);
    		/*
    		 * 其实ModelAndView被拆分成了Model 和view
    		 * ModelAndView modelAndView = new ModelAndView(); 
    		 * List<User> userList =
    		 * userService.findAll(); 
    		 * modelAndView.addObject("userList", userList);
    		 * modelAndView.setViewName("userList");
    		 */
    		return "userList";
    	}
    	/*接收ajax数据
    	 * url:http://localhost:80/findAjax
    	 * data:null
    	 * 返回值：userList的json数据
    	 */
    	@RequestMapping("/ajax")
    	@ResponseBody
    	public List<User> findAjax() {
    		return userService.findAll();
    	}
    	/*localhost/toAjax*/
    	@RequestMapping("toAjax")
    	public String toAjax() {
    		return "ajax";
    	}
    	
    }