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 相关文章推荐
利用JavaScript检测CPU使用率自己写的
Mar 22 Javascript
基于jQuery实现左右图片轮播(原理通用)
Dec 24 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
微信小程序 地图map实例详解
Jun 07 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
基于Vue实现后台系统权限控制的示例代码
Aug 29 Javascript
JS实现的base64加密解密操作示例
Apr 18 Javascript
js canvas实现画图、滤镜效果
Nov 27 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 Javascript
OpenLayers3实现图层控件功能
Sep 25 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
PHP4实际应用经验篇(6)
2006/10/09 PHP
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
Node.js与PHP、Python的字符处理性能对比
2014/07/06 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
js面向对象编程总结
2017/02/16 Javascript
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
JS脚本加载后执行相应回调函数的操作方法
2018/02/28 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
JS合并两个数组的3种方法详解
2019/10/24 Javascript
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
pandas如何处理缺失值
2019/07/31 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
python_array[0][0]与array[0,0]的区别详解
2020/02/18 Python
python标准库OS模块函数列表与实例全解
2020/03/10 Python
稀有和绝版书籍:Biblio.com
2017/02/02 全球购物
同步和异步有何异同,在什么情况下分别使用他们?
2012/12/28 面试题
中学生期末评语
2014/02/03 职场文书
《最佳路径》教学反思
2014/04/13 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
综合实践活动报告
2015/02/05 职场文书
医生个人年终总结
2015/02/28 职场文书
教导主任个人总结
2015/03/03 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
2015年语文教学工作总结
2015/05/25 职场文书
公司车辆管理制度
2015/08/04 职场文书