springboot发送ajax请求

@Controller
@RequestMapping("api")
public class CityController {

    @Autowired
    private PeopleMapper peopleMapper;

    @GetMapping("index")
    public  String index(){
        return "city";
    }

    @ResponseBody
    @RequestMapping(method = RequestMethod.POST,value = "data")
    public List<People> data(Model model) {

        List<People> list =peopleMapper.findAll();


        list=peopleMapper.findAll();
        model.addAttribute("lists",list);
        return list;
    }

}

前端页面city.html
<div style="width: 1000px;" >
    <h3 align="center">第一个项目</h3>
    <table width="100%" border="1" cellspacing="1" cellpadding="0"  class="table table-striped">
        <tr>
            <td>id</td>
            <td>loginacct</td>
            <td>userpswd</td>
            <td>username</td>
            <td>email</td>
            <td>createtime</td>
        </tr>
        <tbody id="tbodydata">

        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        </tbody>

    </table>
</div>
<hr/>
<div>
    <button type="button" class="btn btn-primary" onclick="sendAjaxPeople()" >筛选</button>
</div>


<script >
    function sendAjaxPeople()
    {

        $.ajax(
            {
                url:"/api/data",
                data:{
                   /* "id":"id",
                    "loginacct":"loginacct",
                    "userpswd":"userpswd",
                    "username":"username",
                    "email":"email",
                    "createtime":"createtime"*/
                },
                type:"post",
                dataType:"json",
                success:function(data)
                {

                    optionJson=data;

                    var str="";

                    for(i in data){
                        str+="<tr>"+
                            "<td>"+data[i].id+"</td>"+
                            "<td>"+data[i].loginacct+"</td>"+
                            "<td>"+data[i].userpswd+"</td>"+
                            "<td>"+data[i].username+"</td>"+
                            "<td>"+data[i].email+"</td>"+
                            "<td>"+data[i].createtime+"</td>"+
                            "</tr>";
                    }

                    document.getElementById("tbodydata").innerHTML=str;

                   alert(JSON.stringify(data));
                },
                error: function() {
                    alert("error");
                }
            });
    }



</script>

页面

图片.png
图片.png
图片.png

参考:https://blog.csdn.net/oppo5630/article/details/52093898/
https://github.com/yaoql/SpringBootAjax