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