你可以使用jQuery ajax从Webservice中检索数据吗?

时间:2013-08-15 18:41:07

标签: c# jquery asp.net ajax web-services

我正在尝试从SQL Server数据库中检索数据,并使用jQuery ajax来执行此操作。我需要将这些数据带入一些jqPlot图表,并认为这是最好的方法。如果有更好的方法,请告诉我。

这是我目前的代码:

的Javascript / jQuery的:

$(document).ready(function () {

$(".datepicker").datepicker();

$(".submitButton").click(handleSubmitButton);

});      //end of document ready

function handleSubmitButton() {

   var AnDParms = new Object();
   AnDParms.startDate = $('.start-date').val();
   AnDParms.endDate = $('.end-date').val();
   AnDParms.facility = $('.FacilityDDL').val();

   var DTO = { 'parameters': AndParms };

   $.ajax({
       type: "GET",
       contentType: "application/json; charset=utf-8",
       data: JSON.stringify(DTO),
       url: "GetAdmitsDischarges.asmx.cs/GetAandD",
       dataType: "json",
       success: function (data) {
           alert("Data: " + data.d);
           // do chart stuff here.
       },
       error: function (data) {
           alert("Error!" + data.d);
       } //end of success
   }); //end of ajax call
} //end of handleSubmitButton function

网络服务(GetAdmitsDischarges.asmx.cs):

namespace DashboardTest2010
{
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    [ScriptService]
    public class GetAdmitsDischarges : WebService
    {
        public class AnDParms
        {
            public string startDate { get; set; }
            public string endDate { get; set; }
            public string facility { get; set; }
        }

        public class AnDReturns
        {
            public string Admits { get; set; }
            public string Discharges { get; set; }
        }

        [WebMethod]
        public string GetAandD(AnDParms parameters)
        {
           //StringBuilder results = new StringBuilder();
           AnDReturns resultsObj = new AnDReturns();
           resultsObj.Admits = "0";
           resultsObj.Discharges = "0";
           string results = "";

           string connect = (the data connection string)
           StringBuilder query = new StringBuilder();
           query.Append("Select 'Admissions' SeriesType,");
           //the rest of the query.

           using (SqlConnection conn = new SqlConnection(connect))
           {
               using (SqlCommand cmd = new SqlCommand(query.ToString(), conn))
               {
                   cmd.Parameters.AddWithValue("StartDate", parameters.startDate.ToString());
                   cmd.Parameters.AddWithValue("EndDate", parameters.endDate.ToString());
                   cmd.Parameters.AddWithValue("FacilityID", parameters.facility.ToString());

                   SqlDataReader rdr = cmd.ExecuteReader();

                   if (rdr.HasRows)
                   {
                       while (rdr.Read())
                       {
                           if (rdr["SeriesType"].ToString() == "Admissions")
                           {
                               resultsObj.Admits = rdr["SeriesCount"].ToString();
                           }
                           if (rdr["SeriesType"].ToString() == "Discharges")
                           {
                               resultsObj.Discharges = rdr["SeriesCount"].ToString();
                           }
                       }
                       results = JsonConvert.SerializeObject(resultsObj);
                   }
               }
           }
           return results;
       }
   }
}

标记只是一个简单的页面,其中包含2个日期字段(设置为datepickers),1个下拉列表(设施)和一个提交按钮。这是我的脚本标签,以确保我拥有我需要的一切:

<script type="text/javascript" src="js/jqPlot/jquery.jqplot.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqPlot/jquery.jqplot.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript" src="js/DashboardTest.js"></script>

“jquery.js”是jqPlot附带的jquery。我必须支持IE 7+(因此json2.js)DashboardTest.js是上面的javascript。

运行此操作时没有任何操作,单击提交按钮时不会显示警报。任何帮助将非常感激。如果您对此感到疑惑,我的系统管理员不允许我安装Fiddle ......

1 个答案:

答案 0 :(得分:2)

在调用WebService时,请使用GetAdmitsDischarges.asmx页面作为网址,而不是代码隐藏GetAdmitsDischarges.asmx.cs页面。

还有一件事。您正在执行GET请求,默认情况下Web服务不允许它。您可能需要添加

<webServices>
   <protocols>
      <add name="HttpGet"/>
   </protocols>
</webServices>

到你的web.config。