使用jqury AJAX的get post方法从服务器获取、写入数据

最新推荐文章于 2023-11-27 10:59:49 发布

蓝蓝真**的又强又帅

最新推荐文章于 2023-11-27 10:59:49 发布

阅读量331

点赞数

文章标签： html ajax jquery

本文链接：https://blog.csdn.net/scscdstfxqxxzqqc/article/details/124039574

版权

在这里插入图片描述
修改：表单中自动填写数据

关于数据地址，都是老师给好的。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        #txt {
            border: 2px solid rgb(83, 82, 82);
            padding: 20px;
        }
        
        .p1 {
            height: 20px;
            display: inline;
        }
        
        table {
            margin-top: 30px;
            border-collapse: collapse;
            width: 750px;
        }
        
        th,
        td {
            border: 1px solid black;
            text-align: center;
        }
        
        #stuid,
        #save {
            display: none;
        }
    </style>


</head>

<body>
    <div>
        <div id="txt">
            <p class="p1">学号</p><input id="no" type="text" class="input">
            <p class="p1">姓名</p><input id="name" type="text" class="input">
            <p class="p1">专业</p><input id="major" type="text" class="input">
            <input type="button" id="add" value="确定">
            <input type="button" id="save" value="保存">
        </div>
        <table>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>专业</th>
                <th>操作</th>
            </tr>

        </table>
    </div>
    <script src="../js/jquery.min.js"></script>
    <script>
        $(function() {
            //$.get(URL,callback);
            $.get("http://120.46.143.125:8080/stu/list", function(msg) {
                console.log(msg); //在控制台打印从服务器获得的数据
                console.log(msg.data.length)//在控制台输出数据的个数
                for (var i = 0; i < msg.data.length; i++) {
                    $("table").append(
                        "<tr><td id='stuid'>" + msg.data[i].stuId + "</td><td>" +  
                        //给出id的数据，但是不展示，为了写后面的删除操作的数据地址
                        msg.data[i].stuNo + "</td><td>" +
                        msg.data[i].stuName + "</td><td>" +
                        msg.data[i].stuMajor + "</td><td>" +
                        "<a href='#' οnclick=Updatestu(this)>修改</a>|<a href='#' οnclick=Removestu(this)>删除</a></td></tr>"
                    )
                }
            });
            $("#add").click(function() {
                var stu = {
                    "stuNo": $('#no').val(),
                    "stuName": $('#name').val(),
                    "stuMajor": $('#major').val()
                }
                console.log(stu);
                $.ajax({
                    type: "POST",
                    url: "http://120.46.143.125:8080/stu/insertStu",
                    // contentType: "application/json",
                    // 添加 contentType：“application/json“之后，向后台发送数据的格式必须为json字符串
                    // data: JSON.stringify(stu),
                    // JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。
                    //上面会出现错误，不能把表单中的数据转化为json数据，因为表单中没有stuId的数据
                    //所以在添加数据后，数据是null
                    data: stu,
                    dataType: "json",

                    success: function(msg) {
                        if (msg.msg == "成功") {
                            location.reload(true); //刷新
                        } else
                            alert("添加数据失败")
                    }
                });
            });
            // Removestu = function(TS) {
            //     var id = $(TS).parents("tr").find('td:eq(0)').text();
            //     console.log(id);
            //     $.ajax({
            //         type: "POST",
            //         url: "http://120.46.143.125:8080/stu/deleteStu/" + id,
            //         success: function() {
            //             $(TS).parents("tr").remove();
            //         }
            //     })
            // }
        })

        //删除方法  放在function方法外面，如果放在里面，要写成Removestu = function(TS) 
        Removestu = function(TS) {
            var id = $(TS).parents("tr").find('td:eq(0)').text();
            console.log(id);
            $.ajax({
                type: "POST",
                //数据接口地址
                url: "http://120.46.143.125:8080/stu/deleteStu/" + id,
                success: function() {
                    $(TS).parents("tr").remove();
                }
            })
        }

        Updatestu = function(TS) {

            var id = $(TS).parents("tr").find('td:eq(0)').text();
            var stuno = $(TS).parents("tr").find('td:eq(1)').text();
            var stuname = $(TS).parents("tr").find('td:eq(2)').text();
            var stumajor = $(TS).parents("tr").find('td:eq(3)').text();

            $('#no').val(stuno);
            $('#name').val(stuname);
            $("#major").val(stumajor);

            $("#add").css("display", "none");
            $("#save").css("display", "inline");

            console.log(id);
            $("#save").click(function() {
                var stu = {
                    "stuId": id,
                    "stuNo": $('#no').val(),
                    "stuName": $('#name').val(),
                    "stuMajor": $('#major').val()
                }
                $.ajax({
                    type: "POST",
                    url: "http://120.46.143.125:8080/stu/updateStu",
                    data: stu,
                    dataType: "json",
                    success: function(msg) {
                        console.log(msg);
                        console.log(TS);
                        if (msg.code == 200) {
                            // $(msg).parents('tr').find("td:eq(1)").text($("#no").val);
                            // $(msg).parents('tr').find("td:eq(2)").text($("#name").val);
                            // $(msg).parents('tr').find("td:eq(3)").text($("#major").val);
                            //不需要再特别的在table后面添加数据样式，直接刷新，数据就会出来   
                            //上面的msg是服务端返回的数据，不是stu的数据，上面的写法是错误的
                            location.reload(true);
                        } else {
                            // alert("修改失败")
                        }
                    }
                })

            })

        }
    </script>
</body>

</html>

onclick等事件调用函数提示：xxx函数 is not defined：
1、可以把函数写在$(function（）{})或 $().ready(function () {})外部
2、或者把写在内部的函数的定义修改为：函数名 = function（）{}，注意不要写成 ~~var 函数名 = function（）{}~~

蓝蓝真**的又强又帅

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
使用jqury AJAX的get post方法从服务器获取、写入数据

修改：表单中自动填写数据关于数据地址，都是老师给好的。<!DOCTYPE html><html><head> <meta charset="utf-8"> <style> #txt { border: 2px solid rgb(83, 82, 82); padding: 20px; } .p1 { .
复制链接

扫一扫