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函数(json)附详细说明
May 25 Javascript
js函数setTimeout延迟执行的简单介绍
Jul 17 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
JavaScript插件化开发教程 (二)
Jan 27 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
Apr 29 Javascript
webpack 2.x配置reactjs基本开发环境详解
Aug 08 Javascript
BootStrap实现文件上传并带有进度条效果
Sep 11 Javascript
小程序如何使用分包加载的实现方法
May 22 Javascript
简单了解小程序+node梳理登陆流程
Jun 24 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
Aug 02 Javascript
Javascript Dom元素获取和添加详解
Sep 24 Javascript
jQuery实现消息弹出框效果
Dec 10 jQuery
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
实现了一个PHP5的getter/setter基类的代码
2007/02/25 PHP
php弹出对话框实现重定向代码
2014/01/23 PHP
php数据库备份还原类分享
2014/03/20 PHP
PHP去掉json字符串中的反斜杠\及去掉双引号前的反斜杠
2015/09/30 PHP
PHP强制转化的形式整理
2020/05/22 PHP
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
2015/04/06 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
angular6.0开发教程之如何安装angular6.0框架
2018/06/29 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
2018/11/30 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
如何用itertools解决无序排列组合的问题
2017/05/18 Python
[原创]教女朋友学Python3(二)简单的输入输出及内置函数查看
2017/11/30 Python
Python解决八皇后问题示例
2018/04/22 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
python tkinter组件使用详解
2019/09/16 Python
python实现的汉诺塔算法示例
2019/10/23 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
什么是python类属性
2020/06/10 Python
澳大利亚头发和美容产品购物网站:OZ Hair & Beauty
2020/03/27 全球购物
SQL Server面试题
2016/10/17 面试题
一套比较完整的软件测试人员面试题
2012/05/13 面试题
实习协议书范本
2014/04/22 职场文书
安全技术说明书
2014/05/09 职场文书
委托证明书
2014/09/17 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
用Python仅20行代码编写一个简单的端口扫描器
2022/04/08 Python