zoukankan      html  css  js  c++  java
  • Ajax基础应用入门02(结合javascript)

    本次的应用程序和入门01的效果大致相同,不同的是,执行结果并非以label的形式显示出来,而是直接在div中显示。

    1、可以在01项目的基础知识添加一个web窗体 “webForm2”;

    2、在前台<form></form>中插入以下代码:

     1  <asp:ScriptManager ID="ScriptManager1" runat="server">
    2 </asp:ScriptManager>
    3 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    4 <ContentTemplate>
    5 <div>
    6 学生ID:<input type="text" name="studentid"/><input type="button" value="查找" name="look" onclick="find();"/>
    7 学生姓名:<div id="studentId2"></div>
    8 </div>
    9 </ContentTemplate>
    10 </asp:UpdatePanel>
    11 <iframe src="http://www.baidu.com" width="1000" height="400"></iframe>

    (当然,部分控件也可以从工具箱中拖入,点击“查询”按钮要实现查询功能 所以在这里我们添加一个find()触发事件)

    3、在<head></head>中添加Javascript代码:

    View Code
     1   <script language="javascript" type="text/javascript">
    2 var req = null;
    3 function createRequest()
    4 {
    5 var request;
    6 try {
    7 request = new XMLHttpRequest();//创建和后台交互的请求(XMLHttpRequest是ajax的核心)。用于页面局部刷新(浏览器的内部对象,每个浏览器都有);
    8 }
    9 catch (trymicrosoft) //假如是微软的浏览器,且不支持旧的版本,就使用下边的Msxml2.XMLHTTP版本;
    10 {
    11 try {
    12 request = new ActiveXObject("Msxml2.XMLHTTP");
    13 }
    14 catch (othermicrosoft)//如果不是微软的浏览器,则调用Microsoft.XMLHTTP的浏览方式;
    15 {
    16 try {
    17 request = new ActiveXObject("Microsoft.XMLHTTP");
    18 }
    19 catch (failed) //若以上都创建失败则返回空;
    20 {
    21 request = null;
    22 }
    23 }
    24
    25 }
    26 return request;
    27 }
    28 function find() {
    29 req = createRequest();//创建ajax的请求对象;
    30 req.onreadystatechange = GetResultOnSucceed; //指定状态改变后要执行的方法;
    31 req.open("GET", "WebForm2.aspx?id=" + document.forms[0].studentid.value); //指定ajax的请求地址;(?表示参数 id是参数的名称,document.form1.studentid.value表示参数的值)
    32 req.send("");//发送请求;
    33 }
    34 function GetResultOnSucceed()
    35 {
    36 if(req.readyState==4) {
    37 if(req.status==200){
    38 alert(req.responseText);
    39 var s=req.responseText;//获取请求(或处理)结果;
    40 document.getElementById("studentId2").innerHTML=s;//将结果显示在div里;
    41 }
    42 }
    43 }
    44
    45 </script>

    4、本次后台代码写入页面事件中:

    View Code
     1  protected void Page_Load(object sender, EventArgs e)
    2 {
    3 if (Request.QueryString["id"] != null)
    4 {
    5
    6 string sid = Request.QueryString["id"].ToString();//指定获取find()方法中的id;
    7 using (SqlConnection conn = new SqlConnection())
    8 {
    9 String conStr = @"Data Source=.\SQLEXPRESS;Initial Catalog=CRM;Persist Security Info=True;User ID=sa;Password=sa";
    10 //Persist Security Info=True表示采用集成安全机制,若为False,则表明不采用集成安全机制。 [i'niʃəl] ['kætəlɔɡ] ;
    11 conn.ConnectionString = conStr;//获取用于打开SQLServer数据库的字符串;
    12 try
    13 {
    14 conn.Open();//打开数据连接;
    15 }
    16 catch
    17 {
    18 return;
    19 }
    20 SqlCommand cmd = new SqlCommand();//SqlCommand 表示对数据库执行的一个语句;
    21 cmd.Connection = conn;//获取或者设置SqlCommand的此实例的SqlConnection;
    22 string sql = string.Format("select name from customer where ID='{0}' ", sid);//Format将字符串转换为指定对象的字符串表现形式;
    23 cmd.CommandText = sql;//CommandText 获取或设置对数据源执行的SQL语句、表名或存储过程;
    24 SqlDataReader dr = cmd.ExecuteReader();//SqlDataReader提供一种从SQLServer数据库中读取行的只进流的方式;
    25 //(DataReader只在内存中读取一条数据,占用的内存比较小)
    26 string result = "";
    27 if (dr.Read())
    28 {
    29 result = dr[0].ToString();
    30
    31 }
    32 else
    33 {
    34 result = "该学生不存在!";
    35 }
    36 dr.Close();//关闭SqldataReader;
    37 Response.Write(result);
    38 Response.End();
    39 }
    40 }
    41 else
    42 {
    43 return;
    44 }
    45 }





  • 相关阅读:
    危险系数
    快速幂模板
    回文数字
    Echart图表使用
    http请求头中Referer的含义和作用
    有关程序员的时间管理
    数据库报错 java.sql.SQLException: The user specified as a definer ('root'@'%') does not exist
    sql中字符串替换
    前端获取数据库的datetime(时间戳) 转化成日期展示出来
    MySQL版本升级
  • 原文地址:https://www.cnblogs.com/Shang0109/p/2417877.html
Copyright © 2011-2022 走看看