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处理VBArray的函数使用说明
May 11 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 Javascript
H5移动端适配 Flexible方案
Oct 24 Javascript
JavaScript实现时钟滴答声效果
Jan 29 Javascript
JavaScript闭包_动力节点Java学院整理
Jun 27 Javascript
vue2组件之select2调用的示例代码
Oct 12 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
Vue+Django项目部署详解
May 30 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 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中spl_autoload_register函数的用法总结
2013/11/07 PHP
PHP中常见的密码处理方式和建议总结
2018/10/14 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
javascript 学习笔记(onchange等)
2010/11/14 Javascript
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
js substr、substring和slice使用说明小记
2011/09/15 Javascript
javascript对象的使用和属性操作示例详解
2014/03/02 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
2016/04/05 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
vue中实现弹出层动画效果的示例代码
2020/09/25 Javascript
python将文本转换成图片输出的方法
2015/04/28 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
Python编程flask使用页面模版的方法
2018/12/28 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
Django中的静态文件管理过程解析
2019/08/01 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
python+opencv实现车道线检测
2021/02/19 Python
豪华床上用品、床单和浴室必需品:Peacock Alley
2019/09/04 全球购物
澳大利亚网上书店:QBD
2021/01/09 全球购物
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
小区门卫工作职责
2013/12/14 职场文书
安全生产责任书范本
2014/04/15 职场文书
企业安全生产目标责任书
2014/07/23 职场文书
党的群众路线教育实践活动查摆剖析材料
2014/10/10 职场文书
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers