您的位置:首页 > Web前端 > JQuery

.net3.5 C# Jquery+Ajax+aspx(ashx/webservice)实例

2011-06-22 01:14 489 查看
AjaxJQueryPage.aspx

----------------------------------------------------------------------------------------------------------------------

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxJQueryPage.aspx.cs" Inherits="AjaxJQueryPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head >

<title></title>

<script src="../js/jquery-1.4.1.js" type ="text/javascript"></script>

<script src="../js/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready( //页面加载执行

function() {

//alert("this is ready!");

//$("a").click(function(){ alert("Hello world!");}

//alert($('#Button1').value);

//$('#Button1').value = 'Save';

//$('#stats').load('index_baidu.html');

/**/

$("#btnClick1").bind("click", function(event) {

$.ajax({

//要用post方式

type: "POST",

url: "AjaxJQueryPage.aspx/SayHello",

dataType: "json", //dataType: "json",

data: "{}" , //把要调用的函数名作为参数传递到服务器就好了 //参数(如果没有参数:null)

//方法所在页面和方法名Data.aspx

contentType: "application/json; charset=utf-8",

success: function(data) {

//返回的数据用data.d获取内容 json

alert("data:" + data.d);

},

error: function(err) {

alert("err:" + err);

}

});

//禁用按钮的提交

return false;

});

$("#btnClick2").bind("click", function(event) {

var shengVal = $("#Select1").val();

$.ajax({

//要用post方式

type: "POST",

url: "AjaxJQueryPage.aspx/GetCity",

data: "{ 'ShengName':'" + shengVal + "'}", //把要调用的函数名作为参数传递到服务器就好了 //参数(如果没有参数:null)

//方法所在页面和方法名Data.aspx

contentType: "application/json; charset=utf-8",

dataType: "json", //dataType: "json",

success: function(data) {

//返回的数据用data.d获取内容 json

alert("data:" + data.d);

},

error: function(err) {

alert("err:" + err);

}

});

//禁用按钮的提交

return false;

});

$("#btnClick3").bind("click", function(event) {

$.ajax({

//要用post方式

type: "POST",

url: "Data.aspx/SayHello",

dataType: "json", //dataType: "json",

data: "{}", //把要调用的函数名作为参数传递到服务器就好了 //参数(如果没有参数:null)

//方法所在页面和方法名Data.aspx

contentType: "application/json; charset=utf-8",

success: function(data) {

//返回的数据用data.d获取内容 json

alert("data:" + data.d);

},

error: function(err) {

alert("err:" + err);

}

});

//禁用按钮的提交

return false;

});

$("#btnClick4").bind("click", function(event) {

var shengVal = $("#Select1").val();

$.ajax({

//要用post方式

type: "POST",

url: "Data.aspx/GetCity",

data: "{ 'ShengName':'" + shengVal + "'}", //把要调用的函数名作为参数传递到服务器就好了 //参数(如果没有参数:null)

//方法所在页面和方法名Data.aspx

contentType: "application/json; charset=utf-8",

dataType: "json", //dataType: "json",

success: function(data) {

//返回的数据用data.d获取内容 json

alert("data:" + data.d);

},

error: function(err) {

alert("err:" + err);

}

});

//禁用按钮的提交

return false;

});

});

window.onload = function() {

//alert("how old are you !");

};

</script>

<style type="text/css">

.style1

