WebServices.cs代码：<! 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" > < head runat ="server" > < title > jquery跨域调用WebService(getJson) </ title > < style type ="text/css" > * { font : 12px 宋体 ; margin : 0px ; padding : 0px ; } body { padding : 5px ; } #container .search { height : 20px ; } #container .result { margin-top : 5px ; } #txtUserName { float : left ; } #btnSearch { float : left ; margin : 0px 0px 0px 5px ; width : 78px ; height : 16px ; text-align : center ; line-height : 16px ; background-color : #eee ; border : solid 1px #BABABA ; cursor : pointer ; } #btnSearch:hover { width : 76px ; height : 14px ; line-height : 14px ; background-color : #fff ; border-width : 2px ; } .mark { color : Blue ; } </ style > < script src ="Scripts/jquery-1.4.1.min.js" type ="text/javascript" ></ script > < script type ="text/javascript" > // 用户信息(全局) var userData = { // WebServices地址(GetUserList=方法名称,?jsoncallback=?--必须包含) requestUrl: " http://localhost:54855/PersonalServices.asmx/GetUserList?jsoncallback=? " , // 方法参数(用户名可用","分隔开来查询多个用户信息) requestParams: { userName: null }, // 回调函数 requestCallBack: function (json) { if (json.ResponseStatus == 1 ) { // 成功获取数据 var addRow = function (key, value) { return " <span> " + key + " ：</span><span class=\"mark\"> " + value + " </span><br/> " ; } userData.resultData = json.ResponseData; var resultHtml = "" ; $(userData.resultData).each( function () { resultHtml += addRow( " 姓名 " , this .Name); resultHtml += addRow( " 年龄 " , this .Age); resultHtml += addRow( " 性别 " , this .Sex); resultHtml += addRow( " 备注 " , this .Remark); resultHtml += " <br/> " ; }); $( " .result " ).html(resultHtml); } else $( " .result " ).html(json.ResponseDetails); // 无数据或者后台处理失败！ }, // 查询得到的数据 resultData: null }; $( function () { // 绑定文本框的键盘事件 $( " #txtUserName " ).keyup( function () { if ($.trim($( this ).val()) == "" ) { $( " .result " ).html( " 请输入查询用户名！ " ); } else { userData.requestParams.userName = $( this ).val(); $( " .result " ).html( "" ); } }); // 绑定查询按钮单机事件 $( " #btnSearch " ).click( function () { if (userData.requestParams.userName) { $.getJSON(userData.requestUrl, userData.requestParams, userData.requestCallBack); } }); }); </ script > </ head > < body > < form id ="form1" runat ="server" > < div id ="container" > < div class ="search" > < input type ="text" id ="txtUserName" />< div id ="btnSearch" > 查 询 </ div > </ div > < div class ="result" > </ div > </ div > </ form > </ body > </ html >
WebService项目配置文件：using System; using System.Collections.Generic; using System.Web; using System.Web.Services; #region 命名空间 using Newtonsoft.Json; #endregion namespace WebService { /// <summary> /// PersonalServices 的摘要说明 /// </summary> [WebService(Namespace = " http://tempuri.org/ " )] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.ComponentModel.ToolboxItem( false )] public class PersonalServices : System.Web.Services.WebService { #region 获取用户信息 [WebMethod] public void GetUserList( string userName) { List < Personal > m_PersonalList = new List < Personal > (); string [] strArr = userName.Split( ' , ' ); foreach ( string item in strArr) { Personal m_Personal = GetUserByName(item); if (m_Personal != null ) { m_PersonalList.Add(m_Personal); } } ResponseResult responseResult = new ResponseResult(); if (m_PersonalList.Count == 0 ) { responseResult.ResponseDetails = " 没有查到该用户！ " ; responseResult.ResponseStatus = 0 ; } else { responseResult.ResponseData = m_PersonalList; responseResult.ResponseDetails = " 查询用户信息成功！ " ; responseResult.ResponseStatus = 1 ; } string jsoncallback = HttpContext.Current.Request[ " jsoncallback " ]; // 返回数据的方式 // 其中将泛型集合使用了Json库(第三方序列json数据的dll)转变成json数据字符串 string result = jsoncallback + " ( " + JsonConvert.SerializeObject(responseResult, Formatting.Indented) + " ) " ; HttpContext.Current.Response.Write(result); HttpContext.Current.Response.End(); } #endregion #region 模拟数据库处理结果 /// <summary> /// 根据用户名查询用户 /// </summary> /// <param name="userName"> 用户名 </param> /// <returns></returns> Personal GetUserByName( string userName) { List < Personal > m_PersonalList = new List < Personal > (); m_PersonalList.Add( new Personal() { Id = " 01 " , Name = " liger_zql " , Sex = " 男 " , Age = 21 , Remark = " 你猜...... " }); m_PersonalList.Add( new Personal() { Id = " 02 " , Name = " 漠然 " , Sex = " 女 " , Age = 22 , Remark = " 猜不透...... " }); foreach (Personal m_Personal in m_PersonalList) { if (m_Personal.Name == userName) { return m_Personal; } } return null ; } #endregion #region json数据序列化所需类 /// <summary> /// 处理信息类 /// ResponseData--输出处理数据 /// ResponseDetails--处理详细信息 /// ResponseStatus--处理状态 /// -1=失败,0=没有获取数据,1=处理成功！ /// </summary> class ResponseResult { public List < Personal > ResponseData { get ; set ; } public string ResponseDetails { get ; set ; } public int ResponseStatus { get ; set ; } } /// <summary> /// 用户信息类 /// </summary> class Personal { public string Id { get ; set ; } public string Name { get ; set ; } public int Age { get ; set ; } public string Sex { get ; set ; } public string Remark { get ; set ; } } #endregion } }
< system.web > <!-- 提供Web服务访问方式 --> < webServices > < protocols > < add name ="HttpSoap" /> < add name ="HttpPost" /> < add name ="HttpGet" /> < add name ="Documentation" /> </ protocols > </ webServices > </ system.web >
由于使用jquery.getJson的方式调用Web服务后，传递中文时会造成中文乱码问题:
所以在配置文件中应配置如下内容：
< system.web > <!-- 设定传参乱码问题 --> < globalization fileEncoding ="utf-8" requestEncoding ="utf-8" responseEncoding ="utf-8" /> </ system.web >
源码下载：http://files.cnblogs.com/zengqinglei/JqCrossDomain.zip
扫一扫
253
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
