使用ajax取值（第二篇）

原创已于 2022-06-03 18:53:07 修改 · 358 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #java #前端

于 2022-06-03 18:50:26 首次发布

springboot 专栏收录该内容

10 篇文章

订阅专栏

本文详细探讨了在前端开发中使用Ajax技术从服务器获取数据的实践方法，涵盖了请求的构造、响应处理以及与Java后端的交互。通过实例解析，帮助开发者提升Ajax取值的技能，实现更高效的数据交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="button" id="btn" value="获取数据"/>
<table width="80%" align="center">
    <thead>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
    </thead>
    <tbody id="content">
    </tbody>
</table>

<script src="jquery-3.6.0.js"></script>
<script>
    $(function () {
        $("#btn").click(function () {
            $.post("http://localhost/ajax3/a", function (data) {//url+回调函数
                console.log(data);
                let html = "";
                for (let i = 0; i < data.length; i++) {
                    html += "<tr>" +
                        "<td>" + data[i].name + "</td>" +
                        "<td>" + data[i].age + "</td>" +
                        "<td>" + data[i].sex + "</td>" +
                        "</tr>"
                }
                $("#content").html(html);

            })
        })
    })
   // http://localhost/index3.html
</script>
</body>
</html>

package com.example.controller;

import com.example.pojo.User;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.List;

@RestController
@RequestMapping("/ajax3")
public class AjaxController3 {

    @RequestMapping("/a")
    public List<User> ajax(){
        List<User> list = new ArrayList<>();
        User user = new User("wakeup", 1, "男");
        for (int i = 0; i < 10; i++) {
            list.add(user);
        }

        return list;

    }
}

package com.example.pojo;

public class User {
    private String name;
    private int age;
    private String sex;

    public User() {
    }

    public User(String name, int age, String sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    @Override
    public String toString() {
        return "User{" +
                "name='" + name + '\'' +
                ", age=" + age +
                ", sex='" + sex + '\'' +
                '}';
    }
}

在这里插入图片描述