ASP.NET MVC学习笔记

最新推荐文章于 2021-10-29 14:36:10 发布

flyingdream123

最新推荐文章于 2021-10-29 14:36:10 发布

阅读量554

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery Mobile

本文链接：https://blog.youkuaiyun.com/flyingdream123/article/details/46693051

jQuery Mobile 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用Chrome浏览器检查Ajax请求及其参数与返回数据。通过F12打开开发者工具，选择Network选项，可以查看到Ajax请求详情。文章还提供了jQuery示例代码，展示了如何在ASP.NET MVC应用中实现Ajax请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Chrome浏览器查看Ajaxa请求，查看最多的是：参数、传递的数据、返回的数据

按f12打开控制台！点击Network选项，ajax的请求也在里面，点击下面的出现的Ajax请求的路径，你会发现右边弹出来一个窗口，Headers，Perview，Response等等，其中Perview为参数，Response为返回的数据

Ajax：使用JavaScript对Web服务器异步请求，将结果动态更新到页面，且整个过程中无刷新动作。

客户端发启Ajax的请求-》ASP.NET MVC生成内容-》客户端将内容展示在页面

注意：因为jQuery只有在DOM加载完成后才能操作DOM对象，所以将事件绑定和jQuery代码都放在ready方法中，是最安全的做法。

<script type="text/javascript">
    $(document).ready(function () {
        $('#myButton').click(function () {
            alert('I was clicked!');
        });
    });
</script>

$(document).ready(function () {
    $('#privacyLink').click(function (event) {
        event.preventDefault();//阻止链接的默认行为，即跳转到该链接href标签属性所指的页面
        var url = $(this).attr('href');//提取href标签属性的值
        $('#privacy').load(url);//发启Ajax请求。load方法实际上创建了一个Ajax请求，异步地调用此URL，并把响应插到DOM之中。
    });

    $('#commentForm').submit(function (event) {
        event.preventDefault();
        var data = $(this).serialize();//将表单序列化成字符串
        var url = $(this).attr('action');//得到表单form的action的属性值

        //提交表单
        $.post(url, data, function (response) {
            $('#comments').append(response);
        });
    });
});

//只有启用了JavaScript的浏览器才能向服务器发送Ajax请求，否则只能发送常规的HTTP请求

        public ActionResult PrivacyPolicy()
        {
            if (Request.IsAjaxRequest())
            {
                return PartialView();//浏览器启用JavaScript，返回部分视图，无刷新
            }
            return View();//禁用JavaScript，返回常规视图且刷新页面
        }

获取URL的完整路径：@Url.Action("AddComment")

<form method="post" id="commentForm" action="@Url.Action("AddComment")">
    @Html.TextArea("Comment",new{rows=5,cols=50})
    <br />
    <input type="submit" value="Add Comment" />
</form>