使用jquery使用.net Web服务

我创建了这个从sql server db返回数据表的Web服务。 有人可以用jquery帮我显示它吗?

网络服务

[WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [ScriptService] public class WebService : System.Web.Services.WebService { DataTable dt = new DataTable(); [WebMethod] public DataTable dbAccess() { using (SqlConnection conn = new SqlConnection( ConfigurationManager.ConnectionStrings["localConnectionString"] .ConnectionString)) { using (SqlDataAdapter da = new SqlDataAdapter()) { conn.Open(); da.SelectCommand = new SqlCommand("SELECT VehicleMake FROM VehicleMakes", conn); da.Fill(dt); } conn.Close(); } return dt; } } 

这就是我对jquery的看法

  $(function () { $('#Button1').click(getData); }); function getData() { $.ajax({ type: "POST", url: "WebService.asmx/dbAccess", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (response) { // What goes here? }, failure: function (msg) { //error message } }); }  

在过去,当使用jQuery的asmx服务时,我使用了类似以下内容的post / json:

假设我有一个像这样的响应类:

  public ResponseClass { public string Message { get; set; } } 

和一个像这样的方法的Web服务:

  [WebMethod] [ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)] public ResponseClass PostResponse() { var response = new ResponseClass() {Message = "Hello World"}; return response; } 

一些像这样的HTML:

 

javascript:

 $.ajax({ url: '/MyService.asmx/PostResponse', data: "{}", type: "POST", cache: false, dataType: 'json', contentType: "application/json; charset=utf-8", success: function(msg) { var response = msg.d; //your response object $('#response').html(response.Message); //set the response div contents to the Message }, error: function(xhr, status, error) { alert(error); //do something if there is an error } }); 

万一有人来这个post寻找相同的答案我提供了我想出的。

我的Web服务与数据库通信,使用SqlDataReader读取表并将该数据加载到数据表中。 然后将每行存储在ArrayList中。

  [WebService(Namespace = "http://babyUnicorns.net/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [ScriptService] public class WebService : System.Web.Services.WebService { [WebMethod] public object dbAccess() { DataTable table = new DataTable("myTable"); ArrayList arl = new ArrayList(); using (SqlConnection conn = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["localConnectionString"].ConnectionString)) { using(SqlCommand comm = new SqlCommand("SELECT * FROM VehicleMakes",conn)) { conn.Open(); SqlDataReader reader = comm.ExecuteReader(); table.Load(reader); reader.Close(); conn.Close(); } } foreach(DataRow dRow in table.Rows) { arl.Add(dRow["VehicleMake"]+" "+dRow["VehicleMakeId"]); } return arl.ToArray(); } } 

使用jQuery ajax命令我将数组中返回的arrayList和foreach项追加到名为“output”的div中。 jQuery $ .each命令用于分离数组。 我通过阅读API找到了如何使用它。

  function getData() { $.ajax({ type: "POST", url: "WebService.asmx/dbAccess", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (msg) { var response = msg.d; $.each(response, function(index, value) { $('#output').append(value+'
'); }); }, failure: function (msg) { alert('failure'); } }); }

这将返回从数据库中提取的汽车列表。

 
// call the javascript function Find() //Javascript function Find() function Find() { $(document).ready(function () { $.ajax( { type: "POST", url: "Model/CustomerDTO.asmx/GetDetail", data: "{'nm':'" + $('#Text1').val() + "'}", // passing a parameter to retrive detail. contentType: "application/json; charset=utf-8", dataType: "json", success: function (msg) { var obj = jQuery.parseJSON(msg.d); // parsing of Json string to Javascript object. alert(obj.COMPANYADDRESS); //. anything(depends upon your Fieldname $('#RSSContent').html(obj.COMPANYADDRESS); // bind data to a div }, error: function () { alert('data could not be be found'); } }); }); }

你有多种选择

1)您可以从后端返回纯HTML,并在div标签上执行.html

2)使用stringbuild构造一个jsonp对象并返回到UI。 在UI中,您可以使用eval(响应)并解析对象。

如果您需要任何有关此信息,请告诉我。

我已经完成了两种方法。

这是我的代码,你可以这样做

 var jsonobj = eval('(' + tempstr + ')'); for (var i = 0; i < jsonobj.searchsuggest.items.item.length; i++) { }