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'}
Не так приятно, но работаю