2011-09-25 111 views
6

我正在开发一个Web应用程序,并正在使用jQuery为用户提供一个良好的用户界面。因此,我使用ajax请求和许多jQuery函数。如果JavaScript在浏览器中被禁用,请求Ajax请求是否有效?

如果我在浏览器中禁用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') } 
     }); 
    }); 

我该如何处理呢?

回答

12

当客户端禁用JavaScript时,Ajax请求和jQuery不起作用。使这项工作的最好方法是使用URL从<a>标签href的:

<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

2

当启用javascript时,Ajax调用起作用。

你可以通过服务器端脚本来处理它,当javascript被禁用时,你必须通过post/get请求来工作,所以你必须重新编码你的web应用程序。

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> 
2

显然,如果脚本被禁用,不可用或不符合它试图在运行环境

它被许多人认为是一个很好的策略,这取决于脚本任何功能将无法正常工作。开发Web应用程序,以便在没有脚本支持的情况下工然后,您可以添加脚本来改进工作流程和效率,但是如果知道脚本无法运行的任何时候,您已经回退到可用的系统,就会这样做。

基于HTML和表单的设计和实现良好工作流程的规范可能会导致更简单的脚本界面和更高效的工作流程。

开发人员经常将一些最小的HTML和CSS放在一起,然后尝试在脚本中执行所有操作。最重要的是要有一个DOCTYPE,标题元素,一个块元素和一个脚本元素来完成一切。不建议。

2

如果您的网站需要进行大量修改而无需使用JavaScript,那么只需强制用户启用javascript即可。通知用户启用JavaScript的一种方法是使用noscript标签。 http://www.w3schools.com/tags/tag_noscript.asp

查看stackoverflow的页面源码查看他们如何使用noscript