jQuery ajaxForm возвращает файл .json

Question

У меня есть форма для создания модели в rails, которая также возвращает JSON через ajax. Мой код пока выглядит так:

$('#new_stem').ajaxForm({ //#new_stem is my form
  dataType: 'json',
  success: formSuccess
});

function formSuccess(stemObj) {
  //does stuff with stemObj
}

И у меня есть многочастная форма с загрузчиком файлов (но я не уверен, что это актуально).

Когда я отправляю форму, она работает нормально (мои модели правильно создаются и отображаются как json), но вместо обработки json функцией formSuccess, он запрашивает загрузку для "stems.json" (путь к мое действие по созданию ствола) в Firefox.

Что могло бы вызвать это, и что могло бы решить это? Не уверен, что это является частью проблемы, но у меня нет кнопки отправки в моей форме, у меня есть ссылка с обработчиком кликов, который вызывает $ ('# new_stem) .submit ()

Спасибо, ребята!

РЕДАКТИРОВАТЬ: Firebug говорит мне, что заголовок содержит следующее:

Etag        "b53e5247e7719cf6b1840e2c6e68781c"
Connection      Keep-Alive
Content-Type    application/json; charset=utf-8
Date        Mon, 03 May 2010 02:19:31 GMT
Server      WEBrick/1.3.1 (Ruby/1.8.7/2010-01-10)
X-Runtime       241570
Content-Length  265
Cache-Control   private, max-age=0, must-revalidate

плюс заголовок печенья

Answer 1

Чтобы браузер не запускал загрузку файла .json, установите заголовок Content-type на "text / html".

PHP:

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

ASP.NET MVC:

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

В javascript вам нужно проанализировать текстовый результат, например так:

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

Отлично работает.

Answer 2

На самом деле код ajaxSubmit для этого плагина немного хакерский. Чтобы заставить ajaxSubmit работать (на момент написания), ваш сервер должен возвращать данные JSON как content-type = text / html. Плагин автоматически извлекает теги <\ pre> и т. Д. (См. Источник). Я думаю, когда они пытались заставить скрытый iframe вернуть json назад, они решили обработать json текст и проанализировать его из iframe.

Answer 3

Хотя это было не совсем то, что я стремился решить, я смог найти немного другое решение, которое отвечало моим потребностям!

Поскольку загрузка ajax-файла осуществляется через iframes, проблема заключалась в том, что после загрузки iframe-файла .json он был интерпретирован Firefox как загрузка и было открыто приглашение на загрузку. Я почти уверен, что мог бы поиграть с некоторыми настройками сервера, чтобы предотвратить это, но я уже потратил на это достаточно времени.

Итак, я сделал вывод в виде текста вместо json, потому что я все равно ловил только один идентификатор. Мой код теперь выглядит так:

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

Номер идентификатора, который мне был нужен, также был заключен в предварительные теги, поэтому мне нужно было также удалить их в моей функции результатов.

Это делает то, что я хочу сейчас, ух!

Answer 4

Этот плагин позволит вам отправлять MultiPart формы, используя ajax.

Если вы хотите использовать опцию Ajax «success:», вы должны отправить форму, используя ajax. В настоящее время вы используете функцию submit () , которая в основном просто передает форму традиционным способом. Тот факт, что вы можете видеть данные json как загруженный файл или в своих браузерах, означает, что это происходит.

Вам необходимо использовать этот плагин (если вам нужна функция multipart - в противном случае просто используйте обычную функцию Ajax)

С плагином вы бы использовали его так:

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

});

Если вы хотите сделать это без загрузки файла, есть более простой способ сделать это.

$("#SubmitButton").click(function(){

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


    });

Answer 5

Звучит так, как будто его Content-Type заголовок ответа неверен, и поэтому браузер не знает, что с ним делать. Это должно быть application/json. Вы можете использовать панель Firebug Net для определения фактических заголовков ответа.

Answer 6

Простой способ:

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

Answer 7

Может быть, это поможет

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

И на стороне сервера вывод должен быть таким (только этот вывод или без какого-либо другого текста внутри тега body)

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

Не очень хорошо, но работает

Answer 8

Отменяете ли вы действие по умолчанию для события submit? Похоже, что форма действительно отправляется (в классическом смысле - другими словами, Firefox фактически переходит на страницу, указанную в action) формы.