AJAX在MVC中的应用

 

 提起AJAX都应该熟知,是一种现有的标准的方法,能够做到页面上的局部刷新,下面着重谈一下Ajax在MVC中的应用。

 AJAX五部曲

 说到Ajax都应该知道常用的几部操作。

   1.先创建XMLHttpRequest对象

   2.获取页面发送对象

   3.设置状态操作

   4.获取文本

   5.发送


  下面看一个小小的实例,来理解一下

 

<span style="font-family:SimSun;font-size:18px;"><script language="javascript" type="text/javascript">
    var xmlRequest;

    function CreateRequest() {
        /* 创建XMLHttpRequest对象 */
        if (window.ActiveXObject) {
            return new ActiveXObject("Microsoft.XMLHTTP");
        } else if (window.XMLHttpRequest) {
            return new XMLHttpRequest();
        }
    }
    function ResponseHandler() {
        if (xmlRequest.readyState == 4 && xmlRequest.status == 200) {
            /* 如果通信成功,并且响应正常,执行以下操作 */

            var reqContent = xmlRequest.responseText;
            document.getElementById("browser").innerHTML = reqContent;
        }
    }
    function AjaxAccess() {
        /* 异步请求 */

        xmlRequest = CreateRequest(); 				//创建XMLHttpRequest对象
        xmlRequest.onreadystatechange = ResponseHandler; //设置回调函数
        xmlRequest.open("GET", "/home/Get_page"); 	//初始化请求对象
        xmlRequest.send(null); 					//发送请求信息
    }

    window.onload = function () {
        document.getElementById("Access").onclick = AjaxAccess; //设置按钮单击事件
    }
</script>

<input id="Access" type="button" value="Access" /></span>
<span style="font-family:SimSun;font-size:18px;"><br />
<div id="browser"></div></span>


以上的DEMO就是通过ajax来异步的获取/home下的Get_page方法的返回值,并且把返回值异步赋给了brower的div,这就是我们经常见到的,当然这里采用的获取的是xmlRequest.responseText,还可以通过XMLRequest.responseXML来获取XML数据。


 使用AJAX获取数据

 在MVC中常用的有两种,下面将会谈到

 $.GET()方法

 格式var xmlReq=$.get(url,[data],[callback],[type]);

 url参数是一个字符串,表示异步请求的url地址;data参数用于指定执行异步请求时附加的参数列表,常用来向页面传递参数,他们以键值对的形式出现,是可选参数;callback参数指定当响应成功的时候的回调函数,是可选参数;type用于设置返回内容的格式,可选项有xml、html、script、json、json和text,默认值是html。其中callback可以接受两个值,分别表示请求结果和相应的状态。

 

 语法如下

<span style="font-family:SimSun;font-size:18px;">   function(data,textStatus)
        {
            //data:请求结果,可以是html、xml。text和json等
            //textstatus:响应状态,可能是success等
        }</span>


 

  下面来看一个例子

  页面有一个下拉列表框,当我们选择相应的值时,来在界面上显示相应的文字。


  设计思路

  把组合框选择的值,通过get的方式传送到后台,进行相应判断后把值在返回到前台中。


  Get方法传送值

<span style="font-family:SimSun;font-size:18px;"><script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#Search").click(function () {

            /* 使用Get方式请求指定URL */
            $.get("/home/Get_data",
		{
		    key: $("#blogClass").val()
		},
		function (data) {
		    $("#blogList").html(data);
		});
        });
        $("#Search").click();  //触发一次单击事件
    });
</script>

<select id="blogClass">
<option selected="selected">所有</option>
<option>CSS</option>
<option>C#</option>
</select>
<input type="button" id="Search" value="Search"/>
<div id="blogList" style=" margin-top:20px"></div></span>


  后台处理 

<span style="font-family:SimSun;font-size:18px;">  public void Get_data()
        {
            Dictionary<string, string> blogClass = new Dictionary<string, string>();
            blogClass.Add("CSS", "CSS中的padding");
            blogClass.Add("C#", "C#面向对象");
            blogClass.Add("所有","CSS中的padding,C#面向对象");
            string key = Request["key"];  //获取请求服务器的关键字
            foreach (string str2 in blogClass.Keys)
            {
                if (str2 == key)
                { 
                    Response.Write(blogClass[key]);
                }
            }
        }</span>


 在此实例中通过Request["key"]的形式来捕捉传递的参数,然后通过参数来进行相应的处理。

 

   $.post方法

   语法结构

   var xmlReq=$.post(url,[data],[callback],[type])

   我们可以看到该方法的语法结构与$.get类似,是的,都相同,只不过$.get方法时一个GET方式提交的数据,所有的参数信息都追加到URL后面,而web请求一般对URL长度有限制,所以就不能随心所欲的传递参数了,但$.post方法是将参数作为消息发送到服务器的,对数据长度没有影响。并且浏览器的缓存功能会把所有请求的URL进行临时缓存,所以通过$.get形式可能会有安全上的隐患。$.get方式在提交的时候效率要不$.post快很多。

 

  实例 

<span style="font-family:SimSun;font-size:18px;"><script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#btn").click(function () {
            $.post('/home/Page_to', {
                text: 'my string',
                number: 23
            },
            function (data) {
                alert('Your data has been saved.');
                $("#result").text(data);
            });
        });
    })
</script></span>

还是相同的功能,把参数TEXT和number值传递到/home/page_to的方法中,然后处理后的返回值就是data。


后台page_to方法如下

<span style="font-family:SimSun;font-size:18px;">  public void Page_to()
        {
            string str = Request["text"];
            Response.Write("返回结果是:"+str);
        }</span>


思路与$.get是一样的。


总结

 以上就是在MVC中经常用到的操作,基本上就这么多,显示通过异步的形式向某个页面传递参数,然后把通过参数处理后的数据返回。经常用到的就是$.get和$.post操作。





  • 0
    点赞
  • 11
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值