首页 > 代码库 > 初识ajax技术

初识ajax技术

首先我介绍一下为什么我需要用到ajax技术

1.页面上有个text类型的输入框,当我点击提交的时候,可以把文本框中的值传递到后台去

2.后台接收传递的参数

3.连接数据库,把传递来的内容添加到数据库里

4.再调用方法把返回值又传递到前台,前台直接展示我们输入的内容

 

前台

html代码

技术分享
@model List<Mvc3Demo.Models.Catagory>
@{
    ViewBag.Title = "Catagory";
}
<div style="margin: 50px">
    <h2 style="display: inline">
        分类</h2>
    <select class="cata">
        @{
            //Model指的是分类列表,遍历这个列表
            foreach (var item in Model)
            {
     //下拉框,名字是分类名称(CatagoryName),值是分类编号(ID)
            <option value="@item.ID">@item.CatagoryName</option>
            }
        }
    </select>
    <h2 style="display: inline; margin-left: 20%">
        添加分类</h2>
    <div style="display: inline-block">
            <input id="cataName" type="text" value="请输入分类名称" onfocus="this.value=http://www.mamicode.com/‘‘" onblur="if(this.value=http://www.mamicode.com/=‘‘){this.value=‘请输入分类名称‘}" />
            <a href="javascript:void(0);" style="height: 25px" onclick="addcata();">提交</a>
    </div>
</div>    
View Code

jquery代码

技术分享
<script type="text/javascript">

function addcata()
{
//获取到我们输入框中输入的内容
var catagoryname = $("#cataName").val();
        //ajax的jquery申明
        $.ajax({
            //以post的形式传递,至于和get有什么区别,我还没学到这儿
            type: ‘post‘,
            //Home为控制器,AddCata为控制器中的ActionResul方法
            url: "/Home/AddCata",
            //把catagoryname当做参数传递
            data: { catagoryname: catagoryname }, 
            //数据类型为json,控制器中返回的就不是view,而是json
            dataType: ‘json‘,
            success: function (dataInfo) {
                $(".cata").append("<option value=http://www.mamicode.com/‘" + dataInfo.ID + "‘>" + dataInfo.CatagoryName + "</option>");
                $(".cata").find("option[value=http://www.mamicode.com/‘" + dataInfo.ID + "‘]").attr("selected", "selected");
            }
        });
    }
}

</script>    
View Code

后台

Medol代码

技术分享
namespace Mvc3Demo.Models
{
     public class Catagory
    {
        public string CatagoryName { get; set; }
        public int ID { get; set; }
    }
}
Model

Controller代码

技术分享
namespace Mvc3Demo.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Catagory()
        {
            Service service = new Service();
            //调用Service中的GetCatagory方法,获取分类列表
            List<Catagory> list = service.GetCatagory();
            //返回视图
            return View(list);
        }
      
         public ActionResult AddCata(string catagoryname)
        {
            Service service = new Service();
            //调用AddCatagorys方法,把数据添加进去
            service.AddCatagorys(catagoryname);
            //再调用GetCatas方法,获取到分类列表
            List<Catagory> list = service.GetCatagories();
            //找到分类列表最后一个分类,也就是刚刚添加的分类
            Catagory catagory = list[list.Count - 1];
            //返回Json
            return Json(catagory);
        } 
    }
}
Controller

Service类文件里的内容

