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"}