JQueryを使用してasp.netバックグラウンドを直接呼び出す簡単な方法-C#.Net チュートリアル-php.cn

JQueryを使用してasp.netバックグラウンドを直接呼び出す簡単な方法

高洛峰

リリース： 2016-12-08 15:55:56

オリジナル

1145 人が閲覧しました

JQuery の $.ajax() を使用すると、asp.net のバックグラウンドメソッドを簡単に呼び出すことができます。

[WebMethod] 名前空間

1. パラメーターなしのメソッド呼び出し、注意: 1. メソッドは静的メソッドである必要があり、[WebMethod]

Backend:

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

ログイン後にコピー

の宣言が必要です。

フロントエンド:

$(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. パラメータを使用したメソッド呼び出し

バックエンド:

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

ログイン後にコピー

フロントエンド:

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

ログイン後にコピー

3. 配列メソッドを返すcall

Backend:

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;
}

ログイン後にコピー

Frontend:

$(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. ハッシュテーブルメソッド call

Backendrr を返すreee

フロントデスク< ;JQuery>:

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;
}

ログイン後にコピー

5. オペレーション xml

$(function()
 { 
  $("#btnOK").click(function()
 { 
    $.ajax({
      type:
"Post",
      url:
"data.aspx/GetHash",
      //记得加双引号
 T_T 
      data:
"{
 &#39;key&#39;: &#39;haha&#39;, &#39;value&#39;: &#39;哈哈！&#39; }",
      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;
  });
});

ログイン後にコピー

フロントデスク:

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>

ログイン後にコピー