视图解析相关后端数据传递到前端无Ajax

Posted 2021-02-18 葵儿啊ε≡٩(๑>₃<)۶ 一心向学

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了视图解析相关后端数据传递到前端无Ajax相关的知识，希望对你有一定的参考价值。

package tk.mybatis.spr.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;

import tk.mybatis.spr.model.Users;

import javax.servlet.http.HttpServletRequest;
import java.util.ArrayList;
import java.util.List;

@Controller
public class UsersController {
    @RequestMapping("users/")
    public String selectUsers(HttpServletRequest request, Model model, ModelMap modelMap) {


        List<Users> users = new ArrayList<>();
        Users users1 = new Users(1, "刘诗诗", "123456", "liushishi@163.com");
        Users users2 = new Users(2, "吴奇隆", "123456", "wuqilong@163.com");
        Users users3 = new Users(3, "宋小宝", "123456", "songxiaobao@163.com");
        Users users4 = new Users(4, "柳岩", "123456", "liuyan@163.com");
        Users users5 = new Users(5, "霍思燕", "123456", "huosiyan@163.com");
        users.add(users1);
        users.add(users2);
        users.add(users3);
        users.add(users4);
        users.add(users5);
        //可以获取返回页面值 后台数据传回前端页面显示值
//        modelMap.addAttribute("users", users);
        //可以获取返回页面值 后台数据传回前端页面显示值
//        model.addAttribute("users", users);
        //可以获取返回页面值 后台数据传回前端页面显示值
//        request.setAttribute("users",users);
        return "Ajax";
    }
}

HttpServletRequest request, Model model, ModelMap modelMap 这三个都可以把后台的值传递到前台，都可以解析 也可以使用Ajax获取接口地址 通过获取data值来实现数据传输

//Model model 配合着Thymeleaf标签使用
//使用model.addAttribute("users",users);视图解析 Ajax.html Thymeleaf标签语法生效不报红

//使用modelMap.addAttribute("users",users);视图解析 Ajax.html Thymeleaf标签语法生效不报红

//使用request.setAttribute("users",users);视图解析 Ajax.html Thymeleaf标签语法生效报红

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" http-equiv="Access-Control-Allow-Origin" content="*">
    <title>Ajax</title>
   <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
<div id="app">
<input type="button" id="btn" onclick="show()" value="获取数据">
<table width="80%" about="center">
    <tr>
        <td>编号</td>
        <td>用户名</td>
        <td>密码</td>
        <td>邮箱</td>
    </tr>

<tr th:each="data:${users}">
    <td th:text="${data.id}"></td>
    <td th:text="${data.getUserName()}"></td>
    <td th:text="${data.getPassWord()}"></td>
    <td th:text="${data.getEmail()}"></td>
    

</tr>


</table>
</div>
</body>

<script>

    function show()
    {

    }
    // $(function () {
    //
    //    $("#btn").click(function () {
    //        var prefx ="http://127.0.0.1:8083/LQ/";
    //        $.ajax(prefx+"users/",function (data) {
    //             var html = ""
    //            for (let i = 0; i <data.length ; i++)
    //            {
    //　　　　　　　var id =　data[i].实体类属性名


    //　　　　　　　　
    //            }
    //            console.log(data)
    //        });
    //
    //    })
    // });

</script>
</html>

//效果图

以上是关于视图解析相关后端数据传递到前端无Ajax的主要内容，如果未能解决你的问题，请参考以下文章

Ajax PHP JavaScript MySQL实现简易的无刷新在线聊天室

前端ajax异步传值以及后端接收参数的几种方式

视图解析相关 后端数据传递到前端无Ajax

视图解析相关后端数据传递到前端无Ajax