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 日期处理之时区问题
Oct 08 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
Jun 20 Javascript
使用jQuery仿苹果官网焦点图特效
Dec 23 Javascript
React.js入门学习第一篇
Mar 30 Javascript
全面了解addEventListener和on的区别
Jul 14 Javascript
浅析BootStrap Treeview的简单使用
Oct 12 Javascript
JavaScript reduce和reduceRight详解
Oct 24 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
微信小程序实现自定义picker选择器弹窗内容
May 26 Javascript
详解ES7 Decorator 入门解析
Feb 18 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
Apr 22 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 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 编写大型网站问题集
2010/05/07 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
js特效,页面下雪的小例子
2013/06/17 Javascript
js实现编辑div节点名称的方法
2014/12/17 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
解决wx.onMenuShareTimeline出现的问题
2016/08/16 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
利用node实现一个批量重命名文件的函数
2017/12/21 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
node.js学习笔记之koa框架和简单爬虫练习
2018/12/13 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
python机器学习之神经网络实现
2018/10/13 Python
python并发和异步编程实例
2018/11/15 Python
python实现简易数码时钟
2021/02/19 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
原来我一直安装 Python 库的姿势都不对呀
2019/11/11 Python
Python print不能立即打印的解决方式
2020/02/19 Python
python从ftp获取文件并下载到本地
2020/12/05 Python
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
澳大利亚波西米亚风连衣裙在线商店:Fortunate One
2019/04/01 全球购物
情侣吵架检讨书
2014/02/05 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
检讨书格式
2015/01/23 职场文书
地雷战观后感
2015/06/09 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python
【D4DJ】美少女DJ企划 动画将于明年冬季开播第2季
2022/04/11 日漫