Ajax异步刷新和.net后台进行交互

最新推荐文章于 2021-11-02 08:00:00 发布

wo13145219

最新推荐文章于 2021-11-02 08:00:00 发布

阅读量265

点赞数

分类专栏： Ajax 文章标签： ajax html c# JavaScript ViewUI

本文链接：https://blog.csdn.net/wo13145219/article/details/84534151

版权

Ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了一个使用AJAX实现的简单用户信息查询系统。通过前端JavaScript与后端交互，展示如何动态加载并显示用户的详细信息。涉及的技术包括HTML、JavaScript、ASP.NET以及数据库操作。

摘要由CSDN通过智能技术生成

前台代码
<html>
<head>
    <title>页面交互</title>
    <script type="text/javascript">
        function loadXMLDoc() {
            var xmlhttp;

            var txtQuery = document.getElementById("txtQuery").value;

            //XMLHttpRequest 用于在后台与服务器交换数据
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            }
            else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //判断是否成功的状态
            xmlhttp.onreadystatechange = function() {
                //
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var data = xmlhttp.responseText;
                    var Content = "";
                    Content = "<select id='dllUserInfo'>";
                    var arr = new Array;
                    arr = data.split("<br/>");
                    for (var i = 0; i < arr.length; i++) {
                        Content += "<option>" + arr[i] + "<option>";
                    }
                    Content += "<select>"
                    document.getElementById("myDiv").innerHTML = Content;
                }

            }
            //规定请求的类型，url及其是否异步处理
            xmlhttp.open("GET", "/Test.aspx?UserId="+txtQuery+"", true);
            //发送请求
            xmlhttp.send();
        }
    </script>

</head>
<body>
    <h2>
        AJAX</h2>
        用户名：
        <input id="txtQuery" type="text" style=" border-bottom-color:Green" />
        <input  type="button" onclick="loadXMLDoc()" id="btn_Select" value="查询" style="background-color:Red; border:opx; border-color:Blue"/>
    <div id="myDiv">
    </div>
</body>
</html>


后台代码:
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using Model;
using BLL;
using System.Collections.Generic;

namespace AjaxTest
{
    public partial class Test : System.Web.UI.Page
    {
        BLL.UserInfo us = new BLL.UserInfo();
        Model.UserInfo u = new Model.UserInfo();
        private string strContent = "";
        protected void Page_Load(object sender, EventArgs e)
        {
            //用户ID
            string strUserId = Request.QueryString["USERID"].ToString();
            Response.Write(getUserInfo(strUserId));
        }

        /// <summary>
        /// 获取用户信息
        /// </summary>
        /// <returns></returns>
        public string getUserInfo(string strUserId)
        {
            List<Model.UserInfo> un = us.getUserInfo(strUserId);
            strContent = "";
            foreach(var i in un)
            {
                strContent += i.UserId + "<br/>" + i.UserCode + "<br/>" + i.UserName + "<br/>" + i.Content + "<br/>";
                //strContent += "<tr><td>" + i.UserId + "</td><td>" + i.UserCode + "</td><td>" + i.UserCode + "</td><td>" + i.Content + "</td></tr>";
            }

            return strContent;
        }
    }
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using DAL;

namespace BLL
{
     public   class UserInfo
    {
        DAL.getUserinfo gs = new DAL.getUserinfo();

        //获取用户信息
        public List<Model.UserInfo> getUserInfo(string strUserId)
        {
            return gs.getUserInfo( strUserId);
        }
    }
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Collections;
using Model;
using Utility;
using System.Data;

namespace DAL
{
    public class getUserinfo
    {

        List<UserInfo> li = new List<UserInfo>();

        /// <summary>
        /// 用户信息
        /// </summary>
        /// <param name="strUserId"></param>
        /// <returns></returns>
        public List<UserInfo> getUserInfo(string strUserId)
        {
            string strSql = string.Format(@"select * from USERINFO WHERE (USERID ='{0}' OR '{0}'='')",strUserId);

            DataTable dt = SQLHelper.ExecuteDt(strSql);
            IList<UserInfo> users = new List<UserInfo>();
            return (List<UserInfo>)ConvertHelper.convertToList<UserInfo>(dt); 
        }

    }
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace Model
{
    public class UserInfo
    {
         #region Model
        private long _userid;
        private string _usercode;
        private string _username;
        private string _content;
        //构造函数
        public UserInfo()
        {
        }

        /// <summary>
        /// 
        /// </summary>
        public long UserId
        {
            set { _userid = value; }
            get { return _userid; }
        }
        /// <summary>
        /// 
        /// </summary>
        public string UserCode
        {
            set { _usercode = value; }
            get { return _usercode; }
        }
        /// <summary>
        /// 
        /// </summary>
        public string UserName
        {
            set { _username = value; }
            get { return _username; }
        }

        /// <summary>
        /// 
        /// </summary>
        public string Content
        {
            set { _content = value; }
            get { return _content; }
        }

        #endregion Model
    }
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Data;
using System.Reflection;

namespace Utility
{

    /// <summary> 
    /// 将DataTable转换成泛型集合IList<>助手类 
    /// </summary> 
    public class ConvertHelper
    {
        /// <summary> 
        /// 单表查询结果转换成泛型集合 
        /// </summary> 
        /// <typeparam name="T">泛型集合类型</typeparam> 
        /// <param name="dt">查询结果DataTable</param> 
        /// <returns>以实体类为元素的泛型集合</returns> 
        public static IList<T> convertToList<T>(DataTable dt) where T : new()
        {
            // 定义集合 
            List<T> ts = new List<T>();

            // 获得此模型的类型 
            Type type = typeof(T);
            //定义一个临时变量 
            string tempName = string.Empty;
            //遍历DataTable中所有的数据行  
            foreach (DataRow dr in dt.Rows)
            {
                T t = new T();
                // 获得此模型的公共属性 
                PropertyInfo[] propertys = t.GetType().GetProperties();
                //遍历该对象的所有属性 
                foreach (PropertyInfo pi in propertys)
                {
                    tempName = pi.Name;//将属性名称赋值给临时变量   
                    //检查DataTable是否包含此列（列名==对象的属性名）     
                    if (dt.Columns.Contains(tempName))
                    {
                        // 判断此属性是否有Setter   
                        if (!pi.CanWrite) continue;//该属性不可写，直接跳出   
                        //取值   
                        object value = dr[tempName];
                        //如果非空，则赋给对象的属性   
                        if (value != DBNull.Value)
                            pi.SetValue(t, value, null);
                    }
                }
                //对象添加到泛型集合中 
                ts.Add(t);
            }

            return ts;
        }
    } 

}