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 相关文章推荐
封装的jquery翻页滚动(示例代码)
Nov 18 Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 Javascript
老生常谈onBlur事件与onfocus事件(js)
Jul 09 Javascript
Bootstrap基本插件学习笔记之折叠(22)
Dec 08 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
Node.js使用Express.Router的方法
Nov 14 Javascript
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 Javascript
Vue代码整洁之去重方法整理
Aug 06 Javascript
vue实现下拉加载其实没那么复杂
Aug 13 Javascript
Layui表格监听行单双击事件讲解
Nov 14 Javascript
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
vue设置全局访问接口API地址操作
Aug 14 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
Windows上php5.6操作mongodb数据库示例【配置、连接、获取实例】
2019/02/13 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
EasyUI中的tree用法介绍
2011/11/01 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
2016/01/28 Javascript
javascript自动切换焦点控制效果完整实例
2016/02/02 Javascript
JS面向对象编程详解
2016/03/06 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
解决vue props 拿不到值的问题
2018/09/11 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
python使用Tkinter显示网络图片的方法
2015/04/24 Python
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
python 返回列表中某个值的索引方法
2018/11/07 Python
浅谈Python基础—判断和循环
2019/03/22 Python
python中 * 的用法详解
2019/07/10 Python
python智联招聘爬虫并导入到excel代码实例
2019/09/09 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
Python浮点型(float)运算结果不正确的解决方案
2020/09/22 Python
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
英语自荐信范文
2013/12/11 职场文书
应用艺术专业个人的自我评价
2014/01/03 职场文书
大学生职业生涯规划书参考模板
2014/03/05 职场文书
如何写自我鉴定
2014/03/19 职场文书
中学清明节活动总结
2014/07/04 职场文书
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android
Android Rxjava3 使用场景详解
2022/04/07 Java/Android