利用JQuery直接调用asp.net后台的简单方法


Posted in Javascript onOctober 27, 2016

利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。

[WebMethod]   命名空间

1、无参数的方法调用, 注意:1.方法一定要静态方法,而且要有[WebMethod]的声明

后台<C#>:

using System.Web.Script.Services; 
 
[WebMethod] 
public static string SayHello() 
{ 
   return "Hello
 Ajax!"; 
}

前台<jQuery>:

$(function()
 {  
  $("#btnOK").click(function()
 {  
    $.ajax({ 
      //要用post方式 
      type:
"Post", 
      //方法所在页面和方法名 
      url:
"data.aspx/SayHello", 
      contentType:
"application/json;
 charset=utf-8", 
      dataType:
"json", 
      success:
function(data)
 {  
        //返回的数据用data.d获取内容 
        alert(data.d); 
      }, 
      error:
function(err)
 {  
        alert(err); 
      } 
    }); 
 
    //禁用按钮的提交 
    return false; 
  }); 
});

2、带参数的方法调用

后台<C#>:

using System.Web.Script.Services;
 
[WebMethod]
public static string GetStr(string str,
string str2)
{
  return str
 + str2;
}

前台<JQuery>:

$(function()
 {  
  $("#btnOK").click(function()
 {  
    $.ajax({ 
      type:
"Post", 
      url:
"data.aspx/GetStr", 
      //方法传参的写法一定要对,str为形参的名字,str2为第二个形参的名字 
      data:
"{'str':'我是','str2':'XXX'}", 
      contentType:
"application/json;
 charset=utf-8", 
      dataType:
"json", 
      success:
function(data)
 {  
        //返回的数据用data.d获取内容 
         alert(data.d); 
      }, 
      error:
function(err)
 {  
        alert(err); 
      } 
    }); 
 
    //禁用按钮的提交 
    return false; 
  }); 
});

3、返回数组方法的调用

后台<C#>:

using System.Web.Script.Services;
 
[WebMethod]
public static List<string>
 GetArray()
{
  List<string>
 li = new List<string>();
 
  for (int i
 = 0; i < 10; i++)
    li.Add(i
 + "");
 
  return li;
}

前台<JQuery>:

$(function()
 {  
  $("#btnOK").click(function()
 {  
    $.ajax({ 
      type:
"Post", 
      url:
"data.aspx/GetArray", 
      contentType:
"application/json;
 charset=utf-8", 
      dataType:
"json", 
      success:
function(data)
 {  
        //插入前先清空ul 
        $("#list").html(""); 
 
        //递归获取数据 
        $(data.d).each(function()
 {  
          //插入结果到li里面 
          $("#list").append("<li>" +
this +
"</li>"); 
        }); 
 
        alert(data.d); 
      }, 
      error:
function(err)
 {  
        alert(err); 
      } 
    }); 
 
    //禁用按钮的提交 
    return false; 
  }); 
});
///
 <reference path="jquery-1.4.2-vsdoc.js"/>
$(function()
 {
  $("#btnOK").click(function()
 {
    $.ajax({
      type:
"Post",
      url:
"data.aspx/GetArray",
      contentType:
"application/json;
 charset=utf-8",
      dataType:
"json",
      success:
function(data)
 {
        //插入前先清空ul
        $("#list").html("");
 
        //递归获取数据
        $(data.d).each(function()
 {
          //插入结果到li里面
          $("#list").append("<li>" +
this +
"</li>");
        });
 
        alert(data.d);
      },
      error:
function(err)
 {
        alert(err);
      }
    });
 
    //禁用按钮的提交
    return false;
  });
});

4、返回Hashtable方法的调用

后台<C#>:

using System.Web.Script.Services;
using System.Collections;
 
[WebMethod]
public static Hashtable
 GetHash(string key,string value)
{
  Hashtable
 hs = new Hashtable();
 
  hs.Add("www",
"yahooooooo");
  hs.Add(key,
 value);
   
  return hs;
}

前台<JQuery>:

$(function()
 {  
  $("#btnOK").click(function()
 {  
    $.ajax({ 
      type:
"Post", 
      url:
"data.aspx/GetHash", 
      //记得加双引号
 T_T  
      data:
"{
 'key': 'haha', 'value': '哈哈!' }", 
      contentType:
"application/json;
 charset=utf-8", 
      dataType:
"json", 
      success:
function(data)
 {  
        alert("key:
 haha ==> "+data.d["haha"]+"\n
 key: www ==> "+data.d["www"]); 
      }, 
      error:
function(err)
 {  
        alert(err
 + "err"); 
      } 
    }); 
 
    //禁用按钮的提交 
    return false; 
  }); 
});

5、操作xml

XMLtest.xml:
 
view
 plaincopy to clipboardprint?
<?xml version="1.0"
 encoding="utf-8" ?> 
<data>
<item>
  <id>1</id>
  <name>qwe</name>
</item>
<item>
  <id>2</id>
  <name>asd</name>
</item>
</data>
<?xml version="1.0"
 encoding="utf-8" ?>
<data>
<item>
  <id>1</id>
  <name>qwe</name>
</item>
<item>
  <id>2</id>
  <name>asd</name>
</item>
</data>

前台<JQuery>:

$(function()
 {  
  $("#btnOK").click(function()
 {  
    $.ajax({ 
      url:
"XMLtest.xml", 
      dataType:
'xml',
//返回的类型为XML
 ,和前面的Json,不一样了  
      success:
function(xml)
 {  
        //清空list 
        $("#list").html(""); 
        //查找xml元素
        $(xml).find("data>item").each(function()
 {  
          $("#list").append("<li>id:" +
 $(this).find("id").text()
 +"</li>"); 
          $("#list").append("<li>Name:"+
 $(this).find("name").text()
 + "</li>"); 
        }) 
      }, 
      error:
function(result,
 status) { //如果没有上面的捕获出错会执行这里的回调函数 
        alert(status); 
      } 
    }); 
 
    //禁用按钮的提交 
    return false; 
  }); 
});

以上就是小编为大家带来的利用JQuery直接调用asp.net后台的简单方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
让getElementsByName适应IE和firefox的方法
Sep 24 Javascript
传递参数的标准方法(jQuery.ajax)
Nov 19 Javascript
JavaScript Distilled 基础知识与函数
Apr 07 Javascript
ajax的hide隐藏问题解决方法
Dec 11 Javascript
js取得url地址参数实例
Feb 22 Javascript
jQuery实现新消息闪烁标题提示的方法
Mar 11 Javascript
JavaScript实现动态删除列表框值的方法
Aug 12 Javascript
AngularJS利用Controller完成URL跳转
Aug 09 Javascript
ES6新特性之模块Module用法详解
Apr 01 Javascript
使用puppeteer破解极验的滑动验证码
Feb 24 Javascript
javascript实现移动端触屏拖拽功能
Jul 29 Javascript
JS前端基于canvas给图片添加水印
Nov 11 Javascript
JavaScript登录验证码的实现
Oct 27 #Javascript
微信小程序  自定义创建详细介绍
Oct 27 #Javascript
vue中渐进过渡效果实现
Oct 27 #Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
Oct 27 #Javascript
真正好用的js验证上传文件大小的简单方法
Oct 27 #Javascript
vue的props实现子组件随父组件一起变化
Oct 27 #Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 #Javascript
You might like
PHP实现活动人选抽奖功能
2017/04/19 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
自适应高度框架 ----属个人收藏内容
2007/01/22 Javascript
Mootools 1.2教程 函数
2009/09/15 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
2016/06/03 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
Vue.js实战之Vuex的入门教程
2017/04/01 Javascript
微信小程序如何获取用户信息
2018/01/26 Javascript
Angular使用动态加载组件方法实现Dialog的示例
2018/05/11 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
PyQt5每天必学之弹出消息框
2018/04/19 Python
python实现俄罗斯方块
2018/06/26 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
Numpy将二维数组添加到空数组的实现
2019/12/05 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
创业计划书中要认真思考的问题
2013/12/28 职场文书
社区母亲节活动记录
2014/03/06 职场文书
党员入党表决心的话
2014/03/11 职场文书
2015年公路养护工作总结
2015/05/13 职场文书
2015年店长个人工作总结
2015/10/23 职场文书
使用Django实现商城验证码模块的方法
2021/06/01 Python