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

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

2013-12-18 18:14 453 查看
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 = "";
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: