Ajax使用相同方法进行get/post请求

Question

我正在尝试使用ajax Get方法从控制器调用服务器方法，其中我提供了数据。该方法接受参数并执行一些工作，然后返回一个列表。我想在post中使用同样的方法。

当我尝试这样做时，我遇到了未定义的错误。

我的Get方法如下：

$.ajax({
        traditional:true,
        type: "GET",
        url: "/Graphs/chartData",
        data: { id: 0, WeatherAll: 0, paramSites: 0 },
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (r) {
            alert(r);
        },
        failure: function (r) {

            alert(r.d);
        },
        error: function (r) {
            alert(r.d);
        }
});

我的POST方法中有一些谷歌图表，如下所示:

google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var options = {
            backgroundColor: 'transparent',
            title: 'Humidity/Temperature Measure',
        };
        var idSite = $('#DDLSites').val();
        var idWeatherALL = $('#DDLParameterWeatherAll').val();
        var idParamSites = $('#DDLParameterWeatherSites').val();
        $.ajax({
            traditional: true,
            type: "POST",
            url: "/Graphs/chartData",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                alert(r);
                var data = google.visualization.arrayToDataTable(r);
                var options = {
                    title: 'Humidity/Temperature Measure for Site 1',
                    'backgroundColor': 'transparent',
                    vAxis: {
                        title: 'Temperature/Humidity',
                    },
                    hAxis: {
                        title: 'Time',
                    },
                };
                var chart = new google.visualization.AreaChart($("#chart")[0]);
                chart.draw(data, options);
            },
            failure: function (r) {

                alert(r.d);
            },
            error: function (r) {
                alert(r.d);
            }
        });
    }

我的ChartData方法是：

[AcceptVerbs("Get", "Post")]
public JsonResult chartData(int id, int WeatherAll,int  paramSites)
{
    string ids = Convert.ToString(id) + Convert.ToString(WeatherAll) + Convert.ToString(paramSites);
    List<object> chartData = new List<object>();
    chartData.Add(new object[]
    {
        "Date Time", "Temp", "Humidity"
    });
        ////Some Code here
    return Json(chartData);
}

我无法弄清楚如何做到这一点。请告诉我任何方便的方法。谢谢。

- Saghir A. Khatri

---

你在哪里遇到了“undefined”错误？ - Regent

在ajax调用中，无论是Get还是Post方法都适用。 - Saghir A. Khatri

好的，我可以重新表述一下：问题中有72行代码。是哪一行（或哪几行）抛出了异常？ - Regent

在两种方法中，我都遇到了“error: function(r)”的问题。 - Saghir A. Khatri

你有检查过 Ajax 错误吗？error 参数的信息在文档中有提供。例如，我不知道警报 r 的奇怪（很可能不存在的）属性 d 有什么意义（它是 jqXHR 对象）。 - Regent

对于GET方法，您必须在控制器中设置JsonRequestBehavior.AllowGet。return Json(chartData, JsonRequestBehavior.AllowGet);并且在GET Ajax方法中删除**contentType: "application/json; charset=utf-8"**。 - Dawood Awan

Answer 1

这里是我的解决方案，我创建了带有AJAX调用的示例Action。

让控制器Action成为 -

[AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
public JsonResult Data(int id, string s)
{
    return Json("Test", JsonRequestBehavior.AllowGet);
}

让HTML中的按钮变为 -

<input type="button" value="GET" id="get" />
<input type="button" value="POST" id="post" />

JQuery代码实现AJAX的POST和GET请求 -

@section scripts{
<script>
    $(function() {
        $("#get").click(function() {
            $.ajax({
                traditional: true,
                type: "GET",
                url: "/home/data",
                data: { id: 2, s : 'Test'},
                success: function (r) {
                    alert(r);
                },
                failure: function (r) {

                    alert(r.d);
                },
                error: function (r) {
                    alert(r.d);
                }
            });
        });

        $("#post").click(function () {
            $.ajax({
                traditional: true,
                type: "POST",
                url: "/home/data",
                data: JSON.stringify({ id: 4, s: 'Test' }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    alert(r);
                },
                failure: function (r) {

                    alert(r.d);
                },
                error: function (r) {
                    alert(r.d);
                }
            });
        });
    })
</script>
}

确保正确的路由配置条目存在 -

 routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}/{s}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional, s = UrlParameter.Optional }
            );

当你进行AJAX GET请求时 -

当你进行AJAX POST请求时 -

- ramiramilu

---

我在使用Post ajax调用时遇到了“内部服务器错误”。顺便说一下，Get调用成功并显示数据。 - Saghir A. Khatri

你在我的实现中遇到错误了吗？顺便问一下，你尝试使用过JSON.Stringify()了吗？ - ramiramilu

Answer 2

对于GET方法，您需要在控制器中设置JsonRequestBehavior.AllowGet。

return Json(chartData, JsonRequestBehavior.AllowGet);

所以：

[AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
public JsonResult chartData(int id, int WeatherAll,int  paramSites)
{
    string ids = Convert.ToString(id) + Convert.ToString(WeatherAll) + Convert.ToString(paramSites);
    List<object> chartData = new List<object>();
    chartData.Add(new object[]
    {
        "Date Time", "Temp", "Humidity"
    });
        ////Some Code here
    return Json(chartData, JsonRequestBehavior.AllowGet);
}

请在 GET Ajax 方法中移除 contentType: "application/json; charset=utf-8"，因为发送到服务器的数据不是 JsonString。

GET Ajax

$.ajax({
        traditional:true,
        type: "GET",
        url: "/Graphs/chartData",
        data: { id: 0, WeatherAll: 0, paramSites: 0 },
        dataType: "json",
        success: function (r) {
            alert(r);
        },
        failure: function (r) {

            alert(r.d);
        },
        error: function (r) {
            alert(r.d);
        }
});

POST Ajax

    $.ajax({
        traditional: true,
        type: "POST",
        url: "/Graphs/chartData",
        data: JSON.stringify({id: 0, WeatherAll: 0, paramSites: 0 }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (r) {
            alert(r);
            var data = google.visualization.arrayToDataTable(r);
            var options = {
                title: 'Humidity/Temperature Measure for Site 1',
                'backgroundColor': 'transparent',
                vAxis: {
                    title: 'Temperature/Humidity',
                },
                hAxis: {
                    title: 'Time',
                },
            };
            var chart = new google.visualization.AreaChart($("#chart")[0]);
            chart.draw(data, options);
        },
        failure: function (r) {

            alert(r.d);
        },
        error: function (r) {
            alert(r.d);
        }
    });

- Dawood Awan