2011-09-25 13 views
6

Sto sviluppando un'applicazione web e sto usando jQuery per fornire una buona interfaccia utente per gli utenti. Pertanto, sto usando richieste Ajax e molte funzioni jQuery.Le richieste ajax funzionano se JavaScript è disabilitato nel browser?

Se disattivo JavaScript nel browser, la maggior parte della funzione non funzionerà perché sto inviando richieste asincrone ajax per molte funzioni. Ma come posso gestire questo? Devo riscrivere il codice senza usare jQuery e Ajax?

Trova un sotto un campione scatto del tasto evento:

$("#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') } 
     }); 
    }); 

Come posso gestire questa situazione?

risposta

12

Le richieste Ajax e jQuery non funzioneranno quando il client ha JavaScript disabilitato. Il modo migliore per fare questo lavoro è quello di utilizzare l'URL dal <a> tag href in questo modo:

<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') } 
     }); 
    }); 

Sarà inoltre necessario verificare la presenza di richieste Ajax nel controller come di seguito:

public ActionResult UpdateCategoryName() { 
    ... 

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

    return View(); 
} 

Questo modo, se il tuo utente ha disabilitato JavaScript, il collegamento funzionerà come una normale richiesta HTTP. Se l'utente ha abilitato JavaScript, otterrà l'esperienza Ajax. Questo è chiamato graceful degradation.

2

La chiamata Ajax funziona quando javascript è abilitato.

È possibile gestirlo tramite script sul lato server, quando javascript è disabilitato, è necessario eseguire i lavori per posta/richieste, quindi è necessario ricodificare l'applicazione Web.

2

Se JavaScript è disabilitato nel browser, i tag <script> non verranno interpretati ed eseguiti nel documento, inclusi tutti i codici jQuery e AJAX JS. Il modo più comune per implementare l'applicazione web interattiva diversa da Javascript è Flash, quindi è ancora possibile avere un piano di backup. Puoi anche andare con le pagine dinamiche generate solo dal lato della vecchia scuola.

Oggi, tuttavia, è molto raro che qualcuno non abbia abilitato JavaScript, quindi non dovrebbe essere un problema.

In ogni caso è possibile utilizzare il tag html <noscript> per visualizzare un messaggio per questi utenti.

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

Ovviamente qualsiasi funzionalità a seconda script non funziona se lo scripting è disattivato, non è disponibile o non compatibile con l'ambiente che sta cercando di correre in.

E 'considerato da molti come una buona strategia per sviluppare applicazioni Web in modo che funzionino senza il supporto di script. È quindi possibile aggiungere script per migliorare il flusso di lavoro e l'efficienza, ma lo farete sapendo che è possibile ricorrere a un sistema funzionante se in qualsiasi momento lo script non dovesse essere eseguito.

La disciplina di progettazione e implementazione di un buon flusso di lavoro basato su solo HTML e moduli può portare a un'interfaccia più semplice per lo script e un flusso di lavoro più efficiente.

Troppo spesso gli sviluppatori creano insieme un minimo di HTML e CSS, quindi provano a fare tutto nello script. L'estremo è avere un DOCTYPE, un elemento titolo, un elemento blocco e un elemento script che fa tutto. Non consigliato.

2

Se è necessario apportare molte modifiche al sito Web per funzionare senza javascript, è sufficiente forzare gli utenti a abilitare javascript. Un modo per notificare agli utenti di abilitare javascript consiste nell'utilizzare il tag noscript. http://www.w3schools.com/tags/tag_noscript.asp

Visualizza l'origine della pagina dello stackoverflow per vedere come utilizzano noscript

Problemi correlati