使用Ajax技术与后台交互

   <div class="form-group">
        <h3>评论</h3>
        <div class="col-sm-3">
            <textarea id="commentContent" class="form-control" rows="4" placeholder="来评论两句吧！"></textarea>
        </div>
    </div>
    <div class="form-group">
        <input type="hidden" id="articleId" class="form-control" value="${article.id}">
    </div>
    <p style="text-align:left">
        <button id="commentButton" class="myBtn" type="submit">提交</button>
    </p>   

 这里有一个评论框，然后有一个隐藏的发送文章的Id的<input>标签。点击提交按钮，执行相关的JS语句。

        首先要导入JQuery的JS文件，才能使用使用$("#id选择器")

  

<script src="<c:url value="/js/jquery.js"/>"></script>
<script>
    $("#commentButton").click(function () {
        var commentContent = $("#commentContent").val();
        var articleId = $("#articleId").val();
        var varJson = {
            "content": commentContent,
            "articleId": articleId
        };
 
        $.ajax(
                {
                    type: "post",
                    url: "<c:url value="/actions/comment/insertComment"/>",
                    dataType: 'json',
                    data: varJson,
                    success: function (data) {
                        if (data.success) {
                            //刷新,重新加载本页面,本页面是readArticle请求
                            window.location.reload();
                        } else {
                            window.alert("评论失败,可能的原因是:"+data.reason);
                        }
                    },
                    error: function () { 
                        window.alert("您可能还没有登录")
                        window.location.href="<c:url value="/actions/security/login"/>";
                    }
                });
 
    })
 
</script>

前端发送JSON数据，后台使用@RequestBody 进行封装实体。

ar requestParm = {
            loginName: userName,
            loginPassword: password
        };
 
        //发送URL
        $.ajax({
            type: 'POST',
            url: "url",
            data: JSON.stringify(requestParm),
            dataType: 'json',
            contentType: 'application/json',
            success: function (data) {
                if (data.success) {
                    
                } else {
                    
                }
            }
        });
 

在后台接收请求的Controller中的Java代码

        范例一：使用SpringMVC直接封装前端发送的数据，映射至实体类中。

**
     * 插入评论
     * 使用ajax从前端获取到json数据封装到comment中
     *
     * @param comment 评论
     * @return Json数据，返回给页面。逻辑控制由页面操作
     */
    @RequestMapping(value = {URL_COMMENT_INSERT}, method = {POST})
    @ResponseBody
    public JsonResponseVO insertComment(HttpSession session, Comment
            comment) {
        LOGGER.info("enter insert commment controller");
        comment.setDate(new Date());
        String name;
        try {
            name = getCurrentAccount(session).getNickname();//评论者的名字
        } catch (Exception e) {
            LOGGER.info("当前无用户登录，或者是session过期");
            return new JsonResponseVO(false, "用户可能没有登录");
        }
        comment.setName(name);//设置作者
        LOGGER.info("Controller:insert commment,comment={}", comment);
        int i = commentService.insertComment(comment);
        if (i == 0) {
            return new JsonResponseVO(false);
        }
        return new JsonResponseVO();
 
    }

范例二：使用@RequestParam("请求参数的名字") String loginName 

/**
     * 用户登录数据提交
     *
     * @param session
     * @param loginName 登录名
     * @param password  密码
     * @return          登录成功跳转博客空间首页，失败弹窗提示
     */
    @RequestMapping(value = {URL_SECURITY_ACCOUNT_LOGIN}, method = {POST})
    @ResponseBody
    public JsonResponseVO accountLogin(HttpSession session, @RequestParam("loginName") String loginName, @RequestParam("password") String password) {
        LOGGER.info("Controller:accountLogin,loginName={},password={}", loginName, password);
        final Account account = securityService.accountAuthenticate(loginName, password);
        if (account.getId() == null) {
            LOGGER.info("用户登录失败");
            JsonResponseVO VO = new JsonResponseVO(false);
            VO.setOther("帐号错误或者密码错误");
            return VO;
        }
        if (!account.isEnabled()) {    
            LOGGER.info("帐号不可用");
            JsonResponseVO VO = new JsonResponseVO(false);
            VO.setOther("帐号已经被冻结，请联系管理员!");
            return VO;
        }
        session.setAttribute("account",account);
        return  new JsonResponseVO();
    }