{

width: 101px;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<input id="Button1" type="button" value="button" />

<div id="stats"></div>

<a href='#'>Some link</a><br />

<script type ="text/javascript">

var butval = $("#Button1").val();

$("#Button1").val("保存");

</script>

<!--eg2 --->

<input id="txtcontent" type="text" /></br>

<input id="btShow" type="button" value="显示 " />

<input id="btHide" type="button" value="隐藏" />

<input id="btsave" type="button" value="保存" />

<input id="btchange" type="button" value="修改为hello" />

<div id="divMsg">Hello World!</div>

<script type="text/javascript">

$("#btShow").bind("click", function(event) { $("#txtcontent").show(); })

$("#btHide").bind("click", function(event) { $("#txtcontent").hide(); })

$("#btsave").bind("click", function(event) { $("#divMsg").html($("#txtcontent").val()); })

$("#btchange").bind("click", function(event) { $("#divMsg").html("Hello"); $("#txtcontent").val("Hello") })

</script>

<input id="btnClick1" type="button" value="AjaxJQueryPage.aspx后台方法回调SayHello " />

<input id="btnClick2" type="button" value="AjaxJQueryPage.aspx后台方法回调GetCity " />

<br />

<input id="btnClick3" type="button" value="data.aspx后台方法回调SayHello " />

<input id="btnClick4" type="button" value="data.aspx后台方法回调GetCity " />

<div id="selsheng">省份</div>

选择省:

<select id="Select1" class="style1" name="Select1">

<option>四川省</option>

<option>重庆市</option>

<option>云南省</option>

</select>

选择市:

<select id="Select2" class="style1" name="Select2">

<option></option>

</select>

<script type="text/javascript">

// $("#Select1").bind("change", function(event) {

// var shengVal = $("#Select1").val();

// alert(shengVal);

// $("#selsheng").html(shengVal);

// });

$('#Select1').change(function() {

var shengVal;

//shengVal = $(this).children('option:selected').val();

//shengVal = $("#Select1").val();

shengVal = this.value;

//alert($(this).children('option:selected').val()); //弹出select的值

//alert(shengVal);

$("#selsheng").html(shengVal);

//后台JQuery+Ajax+Ashx获取市的数据 OK

/*$.ajax({

type: "POST",

//dataType:"Text",

url: "AjaxHandlerGetCity.ashx",

data: { ShengName: shengVal },

beforeSend: function() { $("#selsheng").html("loading"); },

success: function(msg) {

$("#selsheng").html(shengVal);

$("#Select2").html(msg);

}

});*/

//JQuery+Ajax+WebService方法 net2.0

/* */

$.ajax({

type: "POST",

url: " WebServiceData.asmx/GetCity",

data: '{"ShengName":"' + shengVal + '"}',

contentType: "application/json; charset=utf-8",

dataType: "json",

beforeSend: function() { $("#selsheng").html("loading"); },

success: function(msg) {

var data = eval("(" + msg + ")");

var t = "";

jQuery.each(data, function(rec) {

t = t + this.CityName;

});

$("#Select2").html(t);

},

error: function(err) {

alert("err:" + err);

}

});

//后台JQuery+Ajax+Asp.net后台方法获取市的数据 OK net3.5

/*

$.ajax({

type: "Post",

url: "Data.aspx/GetCity",

//方法传参的写法一定要对,str为形参的名字,str2为第二个形参的名字

data: "{'ShengName':'" + shengVal + "'}",

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function(data) {

//返回的数据用data.d获取内容

//alert(data.d);

$("#Select2").html(data.d)

},

error: function(err) {

alert(err);

}

});

}); */

//前端JQuery+Javascript写代码 OK

/*

if (shengVal == "四川省") {

$("#Select2").html("<option>成都市</option><option>达州市</option>");

$("#Select2").val("达州市");

}

else if (shengVal == "重庆市") {

$("#Select2").html("<option>大足县</option><option>渝中区</option>");

}

else if (shengVal == "云南省") {

$("#Select2").html("<option>丽江市</option><option>昆明市</option>");

}

else {

$("#Select2").html("");

}*/

});

</script>

<div>

<asp:Button ID="btnClick" runat="server" Text="click me" />

<br />

<span id="msg"></span>

</div>

</form>

</body>

</html>

AjaxJQueryPage.aspx.cs

----------------------------------------------------------------------------------------------------------

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

using System.Web.Services;

public partial class AjaxJQueryPage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//if (Request.Form["method"] == "SayHello")
//{
// //如果是ajax请求,则执行SayHello方法
// Response.Write(SayHello());
// Response.End();//停止其他输出
//}

}

[WebMethod]
public static string SayHello()
{

return "Hello Ajax!";
}

[WebMethod]
public static string GetCity(string ShengName)
{
//string ShengName = context.Request["ShengName"].ToString();
string r = "";
switch (ShengName)
{
case "四川省":
r = "<option>成都市</option><option>达州市</option>";
break;
case "重庆市":
r = "<option>大足县</option><option>渝中区</option>";
break;
case "":
break;
default:
break;
}
return r;
}

}

AjaxHandler.ashx
-----------------------------------------------------------------------------------

<%@ WebHandler Language="C#" Class="AjaxHandler" %>

using System;
using System.Web;

public class AjaxHandler : IHttpHandler {

public void ProcessRequest (HttpContext context) {
//context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
context.Response.ContentType = "text/plain";

//context.Response.Write("Hello World");
if (context.Request["name"].ToString() == "admin" &&
context.Request["pass"].ToString() == "admin")
{
context.Response.Write("Y");
}
else
{
context.Response.Write("N");
}
}

public bool IsReusable {
get {
return false;
}
}

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

}

AjaxHandlerGetCity.ashx
-------------------------------------------------------------------------------------------------

<%@ WebHandler Language="C#" Class="AjaxHandlerGetCity" %>

using System;
using System.Web;

public class AjaxHandlerGetCity : IHttpHandler {

public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
string ShengName = context.Request["ShengName"].ToString();
string r = "";
switch (ShengName)
{
case "四川省":
r = "<option>成都市</option><option>达州市</option>";
break;
case "重庆市":
r = "<option>大足县</option><option>渝中区</option>";
break;
case "":
break;
default:
break;
}
context.Response.Write(r);
}

public bool IsReusable {
get {
return false;
}
}

}

WebServiceData.asmx
---------------------------------------------------------------------------------

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Services;
using System.Web.Script.Services;
using System.Web.Script.Serialization;

/// <summary>
///WebServiceData 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService] //net3.5可以/net2.0+AjaxExtent1.0dll
public class WebServiceData : System.Web.Services.WebService
{

public WebServiceData()
{

//如果使用设计的组件,请取消注释以下行
//InitializeComponent();
}

[WebMethod]
public string HelloWorld()
{
return "Hello World";
}

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string GetCity(string ShengName)
{
List<CityClass> rList = new List<CityClass>();
//string ShengName = context.Request["ShengName"].ToString();
//string r = "";
switch (ShengName)
{
case "四川省":
rList.Add(new CityClass("<option>成都市</option>"));
rList.Add(new CityClass("<option>达州市</option>"));
//r = "<option>成都市</option><option>达州市</option>";
break;
case "重庆市":
rList.Add(new CityClass("<option>大足县</option>"));
rList.Add(new CityClass("<option>渝中区</option>"));
rList.Add(new CityClass("<option>北培区</option>"));
//r = "<option>大足县</option><option>渝中区</option>";
break;
case "":
break;
default:
break;
}
CityClass[] r = rList.ToArray();
return new JavaScriptSerializer().Serialize(r);
}

}
public class CityClass
{
public CityClass(string pCityeName)
{
CityName = pCityeName;
}
public string CityName = "";
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: