利用JQuery调用后台方法代码,CSharp代码库,德仔网

代码语言
代码分类
【CSharp】利用JQuery调用后台方法
作者:Dezai.CN / 发布于2012/8/14/ 560
利用JQuery调用后台方法无参数方法调用、有参数方法调用、XML调用
<div><%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JQueryTest.aspx.cs" Inherits="MsChartTest.JQueryTest" %></div>
<div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"></div>
<div><html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" >
<head runat="server">
 <title></title>
 <mce:script src="JS/jquery.js" mce_src="JS/jquery.js" type="text/javascript"></mce:script>
 <mce:script type="text/javascript"><!--
 $(function() {
 $("#btnOK").click(function() {
 $.ajax({
 type: "Post",
 url: "JQueryTest.aspx/SayHello",
 data: "{}",
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function(data) {
 alert(data.d);
 },
 error: function(err) {
 alert(err);
 }
 });
 return false;
 });
 $("#btnOK0").click(function() {
 $.ajax({
 type: "Post",
 url: "JQueryTest.aspx/GetStr",
 data: "{'str':'我是','str2':'XXX'}",
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function(data) {
 alert(data.d);
 },
 error: function(err) {
 alert(err);
 }
 });
 return false;
 });
 $("#btnOK1").click(function() {
 $.ajax({
 type: "Post",
 url: "JQueryTest.aspx/GetArray",
 data: "{}",
 contentType: "application/json; chartset=utf-8",
 dataType: "json",
 success: function(data) {
 $("#list").html("");
 $(data.d).each(function() {
 $("#list").append("<li>" + this + "</li>");
 });
 alert(data.d);
 },
 error: function(err) {
 alert(err);
 }
 });
 return false;
 });
 $("#btnOK2").click(function() {
 $.ajax({
 type: "Post",
 url: "JQueryTest.aspx/GetHash",
 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;
 });
 $("#btnOK3").click(function() {
 $.ajax({
 url: "XMLTest.xml",
 dataType: 'xml',
 success: function(xml) {
 $("#list1").html("");
 $(xml).find("data>item").each(function() {
 $("#list1").append("<li>id:" + $(this).find("id").text() + "</li>");
 $("#list1").append("<li>name:" + $(this).find("name").text() + "</li>");
 })
 },
 error: function(result, status) {
 alert(status);
 }
 });
 return false;
 });
 }); 
 
// --></mce:script>
</head>
<body>
 <form id="form1" runat="server">
 <div>
 <input id="btnOK" type="button" value="button" />
 <input id="btnOK0" type="button" value="button" />
 <input id="btnOK1" type="button" value="button" />
 <input id="btnOK2" type="button" value="button" />
 <input id="btnOK3" type="button" value="button" />
 <ul id="list"></ul> 
 <ul id="list1"></ul> 
 </div>
 </form>
</body>
</html>
</div>
<div>后台代码：</div>
<div></div>
<div>using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Script.Services;
using System.Web.Services;
using System.Collections;</div>
<div>namespace MsChartTest
{
 public partial class JQueryTest : System.Web.UI.Page
 {
 protected void Page_Load(object sender, EventArgs e)
 {</div>
<div> }
<div> [WebMethod]
 public static string SayHello()
 {
 return "Hello Ajax";
 }
<div> [WebMethod]
 public static string GetStr(string str, string str2)
 {
 return str + str2;
 }
<div> [WebMethod]
 public static List<string> GetArray()
 {
 List<string> li = new List<string>();
 for (int i = 0; i < 10; i++)
 {
 li.Add(i + "");
 }
 return li;
 }
<div> [WebMethod]
 public static Hashtable GetHash(string key, string value)
 {
 Hashtable hs = new Hashtable();
 hs.Add("www", "yahooo");
 hs.Add(key, value);
 return hs;
 }
 }
}
</div>
试试其它关键字
　JQuery调用后台方法　
同语言下
可能有用的
Dezai.CN贡献的其它代码(4037)