使用jQuery+ajax完成对表格数据的刷新

首先可以简单地理解一下ajax的步骤:
第一:可以把ajax看作是一次普通的请求,那么既然是一次请求,就需要说明,想哪里,以get还是post的方式请求(请求的的同时还可以携带参数),请求结束之后,还会有返回的数据。

那么ajax在这个逻辑上,就可以这么写:

DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>

<script type="text/javascript" src="js/jquery-3.6.0.js">script>

<script type="text/javascript">
    $(function (){
        $("#btn").click(function () {	/*这里是说:在btn 这个按钮被点击的时候,做如下操作*/
             $.ajax({				/*发起ajax请求 想着就是一次普通的请求*/
                 url:"doajax",		/*既然是请求,向谁请求?这里对应后端的一个RequestMapping(“xxx”)里面的xxxx*/
                 type:"get",		/*既然是请求,就有get和post请求方式,是哪一种需要在此说明,不写也可以,默认是get*/
                 data:{
                     s:"ni hao ajax "  /*既然是请求,可以携带数据,格式是key1:value1,key2:value2,xxxxxx*/
                 },
                 dataType:"json", 	/*既然是请求,就有返回的数据,返回的数据是什么格式*/
                 success:function (studentList){  /*这里是显示数据的逻辑,用的是代码加数据拼接的形式*/
                     $("#studentTable").append(
                         "\n" +
                         "name\n" +
                         "age\n" +
                         " "
                     )
                     for (var i in studentList) {
                        $("#studentTable").append(
                            ""+studentList[i].name+
                            ""+studentList[i].age+""
                        )
                     }
                 }
             })
        });
    })
script>

<body >

    <center>

        <input type="button" id="btn" value="按钮" >
        <table id="studentTable">

        table>

div>
    center>
body>
html>

后端的controller层也贴一下吧:

import org.example.pojo.Student;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.ArrayList;
import java.util.List;

@Controller
public class MyController {

    @RequestMapping("/doajax")
    @ResponseBody
    public List<Student> doAjax(String s ){
        List<Student> studentList=new ArrayList<>();
        studentList.add(new Student("zhangsan",20));
        studentList.add(new Student("lisi",22));
        System.out.println(s);
        /*这里我并没有对传过来的参数经行加工,只是简单的演示一下后端是可以收到请求时候携带的参数的,注意,参数名要一致*/
        return studentList;
    }
}

效果如下:
使用jQuery+ajax完成对表格数据的刷新_第1张图片

点击之后:
使用jQuery+ajax完成对表格数据的刷新_第2张图片

你可能感兴趣的:(java,ajax,jquery)