AJAX的使用及规范格式

第一个用户登录验证为例:

 @RequestMapping(value = "/login",method = RequestMethod.POST)
    @ResponseBody
    public   Map<String,Object>  login(Model model, User user, HttpSession session) {
        Map<String,Object> map=new HashMap<>();
        try {
             User login = userService.login(user.getName());
            session.setAttribute("name", user.getName());
            if(login!=null&&user.getPassword().equals(login.getPassword())){
              //方法的重定向   return "redirect:/user/selUser.action";
                //装入一个字符串,而放回一个map集合
                map.put("success","success");
                return map;
            }
        } catch (Exception e) {
            return map;
        }
        return map;

    }

  //用AJAX提交传递数据
            $("#tj").click(function() {
            //判断用户名那个和密码都为true是执行提交,否则输出"请正确添加用户信息!"
                        if (name && password) {
                           $.ajax({
                               type:"post",
                               url:"${pageContext.request.contextPath }/user/login.action",
                               data:{
                                   name:uname,
                                   password:upass
                               },
                               dataType:"json",
                               success:function (data) {
                                   <!--接受json中的success字符串 并判断-->
                                   if (data.success == "success") {
                                       alert("恭喜你,登录成功!");
                                       location.href = "${pageContext.request.contextPath }/user/selUser.action";
                                   } else {
                                       alert("登录失败,用户名不能重复!");
                                       //刷新本页页面
                                       location.reload();
                                   }
                               },
                               error:function () {
                                   alert("添加失败,用户名不能重!");
                               }
                           });
                          } else {
                            alert("请正确添加用户信息!");
                        }
                   });


2.以批量删除为例

 /**
  * 全选全不选
  * */

     function allChk() {
             $("input[id='id']").each(
                 function () {
                     if($(this).prop("checked")){
                         $(this).removeAttr("checked");
                     }else {
                         $(this).prop("checked","true");
                     }
                });
            }
  /* 批量删除 */
         function deleteMessageAll() {
         // 判断是否至少选择一项
             var checkedNum = $("input[name='subChk']:checked").length;
             if(checkedNum == 0) {
                 alert("请选择至少一项!");
                 return;
             }

         // 批量选择
             if(confirm("确定要删除所选项目?")) {
                 var checkedList = [];
                 $("input[name='subChk']:checked").each(function() {
                     checkedList.push($(this).val());
                 });
                 ids=checkedList.toString();
                 var ids=encodeURI(ids);
                 name=$("#seid").val();
                 name=name.toString();
                 var name= encodeURI(name);
                 $.ajax({
                     type: "GET",
                     url: "<%=basePath%>/deleteMessage.action",
                     data: {ids:ids,
                     name:name},
                     dataType:"json",
                     success: function(data) {
                         var html="<tr>"+
                             "<td></td>"+
                             "<td width=\"200px\">消息id</td>"+
                             "<td width=\"200px\">消息内容</td>"+
                             "<td width=\"200px\">时间</td>"+
                             "<td width=\"200px\">接收人</td>"+
                             "<td width=\"200px\">紧急状态</td>"+
                             "<td width=\"200px\">操作</td>"+
                             "</tr>";
                         var list=data.messages;
                         for(var i=0;i<list.length;i++){
                             html+="<tr>" +
                                 "<td><input type='checkbox' id='id' value='"+list[i].id+"'></td>" +
                                 "<td>"+list[i].id+"</td>" +
                                 "<td>"+list[i].content+"</td>" +
                                 "<td>"+list[i].createTime+"</td>" +
                                 "<td>"+list[i].userName+"</td>" +
                                 "<td>"+list[i].satate+"</td>" +
                                 "<td><input type=\"button\" value=\"删除\" οnclick='deleteMessage("+list[i].id+")'></td>" +
                                 "</tr>";
                         };
                         $("#tid").html(html);
                     },
                     error:function () {
                         alert("网络异常,请稍后在操作!");
                     }
                 });
             }
         }
<!--批量删除及全选全不选-->
    <input type="button" value="全选/全不选" οnclick="allChk()"/>
   <input type="button" value="批量删除" οnclick="deleteMessageAll()"/>
      <table border="1px" id="tid">
        <thead>
        <tr>
           <td></td>
            <td width="200px">消息id</td>
            <td width="200px">消息内容</td>
            <td width="200px">时间</td>
            <td width="200px">接收人</td>
            <td width="200px">紧急状态</td>
            <td width="200px">操作</td>
        </tr>
        </thead>
        <tbody id="tbid">

        <c:forEach items="${messageList}" var="li">
            <tr>

                <td><input type="checkbox" id="id" name="subChk" value="${li.id}"/>
                </td>
                <td>${li.id}</td>
                <td>${li.content}</td>
                <td>${li.createTime}</td>
                <td>${li.userName}</td>
                <td>${li.satate}</td>
                <td><input type="button" value="删除" οnclick="deleteMessage(${li.id})" /></td>
            </tr>
        </c:forEach>
        </tbody>
    </table>

@RequestMapping(value = "/deleteMessage",method = RequestMethod.GET)
    @ResponseBody
    public  Map<String,Object> deleteMessage(String ids,String name) throws  Exception{
        name= URLDecoder.decode(name,"utf-8");
        ids=URLDecoder.decode(ids,"UTF-8");
        IdUtil idUtil=new IdUtil();
        idUtil.setIds(ids);
        messService.deleteMessage(idUtil);
        Map<String,Object> map=new HashMap<>();
        if(name.length()!=1){
            List<Message> messageList = messService.selMessages(name);
            map.put("messages", messageList);
            }else {
            List<Message> messageList=messService.selMessage();
            map.put("messages",messageList);
        }
          return map;
    }

<delete id="deleteMessage" parameterType="IdUtil">
        delete from tb_message where id  in (${ids})
    </delete>
    <select id="selMessages" parameterType="String" resultType="Message">
       select * from tb_message m where m.user_name=#{userName }
    </select>
    <select id="fuzzyMessage" parameterType="String" resultType="Message">
        select * from tb_message m where m.content like concat(concat('%',#{content},'%'))



  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值