AJAX POST中出现400错误请求错误

时间:2015-12-11 09:22:36

标签: javascript java jquery ajax

在我的Spring项目中,当我点击某个按钮时,我尝试将数据更新到我的数据库。

目前,我确实有以下代码:

update.jsp:

<div class="searchParentOne">
        <div class="noticeBlankTwoButtons">
        </div>
        <div class="noticeNewButton">
            <button type="button" id="update" class='update save_ui'>Save</button>
        </div>
        <div class="noticeDeleteButton">
            <button type="button" id="delete" class='cancel_ui'>Cancel</button>
        </div>
    </div>
    <div class="data">
        <form id="formData">
        <table class="custbl">
            <colgroup>
                <col style="width: 15%;">
                <col style="width: 35%;">
                <col style="width: 15%;">
                <col style="width: 35%;">
            </colgroup>
            <tbody>
                <tr>
                    <td class="tbHead">Title</td>
                    <td class="tbText"><input type="text" id="notiTitle" value="${noticel.notiTitle}"></td>
                    <td class="tbHead">Writer</td>
                    <td class="tbContent"><p id="notiWriter">${noticel.notiWriter}</p></td>
                </tr>
                <tr>
                    <td class="tbHead">Date</td>
                    <td class="tbContent"><p id="notiCreateDate">${noticel.notiCreateDate}</p></td>
                    <td class="tbHead">Hit</td>
                    <td class="tbContent"><p id="notiViews">${noticel.notiViews}</p></td>
                </tr>
            </tbody>
        </table>
        <table class="custbl">
            <tbody>
                <tr>
                    <td><textarea class="ckeditor" id="editor1" name="editor1">${noticel.notiText}</textarea></td>
                </tr>
            </tbody>
        </table>
        <input type="hidden" value="${noticel.noticeId}" id="noticeId"/>
        </form>
    </div>

(跳过)

bindEvent : function() {
    $("#update").on('click', function(){
        var object = $("#formData").serializeJSON();
        var stringObject = $.parseJSON(object);

        $.ajax({
            contentType : "application/json",
            dataType : 'json',
            type : "POST",
            url : "<c:url value='/noti/updateNotice'/>",
            data : JSON.stringify(stringObject),
            success : function(status){
                if(status){
                    toastMessage("NOTICE", "UPDATED SUCESSFULLY", CONSTANT.TOASTICONSUCCESS, CONSTANT.TOASTBOTTOMCENTERPOS, function(){
                        window.location.href = "detail";
                    });
                } else {
                    toastMessage("NOTICE", "ERROR OCCURED", CONSTANT.TOASTICONERROR, CONSTANT.TOASTBOTTOMCENTERPOS, "");
                }
            },
            error : function(){
                toastMessage("NOTICE", "ERROR OCCRUED", CONSTANT.TOASTICONERROR, CONSTANT.TOASTBOTTOMCENTERPOS, "");
            }
        });
    });
}

Controller.java

@RequestMapping(value = "/getNotice/{id}/{type}")
public String getNotice(@PathVariable(value="id") String noticeId, @PathVariable(value="type") String type, ModelMap model) {
    Notice notice = noticeService.getNotice(noticeId);

    model.addAttribute("noticel", notice);

    if (type.equalsIgnoreCase(ViewMapper.NOTICE_DETAIL_VAR)) {
        return ViewMapper.NOTICE_DETAIL;
    } else if (type.equalsIgnoreCase(ViewMapper.NOTICE_UPDATE_VAR)) {
        return ViewMapper.NOTICE_UPDATE;
    } else {
        return null;
    }
}

@RequestMapping(value="/updateNotice", method=RequestMethod.POST)
@ResponseBody
public boolean updateNotice(@RequestBody Notice notice) {
    try {
        notice.setNotiText(validationTextArea(notice.getNotiText()));
        noticeService.updateNotice(notice);
        logger.info("Updated Notice Successfully");
        return true;
    } catch (Exception e) {
        logger.error("Update Notice", e.getMessage());
        return false;
    }
}

然后,每次单击按钮时,都会出现以下错误

enter image description here

仅供参考,更新:99是我的$ .ajax部分。

我可以问你这个问题的原因是什么?

提前谢谢。

编辑1:

我做了以下修复:

bindEvent : function() {
    $("#update").on('click', function(){
        var object = {
                notiTitle : $("#notiTitle").val(),
                notiText : CKEDITOR.instances['notiText'].getData(),
                noticeId : $("#noticeId").val()
        }

        $.ajax({
            contentType : "application/json",
            dataType : 'json',
            type : "POST",
            url : "<c:url value='/noti/updateNotice'/>",
            data : JSON.stringify(object),

现在它有效。

我将来可能要编辑它,但就目前而言,我可以得到我想要的一切。

感谢您帮助他们。

1 个答案:

答案 0 :(得分:1)

有一件事我注意到您的表单元素没有name属性,并且在序列化时需要该属性:

<input type="text" name="notiTitle" id="notiTitle" value="${noticel.notiTitle}">
<!----------------^^^^^^^^^^^^^^^^^----add this to the form elements.---------->

而不是stringObject发送object

data : JSON.stringify(object),

我认为你不得不再用$.parseJSON()将其解析为json。