如果在浏览器中禁用了JavaScript,那么ajax请求是否有效?

时间:2011-09-25 05:47:32

标签: javascript asp.net-mvc-3 jquery

我正在开发一个Web应用程序,并使用jQuery为用户提供良好的用户界面。因此,我使用的是ajax请求和许多jQuery函数。

如果我在浏览器中禁用JavaScript,大部分功能将无法正常工作,因为我正在为许多功能发送异步ajax请求。但是我该如何处理呢?我是否需要在不使用jQuery和ajax的情况下重写代码?

在下面找一个示例按钮点击事件:

  $("#renameCategory").live('click', function (event) {
         if ($.trim($("#CategoryNewName").val()) == "") {
             alert("Please enter a category name");
             return;
         }
         var selectedCategory = $("#SelectedCategoryId").val();
         var newCategoryName = $("#CategoryNewName").val();
         var postData = { categoryId: selectedCategory, name: newCategoryName };
         $.ajax({
             type: "POST",
             url: '@Url.Action("UpdateCategoryName", "Category")',
             data: postData,
             dataType: "json",
             success: function (data) {
                 $('#' + selectedCategory).text(newCategoryName);
                 $("#selectedCategoryText").html(newCategoryName);
             },
             error: function () { alert('error') }
         });
     });

我该如何处理?

5 个答案:

答案 0 :(得分:13)

当客户端禁用JavaScript时,Ajax请求和jQuery将无法运行。实现此功能的最佳方法是使用<a>标记href中的URL,如下所示:

<a href="@Url.Action("UpdateCategoryName", "Category")">Click Me!</a>

$("#renameCategory").on('click', function (evt) {
        //To prevent the link from sending the default request
        //call preventDefault() on the jQuery event object
        evt.preventDefault();
        //
        if ($.trim($("#CategoryNewName").val()) == "") {
             alert("Please enter a category name");
             return;
         }
         //GET THE URL FOR THE AJAX REQUEST
         var actionUrl = $(this).attr('href');
         //
         var selectedCategory = $("#SelectedCategoryId").val();
         var newCategoryName = $("#CategoryNewName").val();
         var postData = { categoryId: selectedCategory, name: newCategoryName };
         $.ajax({
             type: "POST",
             url: actionUrl,
             data: postData,
             dataType: "json",
             success: function (data) {
                 $('#' + selectedCategory).text(newCategoryName);
                 $("#selectedCategoryText").html(newCategoryName);
             },
             error: function () { alert('error') }
         });
     });

您还需要在控制器中检查ajax请求,如下所示:

public ActionResult UpdateCategoryName() {
    ...

    if(Request.IsAjaxRequest()) {
        return Json(yourData);
    }

    return View();
}

这样,如果您的用户禁用了JavaScript,该链接将像普通的HTTP请求一样运行。如果用户启用了JavaScript,那么他们将获得Ajax体验。这称为graceful degradation

答案 1 :(得分:3)

启用javascript时,Ajax调用有效。

您可以通过服务器端脚本来处理它,当禁用javascript时,您必须通过发布/获取请求来工作,因此您必须重新编写Web应用程序。

答案 2 :(得分:3)

如果您的网站需要进行大量修改才能在没有javascript的情况下工作,那么只需强制用户启用javascript即可。通知用户启用javascript的一种方法是使用noscript标记。 http://www.w3schools.com/tags/tag_noscript.asp

查看stackoverflow的页面源,了解它们如何使用noscript

答案 3 :(得分:2)

如果在浏览器中禁用了JavaScript,则不会在文档中解释和执行<script>标记,包括所有jQuery和AJAX JS代码。实现Javascript之外的交互式Web应用程序的最常用方法是Flash,因此您仍然可以拥有备份计划。您也可以使用旧式服务器端生成动态页面。

今天,对于没有启用JavaScript的人来说非常罕见,所以它根本不应该是一个问题。

无论如何,您可以使用<noscript> html标记向这些用户显示消息。

<script type="text/javascript">
    ... Js code ...
</script>
<noscript>You have JavaScript disabled in your browser. Please enable it.</noscript>

答案 4 :(得分:2)

显然,如果脚本被禁用,不可用或与尝试运行的环境不兼容,任何依赖于脚本的功能都将无效。

许多人认为开发Web应用程序是一种很好的策略,因此它们可以在没有脚本支持的情况下工作。然后,您可以添加脚本以改善工作流程和效率,但是如果在任何时候脚本不应该运行,您将知道您可以回退到可用的工作系统。

基于HTML和表单设计和实现良好工作流程的原则很可能会使脚本界面更加简单,工作流程更加高效。

开发人员常常将一些最小的HTML和CSS放在一起,然后尝试用脚本完成所有操作。最极端的是拥有DOCTYPE,title元素,一个块元素和一个完成所有操作的脚本元素。不推荐。