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 相关文章推荐
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
jQuery Ajax异步处理Json数据详解
Nov 05 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
AngularJS基础学习笔记之表达式
May 10 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
VueCli3构建TS项目的方法步骤
Nov 07 Javascript
浅谈JS中几种轻松处理'this'指向方式
Sep 16 Javascript
vue使用openlayers实现移动点动画
Sep 24 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新手上路(五)
2006/10/09 PHP
php 显示指定路径下的图片
2009/10/29 PHP
php中$this-&amp;gt;含义分析
2009/11/29 PHP
PHP的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
thinkphp控制器调度使用示例
2014/02/24 PHP
javascript 浏览器检测代码精简版
2010/03/04 Javascript
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
2016/08/05 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
javascript基本数据类型和转换
2017/03/17 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
深入解析Python编程中JSON模块的使用
2015/10/15 Python
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
python opencv捕获摄像头并显示内容的实现
2019/07/11 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
Python自省及反射原理实例详解
2020/07/06 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
医学院护理专业应届生求职信
2013/11/12 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
家庭教育教师培训学习体会
2016/01/14 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书
2019暑假学生安全口号
2019/06/27 职场文书
成本低的5个创业项目:投资小、赚钱快
2019/08/20 职场文书
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技