jQuery调用Webservice传递json数组的方法


Posted in Javascript onAugust 06, 2016

本文实例讲述了jQuery调用Webservice传递json数组的方法。分享给大家供大家参考,具体如下:

Jquery由于提供的$.ajax强大方法,使得其调用webservice实现异步变得简单起来,可以在页面上传递Json字符串到Webservice中,Webservice方法进行业务处理后,返回Json对象给页面,让页面去展现。

这一切都非常的简单,今天要学习的并非这些。我们在实际处理业务过程中,会发现往往页面要传递给webservice 的并非一个或多个字符串,有时候需要传递的是一个组合数据,如这样的一组数据:

{'Employee': [{'name':'John','sex':'man','age':'25'},{'name':'Tom','sex':'man','age':'21'}]}

客户端将这样的Json字符串作为$.ajax方法的data参数是没有问题的,然而,服务端的webservice该如何去写接收参数却成为了一个问题。在百度、谷歌了一番后,只发现提问的却没有回答的。索性还是自己去研究吧,发现其实Employee对象首先是一个数组,其次数组的每一项都是一个Dictionary<string,string>字典类型。于是我尝试在服务端使用Dictionary<string,string>[] Employee来接收客户端传递的参数,一切如我所料,成功!

客户端代码如下:

//JQuery 调用webService导入数据
function LoadData() {
    var studentData = CollectionData();
    $.ajax({
      url: "ImportDataService.asmx/ImportStu",
      type: "post",
      contentType: "application/json;charset=utf-8",
      dataType: "json",
      data: "{'students':[{'name':'KoBe ','sex':'boy','age':'20'},{'name':'Mary','sex':'girl','age':'19'}]}",
      success: function(result) {
        alert(result.d);
      },
      error: function(e) {
        alert(e.responseText);
      }
    });
}

服务端代码如下:

/// <summary>
///
/// </summary>
/// <param name="students"></param>
/// <returns></returns>
[WebMethod]
[ScriptMethod(ResponseFormat=ResponseFormat.Json)]
public string ImportStu(Dictionary<string,string> []students)
{
  if (students.Length == 0)
  {
    return "没有任何数据!";
  }
  else
  {
    try
    {
      foreach (Dictionary<string, string> stu in students)
      {
        //构造一个新的Student对象。
        Student student = new Student();
        //为新构造的Student对象属性赋值。
        foreach (string key in stu.Keys)
        {
          switch (key)
          {
            case "name":
              student.Name = stu[key];
              break;
            case "sex":
              student.Sex = stu[key];
              break;
            case "age":
              int age;
              if (Int32.TryParse(stu[key], out age))
              {
                student.Age = age;
              }
              else
              {
                student.Age = 0;
              }
              break;
            default:
              break;
          }
        }
      }
      return "导入学生成功!";
    }
    catch
    {
      throw new Exception("导入学生失败!");
    }
  }
}

需要注意的是,服务端参数名需要和客户端Json数组的key值相同,如上代码中,参数名都为students。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript数组的扩展实现代码集合
Jun 01 Javascript
Javascript hasOwnProperty 方法 &amp; in 关键字
Nov 26 Javascript
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
jquery.jstree 增加节点的双击事件代码
Jul 27 Javascript
js预载入和JavaScript Image()对象使用介绍
Aug 28 Javascript
javascript模拟命名空间
Apr 17 Javascript
js如何实现淡入淡出效果
Nov 18 Javascript
JavaScript中的this引用(推荐)
Aug 05 Javascript
WebPack基础知识详解
Jan 16 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
让mocha支持ES6模块的方法实现
Jan 14 Javascript
Google 地图API Map()构造器详解
Aug 06 #Javascript
Google 地图API资料整理及详细介绍
Aug 06 #Javascript
jquery自动补齐功能插件flexselect用法示例
Aug 06 #Javascript
Google 地图类型详解及示例代码
Aug 06 #Javascript
Google 地图控件集详解及实例代码
Aug 06 #Javascript
Google 地图事件实例讲解
Aug 06 #Javascript
Google 地图叠加层实例讲解
Aug 06 #Javascript
You might like
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
javascript实现的动态文字变换
2007/07/28 Javascript
ext form 表单提交数据的方法小结
2008/08/08 Javascript
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
2015/05/15 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
高性能JavaScript 重排与重绘(2)
2015/08/11 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
2017/01/19 Javascript
js Canvas绘制圆形时钟效果
2017/02/17 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
深入理解Node中的buffer模块
2017/06/03 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
nodejs实现聊天机器人功能
2019/09/19 NodeJs
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
Vue.js中使用Vuex实现组件数据共享案例
2020/07/31 Javascript
如何在JavaScript中使用localStorage详情
2021/02/04 Javascript
[01:05:40]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第三场
2014/05/24 DOTA
利用Python演示数型数据结构的教程
2015/04/03 Python
Python爬取qq music中的音乐url及批量下载
2017/03/23 Python
启动targetcli时遇到错误解决办法
2017/10/26 Python
Python编程实现蚁群算法详解
2017/11/13 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
Python面向对象多态实现原理及代码实例
2020/09/16 Python
生产部经理岗位职责
2013/12/16 职场文书
告诉你怎样写创业计划书
2014/01/27 职场文书
护理人员的自我评价分享
2014/03/15 职场文书
质量承诺书范文
2014/03/27 职场文书
iPhone13再次曝光
2021/04/15 数码科技