什么是ajax?
- Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。
- Ajax 是一种用于创建快速动态网页的技术。
- Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
总的来说,通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。而传统网页如果需要更新内容,必须重新加载整个页面。
而现在的ajax都通过Jquery来调用,要是现在还是通过 var xmlhttp=new XMLHttpRequest(); 那样来写那可真是要了老命。
$.ajax()
那么我直接写一个最简单的Demo来看看ajax到底是如何进行数据交互的
首先创建一个MVC的空网页,然后创建一个TestController再生成一个Index的视图页(cshtml)
然后我在母版页 _Layout 中引用jquery.js和bootstrap.js,jquery是必须引用的。
ajax最简单的实例
我们直接让后台返回一个Hello World给前台,而ajax中只要配置一个url和suceess的回调函数即可取到数据。
public ActionResult ShowSomething()
{
return Content("Hello World");
}
<h2>Index</h2>
<div class="container">
<span></span>
</div>
<script>
$(function () {
$.ajax({
url: "/Test/ShowSomething",
success: function (result) {
$("span").text(result);
}
})
})
</script>
执行结果:
顺便提一句,$(function{})的意思是页面加载执行函数,相当于window.onload = function(){}
$(“span”)是元素选择器,选择当前页面所有的span的标签
关于jquery语法后文将不再过多赘述,请大家自行学习
ajax传参
那我们不能就取到值就完事了呀,我们要交互呀,什么是交互?就是传参到后台处理呗,观察以下代码。
public ActionResult ShowParam(string param)
{
return Content(param);
}
<h2>Index</h2>
<div class="container">
<input type="text" id="txt_input" />
<input type="submit" class="btn" id="btn_submit" /><br />
<span></span>
</div>
<script>
$(function () {
$('#btn_submit').bind('click', function () {
var txt = $('#txt_input').val();
$.ajax({
url: "/Test/ShowParam",
//传参是Json格式,param需要与后台的参数名对应
data: { param: txt },
success: function (result) {
$("span").text(result);
}
})
})
})
</script>
执行结果:
顺便说个插曲,$(’#btn_submit’).bind(‘click’, function () {}属于jquery中的事件监听,相当于在id为btn_submit这个按钮里加了一个OnClick事件。那这么做有什么好处呢?分离 分离 分离,重要的事情说三遍。为什么要用MVC?WebForm为什么会成为过去式?人类的正常思维模式就是分模块处理,最好就是html归html,js归js,C#归C#,互不干涉,只留下相互调用的接口,这样写出来的代码才是干净的,整洁的好代码。
ajax查询列表
这个时候先要引入一个新的概念Json,Json是一种数据格式,可以说是用于前后端交互中被运用最广泛的一种格式。
首先需要在NuGet程序包中添加 Newtonsoft.Json 依赖,用于后端Json格式的转换
添加完毕之后来看这么一段代码
public ActionResult ShowList()
{
using (SqlConnection conn = new SqlConnection("Data Source=DESKTOP-2HL1HGR\\SQL2014;Initial Catalog=TestDemo;Integrated Security=True"))
{
List<Student> list = new List<Student>();
conn.Open();
string sql = "SELECT * FROM Student";
SqlCommand cmd = new SqlCommand(sql, conn);
SqlDataReader sdr = cmd.ExecuteReader();
while (sdr.Read())
{
Student stu = new Student();
stu.F_id = Int32.Parse(sdr["F_id"].ToString());
stu.F_name = sdr["F_name"].ToString();
stu.F_age = Int32.Parse(sdr["F_age"].ToString());
stu.F_hobby = sdr["F_hobby"].ToString();
list.Add(stu);
}
return Content(JsonConvert.SerializeObject(list));
}
}
<h2>Index</h2>
<div class="container">
<input type="button" class="btn" id="btn_list" value="查询学生列表" /><br />
<span></span>
</div>
<script>
$(function () {
initBind(); //初始化所有绑定函数
})
function initBind() {
$('#btn_list').bind('click', function () {
$.ajax({
url: "/Test/ShowList",
success: function (result) {
$("span").text(result);
}
})
})
}
</script>
我简单的从数据库取出一张表的数据,用的是ADO,不懂ADO.NET技术的同学请看ADO.NET详解
先看一下数据库的数据
我把数据库数据取出到list再转换成Json的格式传到前台,前台直接显示,看看结果如何
数据已经成功取出了,但这也忒丑了点吧?不过没关系,这个Demo纯粹是为了让你们理解Json格式在前台是怎么显示的
接下来我们需要改前台代码把这个列表用表格的形式显示出来。
<h2>Index</h2>
<div class="container">
<input type="button" class="btn" id="btn_list" value="查询学生列表" /><br />
<table class="table table-bordered table-striped" id="tb_list"></table>
</div>
<script>
$(function () {
initBind(); //初始化所有绑定函数
})
function initBind() {
$('#btn_list').bind('click', function () {
var strHtml = '<tr><td>序号</td><td>姓名</td><td>年龄</td><td>爱好</td></tr>';
$.ajax({
url: "/Test/ShowList",
dataType: "json", //必须加,将json字符串转换为json格式
success: function (result) {
//result:Json数据,idx:下标,obj:内容(相当于result[idx])
$.each(result, function (idx, obj) {
strHtml += '<tr>';
strHtml += '<td>' + obj.F_id + '</td>'
strHtml += '<td>' + obj.F_name + '</td>'
strHtml += '<td>' + obj.F_age + '</td>'
strHtml += '<td>' + obj.F_hobby + '</td>'
strHtml += '</tr>';
})
$('#tb_list').empty().append(strHtml);
}
})
})
}
</script>
执行结果
ajax传参列表显示
有人说还不够,现在我想传参数并且用列表显示,观察下面一段代码
public ActionResult ShowList(string param)
{
if (param == "" || param == null)
param = "0";
using (SqlConnection conn = new SqlConnection("Data Source=DESKTOP-2HL1HGR\\SQL2014;Initial Catalog=TestDemo;Integrated Security=True"))
{
List<Student> list = new List<Student>();
conn.Open();
string sql = "SELECT * FROM Student WHERE F_age >" + param;
SqlCommand cmd = new SqlCommand(sql, conn);
SqlDataReader sdr = cmd.ExecuteReader();
while (sdr.Read())
{
Student stu = new Student();
stu.F_id = Int32.Parse(sdr["F_id"].ToString());
stu.F_name = sdr["F_name"].ToString();
stu.F_age = Int32.Parse(sdr["F_age"].ToString());
stu.F_hobby = sdr["F_hobby"].ToString();
list.Add(stu);
}
return Content(JsonConvert.SerializeObject(list));
}
}
<h2>Index</h2>
<div class="container">
<input type="text" id="ipt_age" placeholder="请输入最小学生的年龄" />
<input type="button" class="btn" id="btn_list" value="查询学生列表" /><br />
<table class="table table-bordered table-striped" id="tb_list"></table>
</div>
<script>
$(function () {
initBind(); //初始化所有绑定函数
})
function initBind() {
$('#btn_list').bind('click', function () {
var minAge = $("#ipt_age").val();
var strHtml = '<tr><td>序号</td><td>姓名</td><td>年龄</td><td>爱好</td></tr>';
$.ajax({
url: "/Test/ShowList",
data: {param : minAge},
dataType: "json",
success: function (result) {
$.each(result, function (idx, obj) {
strHtml += '<tr>';
strHtml += '<td>' + obj.F_id + '</td>'
strHtml += '<td>' + obj.F_name + '</td>'
strHtml += '<td>' + obj.F_age + '</td>'
strHtml += '<td>' + obj.F_hobby + '</td>'
strHtml += '</tr>';
})
$('#tb_list').empty().append(strHtml);
}
})
})
}
</script>
执行结果
Controller返回多个结果
那如果我想返回多个结果的话,该怎么做?我们可以构建一个类似于实体类的类来存放我们需要的数据。
观察如下代码。
public class AjaxResult
{
//数据集结果
public object list { get; set; }
//数据集总数
public int count { get; set; }
}
public ActionResult getGridJson(string param)
{
if (param == "" || param == null)
param = "0";
var result = new AjaxResult
{
list = getList(param),
count = getCount(param),
};
return Content(JsonConvert.SerializeObject(result));
}
public List<Student> getList(string param)
{
using (SqlConnection conn = new SqlConnection("Data Source=DESKTOP-2HL1HGR\\SQL2014;Initial Catalog=TestDemo;Integrated Security=True"))
{
List<Student> list = new List<Student>();
conn.Open();
string sql = "SELECT * FROM Student WHERE F_age >" + param;
SqlCommand cmd = new SqlCommand(sql, conn);
SqlDataReader sdr = cmd.ExecuteReader();
while (sdr.Read())
{
Student stu = new Student();
stu.F_id = Int32.Parse(sdr["F_id"].ToString());
stu.F_name = sdr["F_name"].ToString();
stu.F_age = Int32.Parse(sdr["F_age"].ToString());
stu.F_hobby = sdr["F_hobby"].ToString();
list.Add(stu);
}
return list;
}
}
public int getCount(string param)
{
using (SqlConnection conn = new SqlConnection("Data Source=DESKTOP-2HL1HGR\\SQL2014;Initial Catalog=TestDemo;Integrated Security=True"))
{
conn.Open();
string sql = "SELECT COUNT(*) FROM Student WHERE F_age >" + param;
SqlCommand cmd = new SqlCommand(sql, conn);
return int.Parse(cmd.ExecuteScalar().ToString());
}
}
<h2>Index</h2>
<div class="container">
<input type="text" id="ipt_age" placeholder="请输入最小学生的年龄" />
<input type="button" class="btn" id="btn_list" value="查询学生列表" /><br />
共有<label>0</label>条记录
<table class="table table-bordered table-striped" id="tb_list"></table>
</div>
<script>
$(function () {
initBind(); //初始化所有绑定函数
})
function initBind() {
$('#btn_list').bind('click', function () {
var minAge = $("#ipt_age").val();
var strHtml = '<tr><td>序号</td><td>姓名</td><td>年龄</td><td>爱好</td></tr>';
$.ajax({
url: "/Test/getGridJson",
data: {param : minAge},
dataType: "json",
success: function (result) {
$.each(result.list, function (idx, obj) {
strHtml += '<tr>';
strHtml += '<td>' + obj.F_id + '</td>'
strHtml += '<td>' + obj.F_name + '</td>'
strHtml += '<td>' + obj.F_age + '</td>'
strHtml += '<td>' + obj.F_hobby + '</td>'
strHtml += '</tr>';
})
$('#tb_list').empty().append(strHtml);
$('label').text(result.count);
}
})
})
}
</script>
执行结果
总结
好了,以上就是ajax基本的用法了,我归纳了取数据,传参取数据库,传参取列表,返回多个结果这几种情况,而自然在$.ajax()中还有很多的参数,不过我们最常用的参数我都已经用到了,如果想要了解ajax更多的用法可以去参考jquery的api。