javascript - AJAX POST 中的 400 错误请求错误

Question

在我的 Spring 项目中，当我单击某个按钮时，我尝试使其可将数据更新到我的数据库。

目前，我有以下代码:

更新.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;
    }
}

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

仅供引用，update: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),

现在它可以工作了。

将来我可能需要编辑它，但现在，我可以获得我想要的一切。

谢谢你们的帮助。

Answer 1

我注意到您的表单元素上没有 name 属性，而序列化它时需要该属性:

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

发送对象而不是stringObject:

data : JSON.stringify(object),

我认为您不必再​​次使用 $.parseJSON() 将其解析为 json。