JQuery Ajax WebService传递参数的简单实例


Posted in Javascript onNovember 02, 2016

Asp.NET中利用jQuery实现Ajax时,在服务器端可以使用aspx,ashx,以及WebService等方式。最近研究了一下WebService方式,jQuery Ajax 方法调用 jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码这篇帖子给出了很详细的例子,不过没有给出详细解释。其中有几个细节问题开始没注意,费老劲才调通:

1)客户端data数据中的key字段名称必须和服务器端方法参数严格一致。

如客户端:

//有参数调用
    $(document).ready(function () {
      $("#btn2").click(function () {
        $.ajax({
          type: "POST",
          contentType: "application/json",
          url: "WebService.asmx/GetWish",
          data: "{value1:'心想事成',value2:'万事如意',value3:'牛牛牛',value4:2009}",
          dataType: 'json',
          success: function (result) {
            $('#dictionary').append(result.d);
          }
        });
      });
    });

服务器端的GetWish函数参数必须写成value1,value2,value3,value4:

[WebMethod]
  public string GetWish(string value1, string value2, string value3, int value4)
  {
    return string.Format("祝您在{3}年里 {0}、{1}、{2}", value1, value2, value3, value4);
  }

2)客户端传递对象到服务器端的方法:

客户端代码:

//传入对象
    $(function () {
      $("#btn6").click(function () {
        obj = new Object();
        obj.ID = "1";
        obj.Value = "aaa";
        //'{"obj":{"ID":"1",Value:"Horse"}}'
        var d = '{"obj":' + JSON.stringify(obj) + '}';
        $.ajax({
          type: "POST",  //访问WebService使用Post方式请求
          contentType: "application/json", //WebService 会返回Json类型
          url: "WebService.asmx/ParmsObject", //调用WebService的地址和方法名称组合 ---- WsURL/方法名
          data: d,     //这里是要传递的参数,格式为 data: "{paraName:paraValue}",下面将会看到    
          dataType: 'json',
          success: function (result) {
            alert(result.d);
          },
          error: function (result) {
            alert("fail");
          }
        });
      });

    });

服务器端代码:

[WebMethod]
  public string ParmsObject(Class1 obj)
  {

    return obj.ID + ":" + obj.Value;
  }

调试环境:VS2010+jquery-1.3.2.min.js

以上就是小编为大家带来的JQuery Ajax WebService传递参数的简单实例全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
JS实现仿微博可关闭弹出层效果
Sep 21 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
May 14 Javascript
详解前后端分离之VueJS前端
May 24 Javascript
原生js获取left值和top值的三种方法
Aug 02 Javascript
js+canvas实现滑动拼图验证码功能
Mar 26 Javascript
React中的render何时执行过程
Apr 13 Javascript
vue分页器组件编写方法详解
Jun 28 Javascript
layui添加动态菜单与选项卡
Jul 26 Javascript
vue-dplayer 视频播放器实例代码
Nov 08 Javascript
Node.js 中判断一个文件是否存在
Aug 24 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
Oct 28 Javascript
JavaScript ES6的函数拓展
Jan 18 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 #Javascript
Javascript 正则表达式校验数字的简单实例
Nov 02 #Javascript
在JSP中如何实现MD5加密的方法
Nov 02 #Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 #Javascript
JavaScript基础——使用Canvas绘图
Nov 02 #Javascript
js实现砖头在页面拖拉效果
Nov 20 #Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 #Javascript
You might like
PHP学习笔记(一) 简单了解PHP
2014/08/04 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
php将print_r处理后的数据还原为原始数组的解决方法
2016/11/02 PHP
PHP PDOStatement::setAttribute讲解
2019/02/01 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
JavaScript版TAB选项卡效果实例
2013/08/16 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
2014/05/23 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
javascript实现手机震动API代码
2015/08/05 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
2019/12/09 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
Python列表(list)常用操作方法小结
2015/02/02 Python
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
TensorFlow模型保存和提取的方法
2018/03/08 Python
使用Python写一个量化股票提醒系统
2018/08/22 Python
python yield关键词案例测试
2019/10/15 Python
python numpy中cumsum的用法详解
2019/10/17 Python
Python爬虫基于lxml解决数据编码乱码问题
2020/07/31 Python
python元组拆包实现方法
2021/02/28 Python
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
会计出纳员的自我评价
2014/01/15 职场文书
教师网络培训感言
2014/03/09 职场文书
硕士毕业论文导师评语
2014/12/31 职场文书
工厂仓库管理员岗位职责
2015/04/09 职场文书
公司财务部岗位职责
2015/04/14 职场文书
大学生创业计划书
2019/06/24 职场文书
读《瓦尔登湖》有感:每个人都需要一个瓦尔登湖
2019/10/17 职场文书
js作用域及作用域链工作引擎
2022/07/07 Javascript