Question

我遇到了一个问题，即使用Ajax Post方法成功调用我的控制器。

这是ajax调用：

            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);
            },

        });

这是接收Ajax调用的Controller方法：

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

        return new JsonResult();
    }

Web浏览器将从ajax方法错误函数中打印出错误。有趣的是，如果在控制器中的AjaxCall（）上设置了断点，它将触及断点。如果给AjaxCall（）一个字符串参数AjaxCall（字符串测试）{}它仍然会遇到断点但仍然失败。如果AjaxCall（）给出了我想要做的模型参数，即AjaxCall（MyModel model）{}它甚至没有命中控制器中的断点。

在ajax调用中传递的模型拥有实际模型的所有公共getter / setter属性。

ajax API打印出来的错误是“SyntaxError：JSON.parse错误：位置：0意外输入”，这也是我在网上找不到的东西。

感谢您提供任何可能的建议

Answer 1

我的猜测是你没有从控制器传递有效数据。尝试将空的js对象作为JSON结果return '{}'传递。请参阅下面的代码。

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

    return '{}';
}

如果这不会返回错误，那么您作为结果传递的数据不是有效的JSON数据。

Answer 2

试试这样：

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

我认为问题是我原始模型的复杂性和控制器方法的返回值的组合。

我在视图中的ajax调用最终看起来像

        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);
            },

        });

我的Controller方法看起来像

    [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);

    }

我的控制器方法接受的RationGridAjaxModel对象实际上只是我用来保存服务器端更新所需的值的新模型类。我不确定为什么我不能用我的原始模型做到这一点，在尝试传递我的原始模型时，控制器方法上的断点永远不会被击中。我猜这是原始模型中存在的某些方法或依赖项的问题。

Ajax调用失败并出现错误“SyntaxError：JSON.parse错误：位置：0处的意外输入”

3 个答案: