AJax技术

初识ajax技术

字号+ 作者:H5之家 来源:H5之家 2017-08-03 11:04 我要评论( )

初识ajax技术

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

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

2.后台接收传递的参数

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

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

前台

html代码

@model List<Mvc3Demo.Models.Catagory>@{ ViewBag.Title = "Catagory";}<div> <h2> 分类</h2> <select> @{ //Model指的是分类列表,遍历这个列表 foreach (var item in Model) { //下拉框,名字是分类名称(CatagoryName),值是分类编号(ID) <option value="@item.ID">@item.CatagoryName</option> } } </select> <h2> 添加分类</h2> <div> <input type="text" value="请输入分类名称" onfocus="this.value=''" onblur="if(this.value==''){this.value='请输入分类名称'}" /> <a href="javascript:void(0);">提交</a> </div></div>

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='" + dataInfo.ID + "'>" + dataInfo.CatagoryName + "</option>"); $(".cata").find("option[value='" + dataInfo.ID + "']").attr("selected", "selected"); } }); }}</script>

后台

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>页面添加的分类名</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 = 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.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Django中的Ajax,DjangoAjax

    Django中的Ajax,DjangoAjax

    2017-08-03 12:00

  • Ajax基础教程.doc

    Ajax基础教程.doc

    2017-08-03 09:01

  • 联合应用技术介绍之Ajax安全基础

    联合应用技术介绍之Ajax安全基础

    2017-08-03 09:00

  • 十大Ajax框架

    十大Ajax框架

    2017-08-03 08:00

网友点评