打开自己的博客仔细浏览了一番,发现已经好久没有写博客了,由于最近一直比较忙碌懈怠了好多。默默反省三分钟.......言归正传,现在就对最近在学习webservice的过程中遇到的几种类型的问题中我的理解和解决方案。对于webservice大家肯定知道,它是一种使不同站点之间可以相互通信的技术,可以理解为一种接口。一个站点可以通过其它站点提供的webservice接口获得其它站点提供的相应服务。webservice使用起来非常小巧,轻便被很多站点所使用。对于webservice我不做过多说明,webservice的安全问题,如何使webservice更加安全,自己可以查找相关资料自行学习。此次主要讲解使用JQuery请求webservice服务,并且如何处理返回的不同格式的数据。

1.Ajax请求webservice返回DataSet格式数据,以下是测试时编写的webservice服务

      [WebMethod(Description="获得用户DataSet格式数据")]
public DataSet GetUserInfoDataSet()
{
DataSet dataSet= null;
using (SqlConnection conn = new SqlConnection(@"Data Source=.\SQLEXPRESS;Initial CataLog=UserInfo;User Id=sa;Password=123"))
{
conn.Open();
using (SqlCommand cmd = conn.CreateCommand())
{
cmd.CommandText = "select * from Users";
SqlDataAdapter sda = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
sda.Fill(ds);
dataSet = ds;
}
}
return dataSet;
}

我们可以直接在浏览器中访问该服务观察获得DataSet数据格式是什么样式的,然后通过js操作 结果集中包含了多个Table对象

<NewDataSet xmlns="">
<Table diffgr:id="Table1" msdata:rowOrder="">
<Id></Id>
<UserName>EWR</UserName>
<Age></Age>
<PassWord></PassWord>
<Email>RTRET</Email>
</Table>
<Table diffgr:id="Table2" msdata:rowOrder="">
<Id></Id>
<UserName>ER</UserName>
<Age></Age>
<PassWord></PassWord>
<Email>FDGDF</Email>
</Table>
</NewDataSet>

处理方法:

        function getDataSet()
{
$.ajax({
url: "http://localhost:8793/SoapWebService.asmx/GetUserInfoDataSet",
type: "POST",
data: "{}",
dataType: "xml",
success: function (result) {
var tr = "<tr align='center' style='background:#0094ff;color:white'><td>用户名</td><td>年龄</td><td>密码</td><td>邮箱</td></tr>";
$(result).find("Table").each(function () {
tr += "<tr><td>" + $(this).find("UserName").text() + "</td><td>" + $(this).find("Age").text() + "</td><td>" + $(this).find("PassWord").text() + "</td><td>" + $(this).find("Email").text() + "</td></tr>";
})
document.getElementById("tblist").innerHTML = tr;
},
error: function (result, status) {
if (status == "error") {
alert("数据读取失败");
}
}
})
}

2.Ajax请求webservice返回Json格式数据,在生成Json数据之前 以List<object>泛型集合装载数据。Ajax在请求时注意几个方面,type:“json”,dataType:"application/json;charset=utf-8" 浏览器向服务器发出请求时,会在请求报文中加上这段内容,告诉浏览器,返回数据的格式为Json格式,这句是必不可少的。Json数据中每一行数据都是一个对象.

<ArrayOfUsers xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://tempuri.org/">
<Users>
<UserName>EWR</UserName>
<Age></Age>
<PassWord></PassWord>
<Email>RTRET</Email>
</Users>
<Users>
<UserName>ER</UserName>
<Age></Age>
<PassWord></PassWord>
<Email>FDGDF</Email>
</Users>
<Users>
</ArrayOfUsers>
        [WebMethod(Description = "获得用户Json格式数据")]
[ScriptMethod(UseHttpGet=false)]
public List<Users> GetUserInfoJson()
{
List<Users> dataJson = null;
using (SqlConnection conn = new SqlConnection(@"Data Source=.\SQLEXPRESS;Initial CataLog=UserInfo;User Id=sa;Password=123"))
{
conn.Open();
using (SqlCommand cmd = conn.CreateCommand())
{
cmd.CommandText = "select * from Users";
SqlDataReader sda = cmd.ExecuteReader();
List<Users> list = new List<Users>();
while (sda.Read())
{
list.Add(new Users { UserName = sda[].ToString(), Age = sda[].ToString(), PassWord = sda[].ToString(),Email=sda[].ToString() });
}
dataJson = list;
}
}
return dataJson;
}

