关于Ajax无刷新问题
前台代码:
<%@ Page language= "c# " Codebehind= "WebForm1.aspx.cs " AutoEventWireup= "false " Inherits= "AjaxDemo.WebForm1 " %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN " >
<HTML>
<HEAD>
<title> WebForm1 </title>
<script language= "javascript " type= "text/javascript " >
//城市------------------------------
function cityResult()
{
var city=document.getElementById( "TextBox1 ");
WebForm1.GetCityList(city.value,get_city_Result_CallBack);
}
function get_city_Result_CallBack(response)
{
if (response.value != null)
{
//debugger;
document.getElementById( "DropDownList1 ").style.display= "block ";
document.getElementById( "DropDownList1 ").length=0;
var ds = response.value;
if(ds != null && typeof(ds) == "object " && ds.Tables != null)
{
for(var i=0; i <ds.Tables[0].Rows.length; i++)
{
var name=ds.Tables[0].Rows[i].city;
var id=ds.Tables[0].Rows[i].cityID;
document.getElementById( "DropDownList1 ").options.add(new Option(name,id));
}
}
}
else
{
document.getElementById( "DropDownList1 ").style.display= "none ";
}
return
}
function getData()
{
var province=document.getElementById( "DropDownList1 ");
var pindex = province.selectedIndex;
var pValue = province.options[pindex].value;
var pText = province.options[pindex].text;
document.getElementById( " <%=TextBox1.ClientID%> ").innerText=pText;
}
</script>
</HEAD>
<body>
<form id= "Form1 " method= "post " runat= "server ">
<FONT face= "宋体 "> </FONT> <FONT face= "宋体 "> </FONT>
<br>
<asp:DropDownList ID= "DropDownList1 " runat= "server " Width= "72px " Height= "8px "> </asp:DropDownList>
<br>
<asp:TextBox ID= "TextBox1 " runat= "server "> </asp:TextBox>
</form>
</body>
</HTML>
后台代码:
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using AjaxPro;
using System.Data.SqlClient;
namespace AjaxDemo
{
/// <summary>
/// WebForm1 的摘要说明。
/// </summary>
public class WebForm1 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.TextBox TextBox1;
protected System.Web.UI.WebControls.DropDownList DropDownList1;
private void Page_Load(object sender, System.EventArgs e)
{
// 在此处放置用户代码以初始化页面
AjaxPro.Utility.RegisterTypeForAjax(typeof(WebForm1));
if (!Page.IsPostBack)
{
this.TextBox1.Attributes[ "onchange "] = "javascript:cityResult() ";
this.DropDownList1.Attributes.Add( "OnSelectedIndexChanged ", "getData(); ");
}
}
[AjaxPro.AjaxMethod(AjaxPro.HttpSessionStateRequirement.Read)]
public DataSet GetCityList(int provinceid)
{
string sql = "select * from a01 where a0101 like '% " + provinceid + "% ' ";
return GetDataSet(sql);
}
public static DataSet GetDataSet(string sql)
{
string ConnectionString = System.Configuration.ConfigurationSettings.AppSettings[ "ConnectionString "];
SqlDataAdapter sda = new SqlDataAdapter(sql, ConnectionString);
DataSet ds = new DataSet();
sda.Fill(ds);
return ds;
}
Web.config
<?xml version= "1.0 " encoding= "utf-8 " ?>
<configuration>
<appSettings>
<add key= "database1 " value= "Server=.;database=database1;uid=sa;pwd=; " />
</appSettings>
<system.web>
<httpHandlers>
<add verb= "POST,GET " path= "ajaxpro/*.ashx " type= "AjaxPro.AjaxHandlerFactory, AjaxPro " />
</httpHandlers>
……
要求:Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
但我一运行有出错的,那位大哥帮忙看下,最终的结果能够运行出来就行,想学习下无刷新技术
[解决办法]
建议不要用前台xml来生产select的option,速度有问题,毕竟ie是脚本解释
A(Select)请求后,发出Ajax请求,后台产生B(Select)的全部html代码,由前台
document.getElementById( 'B ').outerHTML = htmls;
这样快
[解决办法]
js中怎么能用DataSet呢?
你需要添加一个实体类A01。将DataSet -> A01[],然后返回给js,ajax.net会生成json对象,
可以直接使用。
[解决办法]
WebForm1.GetCityList(city.value,get_city_Result_CallBack);
第一个参数是你的传入参数,第二个get_city_Result_CallBack 对应的是你的aspx页面的回掉脚本函数.