首页 > 代码库 > ajax+webservice解决方案
ajax+webservice解决方案
webconfig配置
在<system.web>节点下添加
<webServices>
<protocols>
<add name="HttpSoap"/>
<add name="HttpPost"/>
<add name="HttpGet"/>
<add name="Documentation"/>
</protocols>
</webServices>
js界面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><script src="http://www.mamicode.com/js/jquery-1.4.2.js" type="text/javascript"></script><script src="http://www.mamicode.com/js/jquery-1.6.4.min.js"></script><script src="http://www.mamicode.com/js/jquery.mobile-1.0.1.min.js"></script><link rel="stylesheet" href="http://www.mamicode.com/css/jquery.mobile-1.0.1.min.css"><head runat="server"> <title>通讯录</title></head><style type="text/css"> .circle{ width:100px; height:100px; border-radius:50%; overflow:hidden; -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.5); -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.5); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); background-color :#FFFFFF; }</style><script type="text/javascript"> $(document).ready(pageLoad); // 载入时进行执行的方法 function pageLoad() { BindDataSet(); } function GetXXByID( ID) { $.ajax({ type: "POST", async: false, url: "http://localhost:43070/Service1.asmx/GetXXByID", data: {ID:12}, dataType: ‘xml‘, //返回的类型为XML ，和前面的Json，不一样了 success: function(result) { //演示一下捕获 try { var str = ""; $(result).find("Table1").each(function() { alert("123");// $(‘ul‘).append("<li><a href=http://www.mamicode.com/‘XX.aspx?id=" + $(this).find("ID").text() + "‘ rel=‘external‘ > <img class=‘circle‘ src=http://www.mamicode.com/‘" + $(this).find("Img").text() + "‘ /> <h2>联系人：" + $(this).find("Name").text() + "</h2>"// + "<p>联系电话：" + $(this).find("Phone").text() + "</p></a></li>"); }); // $("ul").listview("refresh") } catch (e) { alert(e); return; } }, error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数 if (status == ‘error‘) { alert(status); } } }); } function BindDataSet() { $.ajax({ type: "POST", async: false, url: "http://localhost:43070/Service1.asmx/GetDataSet", data: "{}", dataType: ‘xml‘, //返回的类型为XML ，和前面的Json，不一样了 success: function(result) { //演示一下捕获 try { var str = ""; $(result).find("Table1").each(function() { $(‘ul‘).append("<li><a onclick=‘GetXXByID(" + $(this).find("ID").text() + ")‘ href=‘#‘ rel=‘external‘ > <img class=‘circle‘ src=http://www.mamicode.com/‘" + $(this).find("Img").text() + "‘ /> <h2>联系人：" + $(this).find("Name").text() + "</h2>" + "<p>联系电话：" + $(this).find("Phone").text() + "</p></a></li>"); }); $("ul").listview("refresh") } catch (e) { alert(e); return; } }, error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数 if (status == ‘error‘) { alert(status); } } }); } function BindCallHello() { $.ajax({ type: "post", //访问WebService使用Post方式请求 url: "http://localhost:43070/Service1.asmx/HelloWorld", //调用Url(WebService的地址和方法名称组合---WsURL/方法名) data: {}, //这里是要传递的参数，为Json格式{paraName:paraValue} contentType: "Application/Json", // 发送信息至服务器时内容编码类型 beforeSend: function(XMLHttpRequest) { XMLHttpRequest.setRequestHeader("Accept", "Application/Json"); // 接受的数据类型。(貌似不起作用，因为WebService的请求/返回 类型是相同的，由于请求的是Json，所以，返回的默认是Json) }, success: function(data) { var jsonValue = http://www.mamicode.com/data;"#backData").html(returnText); // 输出服务器端返回数据 } }); }</script><body> <div data-role="page"> <div data-role="header"> <h1>通讯录</h1> </div> <div data-role="content" > <ul id="listview1" data-role="listview" data-autodividers="true" data-inset="true" data-filter="true"> </ul> </div> <div data-role="footer" class="ui-btn" style=" position:fixed; top:90%"> <a href="http://www.mamicode.com/#" data-role="button">添加联系人</a> </div></div></div> </body></html>webservice
using System;using System.Collections;using System.ComponentModel;using System.Data;using System.Linq;using System.Web;using System.Web.Services;using System.Web.Services.Protocols;using System.Xml.Linq;namespace WS_Server{ /// <summary> /// Service1 的摘要说明 /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [ToolboxItem(false)] // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。 [System.Web.Script.Services.ScriptService] //注释必须去掉 public class Service1 : System.Web.Services.WebService { [WebMethod(true,Description="test")] public string HelloWorld() { return "Hello World"; } [WebMethod(true, Description = "根据id获取联系人的特定信息")] public DataSet GetXXByID(string ID) { DataSet ds = new DataSet(); DataTable dt = new DataTable(); dt.Columns.Add("ID", Type.GetType("System.String")); dt.Columns.Add("Img", Type.GetType("System.String")); dt.Columns.Add("Name", Type.GetType("System.String")); dt.Columns.Add("Phone", Type.GetType("System.String")); DataRow dr = dt.NewRow(); dr["ID"] = "1"; dr["Img"] = "img/header.jpg"; dr["Name"] = "哈哈"; dr["Phone"] = "15584373215"; dt.Rows.Add(dr); ds.Tables.Add(dt); return ds; } [WebMethod] public DataSet GetDataSet() { //DataSet ds = new DataSet(); //DataTable dt = new DataTable(); //dt.Columns.Add("ID", Type.GetType("System.String")); //dt.Columns.Add("Value", Type.GetType("System.String")); //DataRow dr = dt.NewRow(); //dr["ID"] = "1"; //dr["Value"] = "新年快乐"; //dt.Rows.Add(dr); //dr = dt.NewRow(); //dr["ID"] = "2"; //dr["Value"] = "万事如意"; //dt.Rows.Add(dr); //ds.Tables.Add(dt); //return ds; DataSet ds = new DataSet(); DataTable dt = new DataTable(); dt.Columns.Add("ID", Type.GetType("System.String")); dt.Columns.Add("Img", Type.GetType("System.String")); dt.Columns.Add("Name", Type.GetType("System.String")); dt.Columns.Add("Phone", Type.GetType("System.String")); DataRow dr = dt.NewRow(); dr["ID"] = "1"; dr["Img"] = "img/header.jpg"; dr["Name"] = "哈哈"; dr["Phone"] = "15584373215"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["ID"] = "2"; dr["Img"] = "img/header.jpg"; dr["Name"] = "哈哈1"; dr["Phone"] = "15584373215"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["ID"] = "2"; dr["Img"] = "img/header.jpg"; dr["Name"] = "哈哈1"; dr["Phone"] = "15584373215"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["ID"] = "2"; dr["Img"] = "img/header.jpg"; dr["Name"] = "哈哈1"; dr["Phone"] = "15584373215"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["ID"] = "2"; dr["Img"] = "img/header.jpg"; dr["Name"] = "哈哈1"; dr["Phone"] = "15584373215"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["ID"] = "2"; dr["Img"] = "img/header.jpg"; dr["Name"] = "哈哈1"; dr["Phone"] = "15584373215"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["ID"] = "2"; dr["Img"] = "img/header.jpg"; dr["Name"] = "哈哈1"; dr["Phone"] = "15584373215"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["ID"] = "2"; dr["Img"] = "img/header.jpg"; dr["Name"] = "哈哈1"; dr["Phone"] = "15584373215"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["ID"] = "2"; dr["Img"] = "img/header.jpg"; dr["Name"] = "哈哈1"; dr["Phone"] = "15584373215"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["ID"] = "2"; dr["Img"] = "img/header.jpg"; dr["Name"] = "哈哈1"; dr["Phone"] = "15584373215"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["ID"] = "2"; dr["Img"] = "img/header.jpg"; dr["Name"] = "哈哈1"; dr["Phone"] = "15584373215"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["ID"] = "2"; dr["Img"] = "img/header.jpg"; dr["Name"] = "哈哈1"; dr["Phone"] = "15584373215"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["ID"] = "2"; dr["Img"] = "img/header.jpg"; dr["Name"] = "哈哈1"; dr["Phone"] = "15584373215"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["ID"] = "2"; dr["Img"] = "img/header.jpg"; dr["Name"] = "哈哈1"; dr["Phone"] = "15584373215"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["ID"] = "2"; dr["Img"] = "img/header.jpg"; dr["Name"] = "哈哈1"; dr["Phone"] = "15584373215"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["ID"] = "2"; dr["Img"] = "img/header.jpg"; dr["Name"] = "哈哈1"; dr["Phone"] = "15584373215"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["ID"] = "2"; dr["Img"] = "img/header.jpg"; dr["Name"] = "哈哈1"; dr["Phone"] = "15584373215"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["ID"] = "2"; dr["Img"] = "img/header.jpg"; dr["Name"] = "哈哈1"; dr["Phone"] = "15584373215"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["ID"] = "2"; dr["Img"] = "img/header.jpg"; dr["Name"] = "哈哈1"; dr["Phone"] = "15584373215"; dt.Rows.Add(dr); ds.Tables.Add(dt); return ds; } }}后来在一个不起眼的小站找到一个帖子，某个人的一个建议提醒了我。 我原来的代码是这样写的： 错误代码
复制代码 代码如下:
$.ajax({ type: "post", url: "_service.asmx/getDataFromATable", data:" { tablename: temp }",
dataType: "XML" ...
dataType: "XML" ...
WS是这样写的： webservice
复制代码 代码如下:
[WebMethod] public DataSet getDataFromATable(string tablename) { DataSet ds = new DataSet();
using (SqlConnection con=new SqlConnection(connectionString)) {
con.Open(); SqlCommand cmd = new SqlCommand(); cmd.Connection = con;
cmd.CommandText = string.Format("select * from {0}",tablename);
SqlDataAdapter da = new SqlDataAdapter(cmd); da.Fill(ds); }
return ds; } [code]
网上搜到的，都说如果是无参数的WS，用上面的data:"{}"是没有错的，但有参的这样传会出错。 其实很简单，只需要做一点小小的修改就可以了
正确代码 [code] $.ajax({ type: "post", url: "_service.asmx/getDataFromATable", data: { tablename: temp }, dataType: "XML", ...
using (SqlConnection con=new SqlConnection(connectionString)) {
con.Open(); SqlCommand cmd = new SqlCommand(); cmd.Connection = con;
cmd.CommandText = string.Format("select * from {0}",tablename);
SqlDataAdapter da = new SqlDataAdapter(cmd); da.Fill(ds); }
return ds; } [code]
网上搜到的，都说如果是无参数的WS，用上面的data:"{}"是没有错的，但有参的这样传会出错。 其实很简单，只需要做一点小小的修改就可以了
正确代码 [code] $.ajax({ type: "post", url: "_service.asmx/getDataFromATable", data: { tablename: temp }, dataType: "XML", ...
这是一个微不足道的小细节。 我想说的是，某些人，无论是牛人还是新手，不要盲目地转载别人的东西。
请转载一些正确的。
ajax+webservice解决方案
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。