处理方法:

      function GetJson()
{
$.ajax({
type: "post",
url: 'http://localhost:8793/SoapWebService.asmx/GetUserInfoJson',
dataType: 'json',
contentType:"application/json;charset=utf-8",
data: '{}',
async: false,
success: function (result) {
var datas = result.d;
var tr = "<tr align='center' style='background:#0094ff;color:white'><td>用户名</td><td>年龄</td><td>密码</td><td>邮箱</td></tr>";
for (var i = ; i < datas.length; i++) {
tr += "<tr><td>" + datas[i].UserName + "</td><td>" + datas[i].Age + "</td><td>" + datas[i].PassWord + "</td><td>" + datas[i].Email + "</td></tr>";
}
document.getElementById("tblist").innerHTML = tr;
}
});
}

3.Ajax请求webservice返回对象时的处理方法,其实也是一样 将返回的对象以Json数据格式返回

//返回的xml格式数据
<Users xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://tempuri.org/">
<UserName>jim</UserName>
<Age></Age>
<PassWord></PassWord>
<Email>@qq.com</Email>
</Users>

经过Json格式化后的数据

{"d":{"__type":"_01WebProject.Users","UserName":"jim","Age":"","PassWord":"","Email":"3333@qq.com"}}

处理方法:

  function GetObj() {
$.ajax({
type: "post",
url: 'http://localhost:8793/SoapWebService.asmx/GetUsersObj',
dataType: 'json',
contentType: "application/json;charset=utf-8",
data: '{}',
async: false,
success: function (result) {
var datas = result.d;
var tr = "<tr align='center' style='background:#0094ff;color:white'><td>用户名</td><td>年龄</td><td>密码</td><td>邮箱</td></tr>";
tr += "<tr><td>" + datas.UserName + "</td><td>" + datas.Age + "</td><td>" + datas.PassWord + "</td><td>" + datas.Email + "</td></tr>";
document.getElementById("tblist").innerHTML = tr;
}
});
}

3.Ajax请求webservice返回Hashtable格式数据。

 [WebMethod(Description = "获取Hashtable格式数据")]
public Hashtable GetUserHashtable()
{
Hashtable hash = new Hashtable();
Users user = new Users()
{
UserName = "jim",
Age = "",
PassWord = "",
Email = "3333@qq.com"
};
hash.Add("", user);
return hash;
}

处理方式:

  function GetHashtable()
{
$.ajax({
type: "post",
url: 'http://localhost:8793/SoapWebService.asmx/GetUserHashtable',
dataType: 'json',
contentType: "application/json;charset=utf-8",
data: '{}',
async: false,
success: function (result) {
var datas = result.d[""];
var tr = "<tr align='center' style='background:#0094ff;color:white'><td>用户名</td><td>年龄</td><td>密码</td><td>邮箱</td></tr>";
tr += "<tr><td>" + datas.UserName + "</td><td>" + datas.Age + "</td><td>" + datas.PassWord + "</td><td>" + datas.Email + "</td></tr>";
document.getElementById("tblist").innerHTML = tr;
}
});
}

归纳总结:

总结:

1、JQuery与WebService之间以JSON作为数据交换形式的时候,contentType: "application/json; charset=utf-8"是必须指定的。

要不然WebService不知道以何种数据作为转换。

2、JQuery调用WebService返回复杂数据类型并不一定需要类型为可序列化。

3、WebService返回的JSON数据通过".d"获取如上面测试中的alert(json.d)