技术分享
namespace Mvc3Demo.bll
{
    public class Service()
    {
        /// <summary>
        /// 从数据库查询分类列表
        /// </summary>
        /// <returns>分类列表</returns>
        public List<Catagory> GetCatagories()
        {
            string myConn = "server=服务器名;uid=sa;pwd=密码;database=数据库名";//连接数据库字符串
            using (SqlConnection myConnection = new SqlConnection(myConn))//定义一个数据连接实例
            {
                myConnection.Open();//打开连接
                string mySelect = "select id, catagoryName from dbo.Catagorys;";//从Catagorys表中查询id和catagoryName的sql语句
                SqlCommand myCommand = new SqlCommand(mySelect, myConnection);//实例一个数据库指令
                DataSet ds = new DataSet();//创建 DataSet 表的新实例,
                SqlDataAdapter adapter = new SqlDataAdapter(myCommand);//创建 SqlDataAdapter 填充的新实例,带有参数,
                adapter.Fill(ds); //将数据填充表ds
                List<Catagory> list = new List<Catagory>();//实例化一个分类列表

                if (ds.Tables != null && ds.Tables.Count > 0)//判断表不为空,并且表的数量大于0
                {
                    DataTable dt = ds.Tables[0];//取第一张表
                    if (dt != null && dt.Rows != null && dt.Rows.Count > 0)//判断第一张表不为空,并且表行不为空,表行数不为空
                    {
                        foreach (DataRow row in dt.Rows)//遍历表每一行
                        {
                            object objId = row["id"];//objId存放数据库中的id
                            int id = DataConvert.ToInt32(objId);//把objId转换成int类型,存放在id中
                            object objName = row["catagoryName"];//objName存放数据库中的catagoryName
                            string name = string.Empty;//声明一个name置空
                            if (objName == null)//判断objName为空
                                continue;//跳出本次循环
                            name = objName.ToString();//把objName转换成string类型
                            list.Add(new Catagory() { ID = id, CatagoryName = name});//把id和name添加到分类列表中
                        }
                    }
                }
                return list;//返回分类列表
            }
        }
        
        /// <summary>
        /// 向数据库添加数据
        /// </summary>
        /// <param name="catagoryname">页面添加的分类名</param>
        /// <returns>成功与否</returns>
        public bool AddCatagorys(string catagoryname)
        {
            string myConn = "server=服务器名;uid=sa;pwd=密码;database=数据库名";//连接数据库字符串
            using (SqlConnection myConnection = new SqlConnection(myConn))//定义一个数据连接实例
            {
                myConnection.Open();//打开连接
                string myInsert = "insert into dbo.Catagorys values (@catagoryName);";//向数据库Catagorys表中添加分类
                SqlCommand myCommand = new SqlCommand(myInsert, myConnection);//实例一个数据库指令
                myCommand.Parameters.Add(new SqlParameter() { ParameterName = "catagoryName", Value = http://www.mamicode.com/catagoryname });//添加参数集合的方法

                try//异常处理
                {
                    int i = myCommand.ExecuteNonQuery();//执行数据库,返回受影响的行数
                    if (i > 0)
                    {
                        return true;
                    }
                    return false;
                }
                catch (Exception ex)
                {
                    return false;
                }
            }
        }
    }
}
Service

数据库的设计就是作为主键的自增长id int类型,catagoryName是varchar(50)类型

 

1.从数据库获取分类数据信息,后台Controller中的Catagory的Action调用了Service中的GetCatagory方法,返回了一个list,这个list就是分类列表,通过return View(list)把list作为参数返还给页面,前台页面html第一行的@model List<Mvc3Demo.Models.Catagory> 意思就是我们可以直接访问Controller中通过强类型传递过来的分类列表。

2.向数据库添加分类信息,网页上点击提交,有一个onclick事件,执行addcata方法,而且通过var catagoryname = $("#cataName").val();获取到输入的值,然后再利用ajax技术,把catagoryname作为参数传递给后台(post),执行Home控制器中的AddCata的Action,这个Action调用了Service中AddCatagorys方法,当然这个AddCatagorys方法再影响的行数>1的情况(sql语句执行成功)下就返回一个true,然后再AddCata的Action中,我们再一次调用GetCatagory方法,获取到分类,那最后一个分类就是我们刚刚添加进去的分类,也就是list[list.count-1],然后返回json,并把参数最后这个分类传递到前台 return Json(catagory)。

3.前台接收到后台传递过来的数据dataInfo之后,然后在类名为cata的元素之后添加(jquer的append方法)新的分类,并且还可以把新添加的分类设置为选中(select的选中事件)

 

注:此篇随笔只供参考使用,而且也有很多小瑕疵,最主要的不是代码,逻辑才是最重要的。

初识ajax技术