【前端系列-1】ajax与Springboot通信将数据库数据渲染到前端表格

相关文章推荐

面冷心慈的汉堡包 · jquery ...· 4 周前 ·

爱吹牛的大脸猫 · ListView在ScrollView中不显 ...· 1 年前 ·

气宇轩昂的乌龙茶 · python opencv 三维重建-掘金· 1 年前 ·

爱旅游的打火机 · Audio-Tactile ...· 1 年前 ·

英姿勃勃的火柴 · java 怎么把当前日期转换成秒数 ...· 1 年前 ·

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>商品列表</title>
</head>
    <button id="queryGoods">查询商品</button>
    <table border="1px" id="goods_table">
    </table>
<script src="lib/jquery-2.1.1.min.js"></script>
<script>
	// 绑定按钮点击事件
    $("#queryGoods").click(function () {
        $.ajax({
            type: 'get',
            // 如果使用这种url写法，则不需要再写在data中
            // url: '/test/getGoodsInfoByStatus?status=' + 1,
            url: '/test/getGoodsInfoByStatus',
            data: {"status": 1},
            contentType: "application/json; charset=utf-8",
            success: function (result) {
                if (result.code == 0) {
                    showData(result.data);
                } else {
                    alert("未能获取商品信息！");
            }, error: function (e) {//响应不成功时返回的函数
                console.log(e, 'error');
	// 将数据渲染在表格中的方法
    function showData(data) {
        var table = $("#goods_table");
        table.empty();
        //拼接表头
        table.append("<tr></tr><td>id</td><td>名称</td><td>价格</td><td>数量</td></tr>");
        for (var i = 0; i < data.length; i++) {
            //拼接表格的行和列
            var str = "<tr><td>" + data[i].id + "</td><td>" + data[i].name + "</td><td>" + data[i].price + "</td><td>" + data[i].size + "</td></tr>";
            //追加到table中
            table.append(str);
</script>
</body>
</html>

$("#queryGoods").click(function () {
    $.ajax({
        type: 'post',
        url: '/test/getGoodsInfoByStatus',
        // JSON.stringify() 方法将 JavaScript 对象转换为字符串。status必须被双引号括起
        data: JSON.stringify({"status": 1}),
        contentType: "application/json; charset=utf-8",
        success: function (result) {
            if (result.code == 0) {
                showData(result.data);
            } else {
                alert("未能获取商品信息！");
        }, error: function (e) {//响应不成功时返回的函数
            console.log(e, 'error');
});

{{
	"msg": "操作成功！",
	"code": "0",
	"data": [
			"id": 1,
			"name": "iPhone",
			"type": "国产",
			"price": 6000.0,
			"size": 55,
			"status": 0,
			"description": "说明"
			"id": 2,
			"name": "watch",
			"type": "1",
			"price": 500.0,
			"size": 35,
			"status": 1,
			"description": "说明"
			"id": 3,
			"name": "television",
			"type": "1",
			"price": 1000.0,
			"size": 90,
			"status": 1,
			"description": "说明"
			"id": 4,
			"name": "computer",
			"type": "1",
			"price": 4500.0,
			"size": 60,

云深i不知处

【前端系列-1】ajax与Springboot通信将数据库数据渲染到前端表格

前言

项目创建

实现过程