webconfig配置
在<system.web>节点下添加
<!--此节点可允许脚本跨域调用webservice-->
<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="js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="js/jquery-1.6.4.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>
<link rel="stylesheet" href="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='XX.aspx?id=" + $(this).find("ID").text() + "' rel='external' > <img class='circle' src='" + $(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 οnclick='GetXXByID(" + $(this).find("ID").text() + ")' href='#' rel='external' > <img class='circle' src='" + $(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 = data;
//alert(jsonValue.d); // 输出Json
},
complete: function(XMLHttpRequest, textStatus) {
var returnText = XMLHttpRequest.responseText;
$("#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="#" 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", ...
这是一个微不足道的小细节。 我想说的是,某些人,无论是牛人还是新手,不要盲目地转载别人的东西。
请转载一些正确的。