ajax 异步刷新表格

一.ajax异步请求,局部刷新表格

页面部分:

 <input type="text" class="input" name="stu_name" id="searchname" placeholder="请输入要查询的学生姓名">
 <div class="search"><a class="searchbyname" onclick="queryStuByName()">查询</a>   

<table id="table1">
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>电话号码</th>
                    <!-- <th>价格<a href="#"><img src="箭头.svg" class="price"></a></th> -->
                    <th>班级</th>
                    <th>生日</th>
                    <th>性别<select class="stockorder" id="stu_sex" onchange="queryStuBySex()">
                        <option value="全部">全部</option>
                        <option value=""></option>
                        <option value=""></option>
                    </select></th>
                    <th>政治面貌<select class="netcorder" id="p_outlook" onchange="queryStudentByP()">
                        <option value="全部">全部</option>
                        <option value="党员">党员</option>
                        <option value="团员">团员</option>
                        <option value="青年">青年</option>
                    </select></th>
                    <th>状态</th>
                    <th>操作</th>
                    <tbody id="table_stu">
                    <c:forEach items="${stuList}" var="s"  >
                        <tr>
                            <td>1${s.stu_id}</td>
                            <td>${s.stu_name}</td>
                            <td>${s.stu_phnum}</td>
                            <td>${s.class_name}</td>
                            <td>${s.stu_birthday}</td>
                            <td>${s.stu_sex}</td>
                            <td>${s.p_outlook}</td>
                            <td>${s.status}</td>
                            <td><a onclick="deleteStu(${s.stu_id})" class="delete">删除</a>
                                <a onclick="toUpdateStuPage(${s.stu_id})">修改</a></td>
                        </tr>
                    </c:forEach>
                    </tbody>

            </table>            

js部分

 function queryStuByName(){
            var stu_name =$("#searchname").val();
            $.ajax({
                url:"${pageContext.request.contextPath}/stuAjax/queryStuByName",
                type:"post",
                data:{'stu_name':stu_name},
                success:function(data){
                    var html="";
                    $("#table_stu").html("");
                    for(var i = 0;i < data.length;i++){
                        html = "<tr><td>1"+data[i].stu_id+"</td><td>"
                            +data[i].stu_name+"</td><td>"
                            +data[i].stu_phnum+"</td><td>"
                            +data[i].class_name+"</td><td>"
                            +data[i].stu_birthday+"</td><td>"
                            +data[i].stu_sex+"</td><td>"
                            +data[i].p_outlook+"</td><td>"
                            +data[i].status+"</td>"+
                            "<td><a οnclick='deleteStu("+data[i].stu_id+")' class=\"delete\">删除</a>"+
                            "<a οnclick='toUpdateStuPage("+data[i].stu_id+")'>修改</a></td></tr>";
                        $("#table_stu").append(html);
                    }
                },
                error:function (){}
            })
        }

注意事项:
1.起始部分是 $.ajax({…})(美元符号,点,小括号)。
2.请求参数以键值对形式,冒号分割,逗号结尾。
3.收到响应发来的数据后,需要先把id为table_stu的部分置空,然后循环生成新的表格内容的字符串,随后把内容拼接到之前置空的位置,
4.通过id获取文本框输入内容:$.("#id").val(),不要忘记括号。

不要忘记导入jquery。

二.ajax请求参数类型
本人目前用到的:
1.发送一个数组(获取复选框值,发送到后台);
第一步:var b 获取的是整个复选框的信息,我们只需要复选框对应的value;循环获取选中的复选框的值。

第二步ajax传值部分:把上一步获取的数组转成json格式字符串,这样后台就可以正确接收参数了。

       页面部分
       
        var b= $('input:checkbox[name="noBox"]:checked');
        var noIdList = new Array();
        for(var i=0;i<b.length;i++){
            noIdList[i]=b[i].value+'';
        }
        $.ajax({
            url:"${pageContext.request.contextPath}/stu/stuClassDist",
            data:{"noIdList":JSON.stringify(noIdList)},
            method:"post",
            success:(function (){
            ...
            })
        })

后端代码正常String类型接收

java代码部分

@RequestMapping("/stuClassDist")
    @ResponseBody
    public String stuClassDist(String noIdList){
        System.out.println(noIdList);
        return "";
    }

2.map类型
待添加

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值