JQuery请求WebService返回数据的几种处理方式的更多相关文章

  1. 浅谈WebService返回数据效率对比

    原文链接 http://www.dotnetgeek.cn/xuexiwebservice1.html 一.什么是WebService: 简单通俗来说,就是企业之间.网站之间通过Internet来访问 ...

  2. charles技能之修改请求参数/返回数据(map Local、Rewrite、Breakpoints)

    之前一直用postman调接口比较多,但有时候想要去修改APP的页面展示,造数据又会比较麻烦,此时可以用以下三种方法修改请求参数或修改响应: map Local(本地映射).Breakpoints(打 ...

  3. jQuery异步获取json数据的2种方式

    jQuery异步获取json数据有2种方式,一个是$.getJSON方法,一个是$.ajax方法.本篇体验使用这2种方式异步获取json数据,然后追加到页面. 在根目录下创建data.json文件: ...

  4. springMVC返回数据的四种方式

    转自:https://blog.csdn.net/itcats_cn/article/details/82119673 springMVC返回数据的四种方式:第一种,通过request.setAttr ...

  5. asp.net core 使用中间件拦截请求和返回数据,并对数据进行加密解密。

    原文:asp.net core 使用中间件拦截请求和返回数据,并对数据进行加密解密. GitHub demo https://github.com/zhanglilong23/Asp.NetCore. ...

  6. 使用Typescript重构axios(二十)——请求取消功能:实现第一种使用方式

    0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...

  7. Android数据的四种存储方式SharedPreferences、SQLite、Content Provider和File (三) —— SharePreferences

    除了SQLite数据库外,SharedPreferences也是一种轻型的数据存储方式,它的本质是基于XML文件存储key-value键值对数据,通常用来存储一些简单的配置信息.其存储位置在/data ...

  8. Android数据的四种存储方式SharedPreferences、SQLite、Content Provider和File (四) —— ContentProvider

    ContentProvider是安卓平台中,在不同应用程序之间实现数据共享的一种机制.一个应用程序如果需要让别的程序可以操作自己的数据,即可采用这种机制.并且此种方式忽略了底层的数据存储实现,Cont ...

  9. Android数据的四种存储方式SharedPreferences、SQLite、Content Provider和File (二) —— SQLite

    SQLite是一种转为嵌入式设备设计的轻型数据库,其只有五种数据类型,分别是: NULL: 空值 INTEGER: 整数 REAL: 浮点数 TEXT: 字符串 BLOB: 大数据 在SQLite中, ...

随机推荐

  1. 【POJ3468】【zkw线段树】A Simple Problem with Integers

    Description You have N integers, A1, A2, ... , AN. You need to deal with two kinds of operations. On ...

  2. php文件加锁 lock_sh ,lock_ex

    文件锁有两种:共享锁和排他锁,也就是读锁(LOCK_SH)和写锁(LOCK_EX) 文件的锁一般这么使用: $fp = fopen("filename", "a" ...

  3. iOS 数据持久性存储-属性列表

    iOS上常用四种数据存取方法有: 1.属性列表 2.对象归档 3.iOS的嵌入式关系数据库(SQLite3) 4.苹果公司提供持久性共聚Core Data 由于苹果公司的沙盒机制,每个应用程序都有自己 ...

  4. 《bunzip2命令》-linux命令五分钟系列之八

    本原创文章属于<Linux大棚>博客. 博客地址为http://roclinux.cn. 文章作者为roc 希望您能通过捐款的方式支持Linux大棚博客的运行和发展.请见“关于捐款” == ...

  5. js事件处理 —— 详解

    对于JS事件处理分为四部分: 1.html事件处理程序 直接添加到HTML结构中 解析:用html处理程序可以直接在button元素里直接调用,但是维护性不是很方便 <!DOCTYPE html ...

  6. Wdcp缺少mod_rewite模块

    1.下载apache源码包,解压并查找到mod_rewrite.c文件 tar -zxvf httpd-2.2.27.tar.gz cd httpd-2.2.27 [root@localhost ht ...

  7. WdatePicker.js 日期时间插件

    支持功能: 1.支持常规在input单击或获得焦点时调用,还支持使用其他的元素如:<img><div>等触发WdatePicker函数来调用弹出日期框 @1.input 调用: ...

  8. 局部变量存储区域静态变量存储区域static变量存储区域

    局部变量存储区域静态变量存储区域static变量存储区域 常见的存储区域可分为: 1.栈 由编译器在需要的时候分配,在不需要的时候自动清楚的变量的存储区.里面的变量通常是局部变量.函数参数等. 2.堆 ...

  9. laravel框架——线上环境错误总结

    除了根目录,其他目录访问全是Not Found

  10. 为什么Tomcat的webapps目录下新建的目录不能访问html文件?

    在Tomcat安装目录中,webapps默认为部署网站用的目录.webapps/ROOT是网站的根目录,其它目录都是网站的子目录,如webapps\jsp-examples目录.但是,当我们新建一个子 ...