Ajax实现用户信息调用

1 导入页面JS

说明:引入页面JS和编辑页面名称
在这里插入图片描述

2 编辑页面JS

<%@ 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>
<!--导入函数类库  -->
<script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
<!--JS测试  -->
<script type="text/javascript">
    //让页面加载完成之后执行
    $(function() {

        //1.$.get  2.$.post  3.$.getJSON 只能获取json串  4.$.ajax 万能用法
        //1.语法  url地址,  data参数 , 回调函数    返回值类型
        //type类型:xml, html, script, json, text, _default 会自己解析返回值。
        //jQuery.get(url, [data], [callback], [type])   一般都是json串
        $.get("/findAjax2", function(data) {

            //1.获取返回值信息,之后循环遍历,之后将每个数据获取之后 拼接到table中即可
            //关于ajax参数问题  第一个参数 代表下标 ,第二个参数代表遍历的对象
            var trs = null;
            $(data).each(
                    function(index, user) { //[user,user,user....]
                        //var user = data[index];
                        var id = user.id; //从对象中获取属性信息
                        var name = user.name;
                        var age = user.age;
                        var sex = user.sex;
                        trs += "<tr align='center'><td>" + id + "</td><td>"
                                + name + "</td><td>" + age + "</td><td>" + sex
                                + "</td></tr>";
                    });
            //将tr标签追加到table中
            $("#tb1").append(trs);
        });

        //2.利用$.ajax方法发起ajax请求
        $.ajax({
            type : "get",           //请求类型
            url : "/findAjax",         //请求路径
            dataType: "json",       //指定返回值格式为json串
            //data : "name=John&location=Boston",    //请求参数
            async: false ,  //表示同步和异步问题.  默认条件下 是异步操作
            cache: false ,   //添加请求缓存
            success : function(data) {                //回调函数
                $(data).each((index,user) => {
                    addrows(user);
                    });
            },
            error : function(data){

                alert("请求失败!!!")
            }
        });

        //${user.id}  el表达式  所以取值为null
        function addrows(user){
            var tr = "<tr align='center'><td>"+user.id+"</td><td>"+user.name+"</td><td>"+user.age+"</td><td>"+user.sex+"</td></tr>";
            $("#tb1").append(tr);
        }

    });
</script>


<title>您好Springboot</title>
</head>
<body>
    <table id="tb1" 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>
        </tr>
    </table>
</body>
</html>

3 编辑UserController

package com.jt.demo.controller;

import java.util.List;

import javax.servlet.http.HttpServletRequest;

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.bind.annotation.RestController;

import com.jt.demo.pojo.User;
import com.jt.demo.service.UserService;

@Controller  //返回值结果需要跳转到页面中.  执行视图解析器的代码
//@RestController //返回值的结果返回的是JSON数据(String) 不执行视图解析器业务规范
public class UserController {
    
    @Autowired
    private UserService userService;
    
    /**
     * 需求: 用户通过http://localhost:8090/findAll请求,
     * 要求:        
     *         1.跳转到userList.jsp页面中
     *         2.并且在页面中展现user列表数据.
     *           页面中的取值 ${userList}
     * 作业2:
     *         在userAjax.jsp中,利用ajax异步方式,动态获取用户信息.
     *         并且在页面中以表格的形式展现.
     * 0-10: 优秀  
     * 10-15:优秀-
     * 15-20良好
     * 20+  不及格
     * IDEA 调整启动项的目录加载位置  否则容易报错404
     */
    @RequestMapping("/findAll")
    public String findAll(Model model) {
        
        List<User> userList = userService.findAll();
        model.addAttribute("userList", userList);
        return "userList"; //跳转页面
    }

    //1.跳转到ajax页面中
    @RequestMapping("/userAjax")
    public String userAjax() {
        
        return "userAjax";
    }
    
    //2.接收ajax用户请求  返回值为userJSON数据
    @RequestMapping("/findAjax")
    @ResponseBody
    public List<User> findAjax(){
        
        return userService.findAll();
    }
    
}

 

posted @ 2020-08-01 17:06  wjcbk  阅读(466)  评论(0)    收藏  举报