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);
                }
            });

        });
    });

Ajaxリクエストを受け取るには、サーバー側(Spring MVC)を確認してください。

@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";

    }

上記の春の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形式のStringを返さなければなりません。そうでなければエラーがスローされます。

"…​ JSONデータは厳密に解析されます。不正な形式のJSONはすべて拒否され、解析エラーがスローされます…​ "

  • これを修正するには、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"}

参考文献

  1. jQuery.ajax()documentation

  2. Wikipedia:JSON

  3. リンク://spring-mvc/spring-3-mvc-and-json-example/[Spring MVCとJSON]