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类型
待添加