MVC中Ajax的Get和Post方式演示

木木狐工作室

于 2023-09-08 15:42:28 发布

阅读量75

点赞数

分类专栏： WEB开发文章标签： mvc ajax javascript

本文链接：https://blog.csdn.net/baggio_ryu/article/details/132761566

版权

WEB开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

View页面上放两个按钮，一个提交get请求，一个提交post请求，再用两个span标签接收结果

   <div>
        <input type="button" value="ajaxGet" onclick="ajaxGet()"/><br/>
        <span id="getText"></span><br/>
        <input type="button" value="ajaxPost" onclick="ajaxPost()" /><br/>
        <span id="postText"></span>
    </div>

在head区域对这两个请求写js方法

<script type="text/javascript">
        function ajaxGet()
        {
            var res = document.getElementById("getText");
            var xhr = new XMLHttpRequest();
            xhr.open("get", "/Home/ShowTime", true);
            xhr.setRequestHeader("If-Modified-Since", "0")//清除缓存，IE内核需要，Google、360极速模式不用
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        //alert(xhr.responseText);
                        res.innerHTML = xhr.responseText; //IE支持，但Google、360极速可能不支持，建议用JQurey
                    }
                }
            }
            xhr.send();
        }
        function ajaxPost()
        {
            var res = document.getElementById("postText");
            var xhr = new XMLHttpRequest();
            xhr.open("post", "/Home/AjaxPost", true);
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")//将参数传入请求的FormData内
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        //alert(xhr.responseText);
                        res.innerHTML = xhr.responseText; //IE支持，但Google、360极速可能不支持，建议用JQuery
                    }
                }
            }
            xhr.send("name='张三" + "'&age=" + 30);
        }
    </script>

在控制器里做这两个方法的返回内容逻辑

        public ActionResult showTime()
        {
            string strTime = DateTime.Now.ToString();
            return Content(strTime);
        }

        [HttpPost]
        public ActionResult AjaxPost()
        {
            string name = Request.Form["name"];
            string age = Request.Form["age"];
            return Content("姓名：" + name + "，年龄：" + age+",查询时间："+DateTime.Now.ToString());
        }