Ajax获取/发布相同的方法

Question

我正在尝试使用ajax Get方法从我的控制器调用服务器方法，其中我提供了数据。 方法接受参数确实有些工作并返回列表。我想使用相同的方法发布。

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

我的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);
        }
});

我的帖子方法有一些像这样的谷歌图表：

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

我无法弄清楚我是怎么做到的。请告诉我任何方便的方式。感谢

Answer 1

这是我的解决方案，我使用AJAX调用创建了示例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" />

制作AJAX POST和GET的JQuery代码 -

@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>
}

确保存在正确的Route Config条目 -

 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 -

时

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。 获取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);
        }
    });