jQuery ajaxForm renvoyant un fichier .json

Pour empêcher le navigateur de déclencher le téléchargement du fichier .json, définissez l’en-tête Content-type sur “text / html”.

PHP:

 header("Content-type: text/html"); 

ASP.NET MVC:

 return Json(obj, "text/html"); 

En javascript, vous devez parsingr le résultat du texte, comme ceci:

 $(".addform").ajaxSubmit({ url: "file.php", type: "POST", dataType: "text", iframe: true, success: function (text) { var data = $.parseJSON(text); }, error: function (xmlRequest, textStatus, errorThrown) { alert(errorThrown); } }); 

Marche parfaitement.

Ce plugin vous permettra de soumettre des formulaires multi-parties en utilisant ajax.

Si vous souhaitez utiliser l’option ‘success:’ d’Ajax, vous devez soumettre le formulaire à l’aide de ajax. Actuellement, vous utilisez la fonction submit () qui, fondamentalement, soumet simplement le formulaire de manière traditionnelle. Le fait que vous puissiez voir les données JSON sous forme de fichier téléchargé ou dans vos navigateurs signifie que cela se produit.

Vous devez utiliser ce plugin (si vous avez besoin de la fonction multipart – sinon, utilisez simplement la fonction Ajax habituelle)

Avec le plugin, vous l’utiliseriez comme ceci:

 $("#SubmitButton").click(function(){ $.ajaxFileUpload( { url:serverurl, secureuri:false, fileElementId:elementId, dataType: 'json', success: function (data, status) { /* show success message */ }, error: function (data, status, e) { /* handle error */ } }); }); 

Si vous voulez le faire sans télécharger le fichier, il existe un moyen plus simple de le faire.

 $("#SubmitButton").click(function(){ $.post('YOUR_URL', $("#FormName").serialize(), function(data){ alert(data.name); // John }, "json"); //specify return data is going to be json }); 

Bien que ce ne soit pas exactement ce que je cherchais à résoudre, j’ai pu arriver à une solution légèrement différente qui répondait à mes besoins!

Comme les envois de fichiers ajax sont effectués via des iframes, le problème était qu’après le chargement du fichier .json par l’iframe, celui-ci était interprété par Firefox comme un téléchargement et une invite de téléchargement s’ouvrait. Je suis à peu près sûr que j’aurais pu jouer avec certains parameters du serveur pour empêcher cela, mais j’ai déjà assez de temps à perdre.

Donc, ce que j’ai fait a été rendu sous forme de texte au lieu de texte, car je ne cherchais de toute façon qu’un seul numéro d’identification. Mon code ressemble maintenant à:

 $(document).ready(function() { $('#continue-upload').click(function() { $('#new_stem').ajaxSubmit({ dataType: 'text', //'json', success: formSuccess }); }); }); 

Le numéro d’identification dont j’avais besoin venait également dans les balises pre, donc je devais également les supprimer dans ma fonction de résultats.

Cela fait ce que je veux maintenant, woo!

En réalité, le code ajaxSubmit pour ce plugin est légèrement hacky. Pour que ajaxSubmit fonctionne (au moment de l’écriture), votre serveur doit renvoyer des données JSON sous la forme content-type = text / html. Le plugin retirera automatiquement les balises <\ pre>, etc. (voir source). J’imagine que lorsqu’ils essayaient de récupérer l’iframe caché pour le récupérer, ils ont décidé de traiter json un texte et de l’parsingr de l’iframe.

On dirait que son en Content-Type tête de réponse Content-Type est incorrect et que le navigateur ne sait pas quoi en faire. Ce devrait être application/json . Vous pouvez utiliser le panneau Net de Firebug pour déterminer les en-têtes de réponse réels.

Annulez-vous l’action par défaut de l’événement submit ? Il semble que le formulaire soit effectivement soumis (au sens classique du terme, autrement dit, Firefox navigue actuellement vers la page spécifiée dans l’ action du formulaire).

Peut-être que ça aide

 $('#cpFileUpload').ajaxForm({ dataType: 'html', success: function(data) { eval(data); if (data.result == false) { alert('error on server side'); } else { // do what you want } } }); 

Et du côté serveur, la sortie doit être comme ceci (seulement cette sortie ou sans aucun autre texte dans la balise body)

 var data = {result: true, html: 'ok'} 

Pas si gentil, mais ça marche

Moyen facile:

$('#new_stem').ajaxForm({ dataType: 'text', complete: function(xhr) { data = JSON.parse(xhr.responseText); } });