我的jquery ajax表单发布有什么问题？

Question

    $("button[name='advocate-create-button']").on("click", function () {
    $.ajax({            
        url: '/Vendor/AdvocateCreate',
        type: 'post',
        dataType: 'json',
        data: $('form#advocate-create-form').serialize(),
        success: function() {
            $(".modal_overlay").css("opacity", "0");
            $(".modal_container").css("display", "none");
        }    
    }).done(function (data) {
        var $target = $("#advocate-list-view");
        var $newHtml = $(data);
        $target.replaceWith(data);
        $newHtml.effect("highlight");
    });
    return false;
});

Almost got this, just need a slight assist to get it done...I'm trying to post form data to '/Vendor/AdvocateCreate' and once it saves, I want the dialogue to go away and the list behind it to be updated.

The list behind it is the AdvocateList view and pulls its data from AdvocateList method in the same controller

AdvocateCreate method

[HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult AdvocateCreate(Advocate advocate, int page = 1)
    {
        if (!ModelState.IsValid) return View(advocate);
        db.Advocates.Add(advocate);
        db.SaveChanges();

        var userId = WebSecurity.GetUserId(User.Identity.Name);

        var model = (from a in db.Advocates.ToList()
                     where a.VendorId == userId
                     select a).ToPagedList(page, 15);
        if (Request.IsAjaxRequest()) return PartialView("_AdvocateListPartial", model);
        return View(model);
    }

the form tag is thus: <form class="form" id="advocate-create-form">

The create method does get called, the data does get saved, but the lines under success: do not fire and the data in #advocate-list-view is not updated

thanks

Answer 1

Your service looks like it should be returning html, and you're treating it as-if it should be html, so i'm going to assume it's html. You need to either remove the dataType option, or set it to html. Since html is not valid json, jQuery is triggering the error handler rather than success.

$("button[name='advocate-create-button']").on("click", function () {
    $.ajax({            
        url: '/Vendor/AdvocateCreate',
        type: 'post',
        /*dataType: 'json',*/
        data: $('#advocate-create-form').serialize(),
        success: function() {
            $(".modal_overlay").css("opacity", "0");
            $(".modal_container").css("display", "none");
        }    
    }).done(function (data) {
        var $target = $("#advocate-list-view");
        var $newHtml = $(data); // dunno what is 
        $target.replaceWith(data); // goin on here
        $newHtml.effect("highlight"); // or here
    });
    return false;
});