javascript - Ajax Jquery 并行调用不提供数据

Question

我正在尝试在我的 aspx 页面中实现 google 图表。 我有一个搜索按钮，它将显示两个饼图。我正在使用 Ajax Jquery 并行读取数据。这是我的代码

<div>
        <div style="text-align: left; padding-left: 30px;">
            <uc1:ucChartDateSelector ID="ucChartDateSelector1" runat="server"></uc1:ucChartDateSelector>
            <asp:Button ID="btnSearch" runat="server" Text="Search" AutoPostBack="false"
                OnClientClick="javascript:GenerateChartReport();" />

        </div>
    </div>

    <!--Div that will hold the dashboard-->


    <div id="dashboard_div">

        <!--Divs that will hold each control and chart-->
        <div id="chartLine_div" style="width: 600px; height: 400px;">
            <img src="../images/ajax-loader.gif" alt="Loading Report" />
        </div>


        <div id="visualization" style="width: 600px; height: 400px;">
            <img src="../images/ajax-loader.gif" alt="Loading Report" />
        </div>
    </div>

 <script type="text/javascript">


        var toDate = '<%=ucChartDateSelector1.ToDate%>';
        var fromdate = '<%=ucChartDateSelector1.FromDate%>';
        var reportFor = '<%=ucChartDateSelector1.ddlReportType.SelectedItem.Text%>';
        var periodFor = '<%=ucChartDateSelector1.ddlDateSelection.SelectedItem.Text%>';



        function GenerateChartReport() {
            $.ajax({
                type: 'POST',
                url: 'Dashboard.aspx/GetData', 
                contentType: 'application/json',
                dataType: 'JSON',
                async: true,
                success: function (response) {
                    TwoColumnReport(response.d, "visualization", "Google Charts Example");
                },
                error: function (error) {
                    console.log(error);
                }

            }),

            $.ajax({
                type: 'POST',
                url: 'Dashboard.aspx/ReadBooking',
                contentType: 'application/json',
                dataType: 'json',
                async: true,
                data: JSON.stringify({ fromDate: fromdate, toDate: toDate, reportFor: reportFor, periodFor: periodFor }),
                success: function (response) {
                    TwoColumnReport(response.d, "chartLine_div", "Google Dealy Example");

                },
                error: function (error) {
                    console.log(error);
                }

            });
        }
        function TwoColumnReport(dataValues, mainDivId, reportTitle) {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Column Name');
            data.addColumn('number', 'Column Value');

            for (var i = 0; i < dataValues.length; i++) {
                data.addRow([dataValues[i].ColumnName, dataValues[i].Value]);
            }
            new google.visualization.PieChart(document.getElementById(mainDivId)).
               draw(data, { title: reportTitle });
        }
    </script>`

这是后端代码

  [WebMethod]
    public static List<Data> GetData()
    {
        int milliseconds = 2000;
        Thread.Sleep(milliseconds);
        List<Data> dataList = new List<Data>();

        dataList.Add(new Data("Column 1", 100));
        dataList.Add(new Data("Column 2", 200));
        dataList.Add(new Data("Column 3", 300));
        dataList.Add(new Data("Column 4", 400));

        return dataList;
    }


    [WebMethod]
    public static List<Data> ReadBooking(String fromDate, String toDate, String reportFor, String periodFor)
    {
        logger.WriteInfoLog(String.Format("ReadBooking Summary.   Report type {0}-{3}  DateRange {1}- {2} ", reportFor, fromDate, toDate, periodFor));
        int milliseconds = 5000;
        Thread.Sleep(milliseconds);
        List<Data> dataList = new List<Data>();

        dataList.Add(new Data("row 1", 1400));
        dataList.Add(new Data("row 2", 3200));
        dataList.Add(new Data("row 3", 3100));
        dataList.Add(new Data("row 4", 4100));
        dataList.Add(new Data("row 5", 2400));
        return dataList;
    }

每当我单击搜索按钮时，Div 就会填充图表。但也有一些如何清理它的方法

Answer 1

您可以更改 WebMethod 以返回 string 并将 dataList 序列化为 json:

[WebMethod]
public static string GetData()
{
    int milliseconds = 2000;
    Thread.Sleep(milliseconds);
    List<Data> dataList = new List<Data>();

    dataList.Add(new Data("Column 1", 100));
    dataList.Add(new Data("Column 2", 200));
    dataList.Add(new Data("Column 3", 300));
    dataList.Add(new Data("Column 4", 400));

    var jsonSerialiser = new JavaScriptSerializer();
    var jsonString = jsonSerialiser.Serialize(dataList);

    return jsonString;
}

然后您的 ajax 帖子，关于 success: function(response){}， 响应将是列表