Ajax Jquery並行調用不提供數據

我想在我的aspx頁面中實現一個谷歌圖表。我有一個搜索按鈕，它將顯示兩個餅圖。我正在使用Ajax Jquery來讀取並行數據。這裏是我的代碼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; 
    }

當過我點擊搜索按鈕，該事業部將充滿圖表。但一些如何被清理過

來源

2016-01-13 makdu

的問題是與回傳。
修改後的JavaScript代碼爲return false。

function GenerateChartReport() { 
    return false; 
}

和去除AutoPostBack="false"從asp:button

<asp:Button ID="btnSearch" runat="server" Text="Search" OnClientClick="return GenerateChartReport();" />

來源

2016-01-13 23:36:31 makdu

你可以改變你的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; 
}

那麼你的阿賈克斯後，在success: function(response){} ， response將成爲名單

來源

2016-01-14 00:05:27 Logar314159

Ajax Jquery並行調用不提供數據

回答

相關問題