AJAX 未收到成功数据，将结果显示为“未定义”

Question

This is jQuery code snippet is not getting valid data through AJAX and keeps updating data in divs as undefined . I don't know what the problem is.

function success(data) {
    alert(data.amount);
    $('#summary').html(data.count + "|" + data.amount);
};

$(document).ready(function () {
    $("#button1").click(function (evt) {
        evt.preventDefault();
        var $form = $("#form1");
        $.ajax({
            type: $form.prop('method'),
            url: $form.prop('action'),
            data: $form.serialize() ,
            datatype: "json",
            tradition: true,
            success: function(data) {
                success(data);
            }
        });
    });
});

If I modify following success function to simply load a new page that shows the correct results that Action returns

function success(data) {
    $('#summary').html(data);
};

This is the controller action code snippet that receives the form fields data (id and quantity) from the view and returns count and amount :

public JsonResult AddtoCartDt(string id,string quantity)
{
    int id2 = int.Parse(id);
    Product pro = Data.Products.Single(c => c.Id == id2);
    var cart = ShoppingCart_BusinessLayer.GetCart(this.HttpContext);
    int l = int.Parse(quantity);
    for (int i = 0; i < l; i++)
    {
        cart.AddToCart(pro);
    }
    var Cart = ShoppingCart_BusinessLayer.GetCart(this.HttpContext);
    cartSummary summ = new cartSummary()
    {
        amount = Cart.GetTotal(),
        count = Cart.GetCount()
    };
    return Json(summ, JsonRequestBehavior.AllowGet);
}

Answer 1

Your code looks fine, but you should add some debug statements to check the response.

For starters, you could pass the success method directly as your ajax success handler, and add an error handler to log out any error:

$.ajax({
    type: $form.prop('method'),
    url: $form.prop('action'),
    data: $form.serialize() ,
    datatype: "json",
    traditional: true,
    // no need for the function()...
    success: success,
    error: console.log
});

// Alternatively, you could chain it:
$.ajax(/*...*/).done(success).fail(console.log);

That will call pass the JSON response as your success method parameter.

Then, try to add a console.log() statement to debug the response in the console:

function success(data) {
    console.log(data);
    $('#summary').html(data.count + "|" + data.amount);
};

Edit

Check the tradition parameters in your ajax call. In the doc it's called traditional . Also, check the route name and http method in your controler. You may want to add something like this in your controller:

[Route("~/myroute"), HttpPost]
public JsonResult AddtoCartDt(string id,string quantity)
{
  /*
  */
}