学习笔记：.net MVC5通过$.ajax()与后台Controller进行数据交互

什么是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>

执行结果
在这里插入图片描述

扫描二维码关注公众号，回复： 5856521 查看本文章

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。