jQuery - Ajaxリクエストは200 OKを返しますが、エラーイベントは発生しますか?

jQuery – Ajaxリクエストは200 OKを返しますが、エラーイベントが発生しますか?

jQuery Ajaxフォーム送信を確認します。

    $(document).ready(function () {

        $("#hostingForm").submit(function (e) {

            e.preventDefault(e);

            var data = {}
            data["id"] = $("#id").val();
            data["domain"] = $("#domain").val();
            data["name"] = $("#name").val();
            //...

            $.ajax({
                type: "POST",
                contentType: "application/json",
                url: "{{home}}/hosting/update",
                data: JSON.stringify(data),
                dataType: 'json',
                timeout: 600000,
                success: function (data) {

                    console.log("SUCCESS: ", data);
                },
                error: function (e) {

                    console.log("ERROR: ", e);
                }
            });

        });
    });

サーバー側(Spring MVC)を確認して、Ajaxリクエストを受信します。

@RestController
@RequestMapping("/hosting")
public class AdminHostingController {

    @Autowired
    HostingBo hostingBo;

    @RequestMapping(value = "/update", method = RequestMethod.POST)
    public String updateHosting(@RequestBody HostingForm hostingForm) {

        if(hostingForm!=null){
            hostingBo.update(hostingForm, UpdatedBy.WEB);
        }

        return "success";

    }

上記のSpring MVCコードは正常に機能しており、データベースを更新して「成功」文字列を返します。

1. 問題

クライアント側(jQuery Ajaxフォーム送信)とサーバー側(Spring MVC)の両方が正常に動作していますが、Ajaxエラーイベントが発生しますか?

ブラウザコンソールで次の出力を参照してください。

ERROR:  Object {readyState: 4, responseText: "success", status: 200, statusText: "OK"}

200 OKですが、エラーイベントが発生しましたか?

2. 溶液

jQuery.ajax()で、dataType: 'json'設定が指定されている場合、サーバーは有効なJSON形式の文字列を返す必要があります。指定されていない場合はエラーがスローされます。

Note
公式のjQuery Ajax documentation – dataType settingsからの次のステートメントを確認してください。

「…JSONデータは厳密な方法で解析されます。不正な形式のJSONは拒否され、解析エラーがスローされます…」

To fix this、JSON形式の文字列を返すようにサーバー側を更新します:

@RestController
@RequestMapping("/hosting")
public class AdminHostingController {

    @Autowired
    HostingBo hostingBo;

    @RequestMapping(value = "/update", method = RequestMethod.POST)
    public String updateHosting(@RequestBody HostingForm hostingForm) {

        if(hostingForm!=null){
            hostingBo.update(hostingForm, UpdatedBy.WEB);
        }

        //NEED JSON format
        return "{\"msg\":\"success\"}";

        //return "success";

    }

もう一度やり直して、ブラウザコンソールをもう一度確認してください。「成功」イベントが発生します。

SUCCESS:  Object {msg: "success"}