JQuery ajaxForm, возвращающий файл .json

У меня есть форма создания модели в рельсах, у которой я также возвращаю 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()

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

EDIT: 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

плюс заголовок файла cookie

Ответ 1

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

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

Итак, я сделал вывод как текст вместо json, потому что в любом случае я действительно занимался поиском одного номера id. Теперь мой код выглядит следующим образом:

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

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

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

Ответ 2

Чтобы браузер не запускал загрузку .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);
            }
        });

Работает отлично.

Ответ 3

Этот плагин позволит вам отправлять MultiPart Forms с помощью ajax.

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

Вам нужно использовать этот плагин (если вам нужна многочастная функция - иначе просто используйте обычную функцию 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


    });

Ответ 4

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

Ответ 5

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

Ответ 6

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

Ответ 7

Возможно, это помогает

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

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

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

Не так приятно, но работаю