jQuery跨域调用WebService
jQuery跨域调用WebService举例
html:
<!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>
WebServices.cs
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 == )
{
responseResult.ResponseDetails = "没有查到该用户！";
responseResult.ResponseStatus = ;
}
else
{
responseResult.ResponseData = m_PersonalList;
responseResult.ResponseDetails = "查询用户信息成功！";
responseResult.ResponseStatus = ;
}
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 = "",
Name = "liger_zql",
Sex = "男",
Age = ,
Remark = "你猜......"
});
m_PersonalList.Add(new Personal()
{
Id = "",
Name = "漠然",
Sex = "女",
Age = ,
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
}
}
WebService项目配置文件
<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>
调用截图如下：
最后附上源码：JqCrossDomain.zip
jQuery跨域调用WebService的更多相关文章
- jquery跨域调用wcf
使用jquery跨域调用wcf服务的时候会报如下错误 $.ajax({ url: 'http://localhost:28207/Service1.svc/GetData', method: 'get ...
- 跨域调用webservice
本人第一次在博客园写博客. 最近研究js的跨域调用,举个小例子. ASP.net 中webservice 源代码 /// <summary> /// Service1 的摘要说明 ...
- jQuery跨域调用Web API
我曾经发表了一篇关于如何开发Web API的博客,链接地址:http://www.cnblogs.com/guwei4037/p/3603818.html.有朋友说开发是会开发了,但不知道怎么调用啊? ...
- Jquery跨域调用
今天在项目中须要做远程数据载入并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发现JQuer ...
- ajax跨域调用webservice例子
[WebMethod(Description = "这是一个描述")] public void GetTIM() { try { SqlDataAdapter da = new S ...
- Jquery跨域调用后台方法
//前端JS function CallHandlerByJquery() { var url = "http://" + window.location.hostname + & ...
- ajax使用jsonp跨域调用webservice error错误信息"readyState":4,"status":200,"statusText":"success"
主要还是接口写有问题 至于ajax保持简洁写法即可 $.ajax({ dataType: 'jsonp', type: ‘get’, data: {}, url: '' })
- jquery Ajax跨域调用WebServices方法
由于公司需要开发一个手机页面,想提供给同事直接在手机上可以查询SAP资料.数据需要使用js调用webserver来获取. 因为初次使用Jquery调用Webserver,所以期间并不顺利.测试调用We ...
- Jquery的跨域调用
JQuery1.2后getJSON方法支持跨域读取json数据,原理是利用一个叫做jsonp的概念.当然,究其本质还是通过script标签动态加载js,似乎这是实现真正跨域的唯一方法. getJSON ...
随机推荐
- Gitlab，Mac下生成SSH Key
git是分布式的代码管理工具,远程的代码管理是基于ssh的,所以要使用远程的git则需要ssh的配置.简单的说,Git - 版本控制工具:Github是一个网站,提供给用户空间创建git仓储,保存 ...
- Git---报错：git Please move or remove them before you can merge 解决方案
场景: 当前在本地仓库lucky,因修改了123.txt的文件内容,需要将lucky分支push到远程Git库,在push前有其他的同事已删除了远程Git库中的123.txt文件.因此这时就产生了远程 ...
- Java8新特性--Optional
Java 8引入了一个新的Optional类.Optional类的Javadoc描述如下: 这是一个可以为null的容器对象.如果值存在则isPresent()方法会返回true,调用get()方法会 ...
- LOJ 103子串查找——用hash代替kmp算法
题意 给出两个字符串 $s_1,s_2$,求 $s_2$ 在 $s_1$ 中出现的次数. 分析 预处理出两个字符串的哈希值,再逐位比较. 时间复杂度为 $O(n+m)$,和 $kmp$ 算法一样. 可 ...
- c++ 构造函数执行顺序
开辟内存空间. 按照成员变量声明的顺序开始构造成员变量. 如果成员变量在初始化列表中, 就会执行该变量类型的拷贝构造函数. 如果成员变量没有在初始化列表中, 就会执行该变量类型的缺省构造函数. 进入函 ...
- 学到了武沛齐讲的Day14完
& 交 | 并 ^ 并-交 --------------------- 格式化 %s 字符串,数字,一切 %.4s 留前面4位 %d 数字 %f 小数保留6位 四舍五入 %0. ...
- myeclipse不同版本共存破解办法
我自己破解的是myeclipse10+myeclipse2018: 方法是:先破解myeclipse10.7,使用破解工具,到最后一步不关闭破解工具,再进行替换文件那一步,路径不选择10版本的,换成M ...
- LOJ P10114 数星星 stars 题解
每日一题 day7 打卡 Analysis 树状数组 由于题目中给的数据是按y轴排序,我们只需构建x轴的树状数组,也就是说我们只需统计星星i之前一共有多少个x坐标小于或等于Xi的星星,这个数值也就是星 ...
- parted分区命令
Parted是一个比fdisk更高级的工具,它支持多种分区表格式,包括MS-DOS和GPT.它允许用户创建,删除,调整大小,缩小,移动和复制分区,重新组织磁盘使用,以及将数据复制到新硬盘,但在缩小分区 ...
- linux产看磁盘信息命令-lsblk,blkid，dumpe2fs
一.lsblk命令用于列出所有可用块设备的信息,而且还能显示他们之间的依赖关系,但是它不会列出RAM盘的信息.块设备有硬盘,闪存盘,cd-ROM等等.lsblk命令包含在util-linux-ng包中 ...