ajax请求，数据循环处理以及动态append点击事件，循环内嵌点击

qq_41078128

于 2023-05-11 15:56:02 发布

阅读量323

点赞数

文章标签： ajax javascript ecmascript

本文链接：https://blog.csdn.net/qq_41078128/article/details/130622650

版权


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <SCRIPT>
        var pageNum  = 1;
        var pageSize = 3;
        var count = 0 ;

            $(function () {
            <!-- 初始化查询 -->
            search(pageNum,pageSize);

            <!-- 模糊查询 -->
            $('#searchButton').click(function () {
                search(pageNum,pageSize);
            });

            $("#stuTbody").on('click',"#stuDelete",{},function () {
                confirm("是否删除");
                var btn = $(this);
                alert(btn.attr("stuId"));
                $.ajax({
                    "type":"get",
                    "url":"/demo/StudentDelete",
                    "data":{
                        "id":btn.attr("stuId")
                    },
                    "dataType":"json",
                    "success":function (data) {
                        if (data==1){
                            count = count - 1 ;
                            var pages =  Math.ceil(count / pageSize);//向上取整
                            if(pageNum<=pages){
                                search(pageNum,pageSize)
                            }else{
                                if(pageNum==1){
                                    search(1,pageSize);
                                }else {
                                    search(pageNum-1,pageSize)
                                }
                            }

                        }else {
                            alert("删除失败")
                        }
                    }
                })

            })
        });


        function search(pageNum,pageSize) {
            $.ajax({
                "type": "get",
                "url": "/demo/StudentServlet",
                "data": {
                    "pageNum": pageNum,
                    "pageSize": pageSize,
                    "name": $('#name').val(),
                    "address": $('#address').val()
                },
                "dataType": 'json',
                "success": function (data) {
                    var pages = data.pages;
                    count = data.count;
                    $('#stuTbody').empty();
                    console.log(data)
                    $.each(data.studentList, function (i, e) {
                        $("#stuTbody").append("<tr>\n" +
                            "                <td>"+e.id+"</td>\n" +
                            "                <td>"+e.name+"</td>\n" +
                            "                <td>"+e.address+"</td>\n" +
                            " <td><input type=\"button\" value=\"删除\" id='stuDelete' stuId="+e.id+"></td>\n"+
                            "            </tr>")
                    });
                    //添加上一页/下一页
                    if (pageNum == 1) {
                        $('#stuTbody').append("<input type=\"button\" id=\"pageDown\"  value=\"下一页\" onclick='next()'>\n");
                    } else if(pageNum == pages){
                        $('#stuTbody').append("<input type=\"button\" id=\"pageFront\" value=\"上一页\" onclick='pre()'>\n");
                    } else {
                        $('#stuTbody').append("<input type=\"button\" id=\"pageFront\" value=\"上一页\" onclick='pre()'>\n");

                        $('#stuTbody').append("<input type=\"button\" id=\"pageDown\" value=\"下一页\" onclick='next()'>\n");
                    }

                }
            });

        }




        function next() {
            search(++pageNum,pageSize)
        };
        function pre() {
            search(--pageNum,pageSize)
        };


    </SCRIPT>


</head>

<body>
    <form id="stuForm">
        姓名:<input type="text" id="name">
        地址:<input type="text" id="address">
        <input type="button" id="searchButton" value="查询">
        <table cellspacing="5px" cellpadding="10px">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>地址</th>
            </tr>
            <tbody id="stuTbody">

            </tbody>

        </table>

        <div id="divTest">
            <input type="button" id="button1" value="测试1">

            <table id="tableTest">
                <input type="button" id="button2" value="测试2">

                <tbody id="test">
                     <input type="button" id="button3" value="测试3">
                </tbody>
            </table>
        </div>

    </form>
</body>
</html>

qq_41078128

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax请求，数据循环处理以及动态append点击事件，循环内嵌点击

【代码】ajax请求，数据循环处理以及动态append点击事件，循环内嵌点击。
复制链接

扫一扫

ajax请求，数据循环处理以及动态append点击事件，循环内嵌点击

“相关推荐”对你有帮助么？