Ajax调用失败，错误为“ SyntaxError：JSON.parse错误：位置0意外输入”

Question

I am having an issue making a successful call to my controller from view with Ajax Post method.

Here is ajax call:

            var Model =
            {
                Ration: "123",
                Batch: "2323",
                IngredientAmountList: "34",
                InputAmount: "35",
                RationTotalWeight:"55"
            };

        $.ajax({
            url: '@Url.Action("AjaxCall", "Producer")',
            type: "POST",
            data: JSON.stringify(Model),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                console.log("success");
                console.log(data);
                console.log(data.length);
            },

            failure: function (data) {
                console.log("failure");
            },
            error: function (jqxhr, textStatus, errorThrown) {
                console.log(jqxhr);
                console.log(textStatus);
                console.log(errorThrown);
            },

        });

Here is Controller method receiving Ajax call:

    [HttpPost]
    public JsonResult AjaxCall()
    {
        //var modelTest = Model;

        return new JsonResult();
    }

The web browser will print out the error from the ajax method error function. Interesting to me is that if a breakpoint is set on AjaxCall() in the controller, it will hit the breakpoint. If AjaxCall() is given a string argument AjaxCall(string test){} it will still hit breakpoint and still fail. If AjaxCall() is given model argument as I want to do in the end, ie AjaxCall(MyModel model){} it doesn't even hit the breakpoint in the controller.

The model being passed in the for the ajax call possesses all the public getter/setter properties of the actual model.

The error that the ajax API is printing out is "SyntaxError: JSON.parse Error: Unexpected input at position:0", this is also something I am not finding anything on online.

Thanks for any possible advice

Answer 1

My guess is that you do not pass valid data from your controller. Try to pass an empty js object as JSON result return '{}' . See the code below.

   [HttpPost]
public JsonResult AjaxCall()
{
    //var modelTest = Model;

    return '{}';
}

If this does not return an error then the data you are passing as a result is not valid JSON data.

Answer 2

Try it like this:

var Model =
            {
                Ration: "123",
                Batch: "2323",
                IngredientAmountList: "34",
                InputAmount: "35",
                RationTotalWeight:"55"
            };

        $.ajax({
            url: '@Url.Action("AjaxCall", "Producer")',
            type: "POST",
            dataType: "json",
            data: { myAjaxModel: Model }, //Make sure data holds name of parameter passed to controller method
            //I removed the contentType and use ajax's default object type, pass the model as a Model object to controller
            success: function (data) {
                const jsonResult = JSON.parse(data); //parse the response
                console.log("success");
                console.log(data);
                console.log(data.length);
            },

            failure: function (data) {
                console.log("failure");
            },
            error: function (jqxhr, textStatus, errorThrown) {
                console.log(jqxhr);
                console.log(textStatus);
                console.log(errorThrown);
            },

        });

       //Changed this to return a string, which is the json version of model
       [HttpPost]
       public string AjaxCall(Model myAjaxModel)
       {
            var modelTest = myAjaxModel;
            //Create a javascript serializer to serialize your model
            System.Web.Script.Serialization.JavascriptSerializer jss = new System.Web.Script.Serialization.JavascriptSerializer();
            //Do your model updating, then return the updated version
            //Return a Json version of the model
            return jss.Serialize(modelTest);
       }

Answer 3

I believe the issue was a combination of the complexity of my original model and the return value of the controller method.

My ajax call in the view ended up looking like

        var ajaxModelData = {
            Name: "Bob",
            City: "Mpls"
        };

        $.ajax({
            url: '@Url.Action("AjaxCall", "Producer")',
            type: "POST",
            data: ajaxModelData,      //modelJson, //JSON.stringify(Model),

            success: function (data) {
                console.log("success");
                console.log(data);
                console.log(data.City);
                console.log(data.Name);
            },

            failure: function (data) {
                console.log("failure");
            },
            error: function (jqxhr, textStatus, errorThrown) {
                console.log(jqxhr);
                console.log(textStatus);
                console.log(errorThrown);
            },

        });

and my Controller method looks like

    [HttpPost]
    public ActionResult AjaxCall(RationGridAjaxModel data)
    {         

        data.City += " this will be added and printed in web console from ajax success call";
        return Json(data, JsonRequestBehavior.AllowGet);

    }

and the RationGridAjaxModel object being accepted by my controller method is actually just a new model class I made to hold the values I require for server-side updates. I am not sure why I could not do it with my original model, breakpoints on the controller's method would never be hit when trying to pass in my original model. I'm guessing it's an issue with certain methods or dependencies that exist in the original model.