jQuery Ajax request return 200 OK but error event is fired?

摘要: Review a jQuery Ajax form submit.

Review a jQuery Ajax form submit.

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

Review the server side (Spring MVC) to receive the Ajax request.

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

The above Spring MVC code is working fine, updated the database and return a ‘success’ string.

1. Problem

Both client side (jQuery Ajax form submit) and server side (Spring MVC) are working fine, but the Ajax error event is fired?

See the following output in the browser console :

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

200 OK but error event is fired?

2. Solution

In jQuery .ajax(), if the dataType: 'json' setting is specified, server must return a valid JSON formatted String, else error is thrown.

Note
Review the following statement from the official jQuery Ajax documentation – dataType settings :

“…The JSON data is parsed in a strict manner; any malformed JSON is rejected and a parse error is thrown…”

To fix this, update the server side to return a JSON formatted string :

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

Try again, review the browser console again, “success” event is fired.

SUCCESS:  Object {msg: "success"}

References

  1. jQuery.ajax() documentation
  2. Wikipedia : JSON
  3. Spring MVC and JSON

上一篇: Linux – Which application is using port 8080
下一篇: How to view HTTP headers in Google Chrome?
 评论 ( What Do You Think )
名称
邮箱
网址
评论
验证
   
 

 


  • 微信公众号

  • 我的微信

站点声明:

1、一号门博客CMS,由Python, MySQL, Nginx, Wsgi 强力驱动

2、部分文章或者资源来源于互联网, 有时候很难判断是否侵权, 若有侵权, 请联系邮箱:summer@yihaomen.com, 同时欢迎大家注册用户,主动发布无版权争议的 文章/资源.

3、鄂ICP备14001754号-3, 鄂公网安备 42280202422812号