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 学习笔记(七)字符串的连接
Dec 31 Javascript
javascript权威指南 学习笔记之javascript数据类型
Sep 24 Javascript
jQuery写的日历(包括日历的样式及功能)
Apr 23 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 Javascript
JSON中双引号的轮回使用过程中一定要小心
Mar 05 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
jQuery选择器源码解读(三):tokenize方法
Mar 31 Javascript
React 路由懒加载的几种实现方案
Oct 23 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 Javascript
vuex state中的数组变化监听实例
Nov 06 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
Aug 20 Javascript
threejs太阳光与阴影效果实例代码
Apr 05 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.MVC的模板标签系统(二)
2006/09/05 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
把textarea中字符串里含有的回车换行替换成<br>的javascript代码
2007/04/20 Javascript
基于Jquery的简单&简陋Tabs插件代码
2010/02/09 Javascript
ExtJS 下拉多选框lovcombo
2010/05/19 Javascript
IE图片缓存document.execCommand("BackgroundImageCache",false,true)
2011/03/01 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
2014/11/12 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
JavaScript DOM事件(笔记)
2015/04/08 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
vue2中filter()的实现代码
2017/07/09 Javascript
基于Vue实现后台系统权限控制的示例代码
2017/08/29 Javascript
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
vue自定义filters过滤器
2018/04/26 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
Python交换变量
2008/09/06 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
对python中的argv和argc使用详解
2018/12/15 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
opencv 图像滤波(均值,方框,高斯,中值)
2020/07/08 Python
STUBHUB日本:购买和出售全球活动门票
2018/07/01 全球购物
Chain Reaction Cycles俄罗斯:世界上最大的在线自行车商店
2019/08/27 全球购物
更夫岗位责任制
2014/02/11 职场文书
《三顾茅庐》教学反思
2014/04/10 职场文书
ktv筹备计划书
2014/05/03 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
2015教师见习期工作总结
2014/12/12 职场文书
Spring Boot实现文件上传下载
2022/08/14 Java/Android