有些朋友们会遇到这样的需求,我想当我的鼠标从一个文本框里离开,然后我的文本框右边会自动出现关于我在文本框里的输入关键字的所有信息,感觉像魔法一样,很酷!
我现在这里为大家先提供一个思路,然后我们再来看如何解决,首先,我会用Jquery的知识来解决这个问题,jquery对我们来说最重要的作用便是可以把前台的内容传送到后台,那我们就这样做!
1,这里我们先 做一个前台的网页,然后下面是Jquery代码,注意这些代码要放在<headr></headr>代码块中!
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//鼠标在文本框里移入去掉文本框内“必填”和移除时弹出对话框事件
$(":text").blur(function(){
var name = $(this).val(); //获取鼠标移除后,单行文本框的内容
if(name=="") //防止name为空,就不能获取到数据
{
return false;
}
if($(this).is('.class')) //这个判断,是找到 Class的name为class的text文本框,当然,你也可以为指定的文//本框换成其他的名字
{
if(name!=""&& /.+@.+\.^[\u4e00-\u9fa5]{1}[a-zA-Z]{1}[a-zA-Z_0-9]{4}[a-zA-Z_0-9_\u4e00-\u9fa5]$|^[a-zA-Z]{2}\d{7}$/.test(this.value))
{
alert("所输入的车牌格式不正确!");
}
$.post("JqueryGetDB.aspx?rnd="+Math.random(), //这里看不懂得同学,请上网找Jquery的Post提交方法
{username:$("#panel .class").val()},
function(data){
var data1 = data.table1;
$.each(data1,function(i,table){
$("#panel2 #carPaizhao").html(table.carlicense);
$("#panel2 #carcolor").html(table.carlicensecolor);
$("#panel2 #cartype").html(table.cartype);
$("#panel2 #carGroup").html(table.Carunitnr);
});
$("table #panel2").css("visibility","visible"); //把传来的数据,放在Panel2里面并显示
},"json");
}
})
})
</script>,
2,之后,我们开始进行后台的编写,我们新建一个asp文件,名为JqueryGetDB.aspx,这个文件就是上面所说的要从前台提交到后台的对象!这里要注意的呢,就是JqueryGetDB.aspx里面的head、title、body等元素全部去掉,只留下第一行就OK了!
/ /从前台获取数据
string strName = Request.Form["username"];
if (strName == "") return;
//查询数据
string strWhere = "select carlicense,carlicensecolor,cartype,Carunitnr from carinfo where carlicense ='" + strName + "'";
string strDB = System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];
SqlDataAdapter sqlapter = new SqlDataAdapter(strWhere, strDB);
DataSet dset = new DataSet();
sqlapter.Fill(dset);
string JsonTable = "";
JsonTable = ToJson(dset.Tables[0]);
if (JsonTable == "") return;
Response.Write(JsonTable);
//数据转换成Josn格式
public static string ToJson(DataTable dt)
{
if (dt == null || dt.Rows.Count <= 0)
{
return "";
}
StringBuilder jsonBuilder = new StringBuilder();
jsonBuilder.Append("{\"ok\":false,");
//jsonBuilder.Append("{\"");
//jsonBuilder.Append(dt.TableName.ToString());
//jsonBuilder.Append("\":[");
jsonBuilder.Append(string.Format("\"{0}\":[", dt.TableName));
for (int i = 0; i < dt.Rows.Count; i++)
{
jsonBuilder.Append("{");
for (int j = 0; j < dt.Columns.Count; j++)
{
jsonBuilder.Append("\"");
jsonBuilder.Append(dt.Columns[j].ColumnName);
jsonBuilder.Append("\":\"");
jsonBuilder.Append(dt.Rows[i][j].ToString());
jsonBuilder.Append("\",");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("},");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("]");
jsonBuilder.Append("}");
return jsonBuilder.ToString();
}