Ajax的页面静态化技术。
各位大神。谁做过这样的例子能不能发我一个看看啊 ？ 感觉这个搞不清楚。邮箱hzf497852648@qq.com
[解决办法]
其实就是点击的时候回发页面一个值，然后到后台去判断是不是AJAX触发，然后回发一段代码给AJAX，AJAX通过信息的处理重新给控件绑值。。。
前台：
$(document).ready(function() {
//DOM元素加载之后
//州变动
$("#ctl00_ContentPlaceHolder1_ddl_State").bind("change", function() {
//取州的value
HideStateValue.value = ddl_State.value;
//循环，获取选定项的text值
for (var i = 0; i < ddl_State.length; i++) {
if (ddl_State.options[i].selected == true) {
HideStateText.value = ddl_State.options[i].text;
}
}
//ajax
$.post('region_list_add.aspx', { ajaxtype: '1', key: $(this).children("option:selected").val(), type: '1' },
function(data) {
//分割data
var selectdata = data.split('|');
var code = selectdata[1].split(',');
var Name = selectdata[0].split(',');
//清空
$("#ctl00_ContentPlaceHolder1_ddl_Country").empty();
//循环添加国家信息
for (var i = 0; i < code.length; i++) {
ddl_country[ddl_country.length] = new Option(Name[i], code[i]);
}
if ($("#ctl00_ContentPlaceHolder1_ddl_Country").children("option:selected").val() == "") {
$("#ctl00_ContentPlaceHolder1_ddl_Province").empty();
for (var i = 0; i < code.length; i++) {
ddl_province[ddl_province.length] = new Option(Name[i], code[i]);
}
}
});
});
//国家变动事件
$("#ctl00_ContentPlaceHolder1_ddl_Country").bind("change", function() {
//取选中国家的VALUE
HideCountryValue.value = ddl_country.value;
//循环，获取所选国家的text值
for (var i = 0; i < ddl_country.length; i++) {
if (ddl_country.options[i].selected == true) {
HideCountryText.value = ddl_country.options[i].text;
}
}
//ajax
$.post('region_list_add.aspx', { ajaxtype: '1', key: $(this).children("option:selected").val(), type: '2' }, function(data) {
//处理字符串
var selectdata = data.split('|');
var code = selectdata[1].split(',');
var Name = selectdata[0].split(',');
//清空
$("#ctl00_ContentPlaceHolder1_ddl_Province").empty();
//循环，添加省信息
for (var i = 0; i < code.length; i++) {
ddl_province[ddl_province.length] = new Option(Name[i], code[i]);
}
});
});
//省变动事件
$("#ctl00_ContentPlaceHolder1_ddl_Province").bind("change", function() {
//获取value
HideProvinceValue.value = ddl_province.value;
//循环，获取所选省的text值
for (var i = 0; i < ddl_province.length; i++) {
if (ddl_province.options[i].selected == true) {
HideProvinceText.value = ddl_province.options[i].text;
}
}
});
});
后台：
protected void Page_Load(object sender, EventArgs e)
{
//ajax回传
if (Request.Form["ajaxtype"] != null && Request.Form["ajaxtype"].Equals("1"))
{
string type = Request.Form["type"];
string key = Request.Form["key"];
//州变动
if (type.Equals("1"))
{
string info = "";
string txt = "请选择,";
string val = ",";
if (key == "")
{
info = txt + "|" + val;
//写入数据流
Response.Write(info);
Response.End();
return;
}
//信息加载
IList<guojiadiqudata> gjs = guojiadiqudataService.GetgjInfos(Int32.Parse(key));
//拼接字符串
for (int i = 0; i < gjs.Count; i++)
{
txt += gjs[i].name;
val += gjs[i].id;
if (i != gjs.Count - 1)
{
txt += ",";
val += ",";
}
}
info = txt + "|" + val;
//写入数据流
Response.Write(info);
Response.End();
}
//国家变动
if (type.Equals("2"))
{
//拼接字符串
string info = "";
string txt = "请选择,";
string val = ",";
if (key == "")
{
info = txt + "|" + val;
//写入数据流
Response.Write(info);
Response.End();
return;
}
//信息加载
IList<guojiadiqudata> gjs = guojiadiqudataService.GetgjInfos(Int32.Parse(key));
for (int i = 0; i < gjs.Count; i++)
{
txt += gjs[i].name;
val += gjs[i].id;
if (i != gjs.Count - 1)
{
txt += ",";
val += ",";
}
}
info = txt + "|" + val;
//写入数据流
Response.Write(info);
Response.End();
}
}
else
{
//首次加载
if (!IsPostBack)
{
BindInfo(this.ObjectId);
}
//非首次加载
else
{
//如果州被选中
if (HideStateValue.Value != "")
{
//加载国家信息
ddl_startChange(HideStateValue.Value);
}
//如果国家被选中
if (HideCountryValue.Value != "")
{
//选中指定国家
for (int i = 0; i < ddl_Country.Items.Count; i++)
{
if (ddl_Country.Items[i].Value == HideCountryValue.Value)
{
ddl_Country.SelectedIndex = i;
}
}
//绑定省信息
ddl_provice_Change(HideCountryValue.Value);
if (HideProvinceValue.Value != "")
{
//选中指定省信息
for (int i = 0; i < ddl_Province.Items.Count; i++)
{
if (ddl_Province.Items[i].Value == HideProvinceValue.Value)
{
ddl_Province.SelectedIndex = i;
}
}
}
}
}
}
}
#endregion
[解决办法]
ajax 前台js调用后台方法 1.先把Ajax.dll添加引用到项目中，在项目上右击，菜单上有个[添加引用]，然后一步一步把那个.DLL文件添加进来，之后你会在项目的引用中看到那个Ajax.dll就是添加成功了 2.修改Web.config。在 <system.web> 元素中添加以下代码。这里的Ajax.dll和Ajaxpro.dll引用方法是不一样的，一定要注意 <configuration> <system.web> <httpHandlers> <!-- Ajax.dll的配置文件写法为,我下载到的是这个 --> <add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" /> <!-- AjaxPro.dll的配置文件写法为，根据你下载到的DLL文件选择不同的配置语句--> <add verb="*" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro"/> </httpHandlers> </system.web> </configuration>3对AjaxPro用到的页Page_Load事件中进行运行时注册。如： protected void Page_Load(object sender, EventArgs e) { Ajax.Utility.RegisterTypeForAjax(typeof(_Default));//是Ajax.dll的 AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));//Ajaxpro.dll的 } //这的_Default是指页面类的类名,就是这个页面的名字。如是放在命名空间，则需要写上完整的命名空间（如：namespaces._Default）4创建服务器端方法 [Ajax.AjaxMethod]//这句一定要有，如果你是Ajaxpro.dll就写成[AjaxPro.AjaxMethod] public string getValue(int a,int b) { //该方法我们将实现从客户端传入两个数，在服务器端相加计算后返回到客户端。这里可以写在原来的页后台中也可以单独写一个类。 return Convert.ToString(a+b);//这里返回的就是前台得到的值，反正参数已经进CS文件了，想怎么操作就怎么操作，包括读库都可以。 } 5 客户端调用。 <%@ Page language="c#" Codebehind="WebPage1.aspx.cs" AutoEventWireup="false" Inherits="Web.WebPage1" %> <script language="javascript"> function getValue() {//这里如果是AjaxPro.dll就加Web._Default.getValue,如果是Ajax.dll就不用加命名空间如下 _Default.getValue(1,2,getGroups_callback);//该处即调用服务器端的_Default.getValue方法。 //_Default就是写getValue的那个类，如果写在本页CS里就是WebPage1.getValue，1和2是参数。 //这在里边getGroups_callback指定的是个回调函数，以接受服务器端处理完后返回客户端结果。 }//这个方法用户接受并处理服务器端返回的结果。 function getGroups_callback(response) { var dt=response.value;//这个值就是最终传回来的值，想怎么用就怎么用，反正回前台了。 document.getElementById("Div_1").innerHTML=dt; } </script> <body> <div id="Div_1"> </div> <button onclick=getValue()>开始 </botton> </body>