11

Railsにモデル作成フォームがあり、ajaxを介してJSONを返すこともできます。これまでの私のコードは次のようになります。

$('#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

プラスCookieヘッダー

4

8 に答える 8

8

ブラウザが.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);
            }
        });

完璧に動作します。

于 2010-08-09T13:19:38.853 に答える
2

自分が目指していた解決策とは言えませんが、自分のニーズに合った少し違う解決策にたどり着くことができました！

ajaxファイルのアップロードはiframeを介して行われるため、問題は、iframeが.jsonファイルを読み込んだ後、Firefoxによってダウンロードとして解釈され、ダウンロードプロンプトが開かれることでした。これを防ぐためにいくつかのサーバー設定で遊ぶことができたと確信していますが、私はすでにこれに十分な時間を費やしています。

とにかく実際には1つのID番号しか探していなかったので、私が行ったことは、jsonではなくテキストとして出力をレンダリングしました。私のコードは次のようになります：

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

必要なID番号もpreタグでラップされていたので、結果関数でもそれらを取り除く必要がありました。

これは私が今やりたいことをします、ウー！

于 2010-05-03T05:44:17.230 に答える
2

このプラグインを使用すると、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
});
于 2010-05-03T03:37:02.267 に答える
2

実際、そのプラグインのajaxSubmitコードは少しハッキーです。ajaxSubmitを（執筆時点で）機能させるには、サーバーがJSONデータをcontent-type = text/htmlとして返す必要があります。プラグインは自動的に<\pre>タグなどを削除します（ソースを参照）。非表示のiframeを取得してjsonを引き戻そうとしたときに、jsonをテキストとして処理し、iframeから解析することにしました。

于 2011-01-06T06:03:29.297 に答える
1

応答ヘッダーが正しくないように聞こえるContent-Typeので、ブラウザはそれをどう処理するかわかりません。する必要がありますapplication/json。Firebugのネットパネルを使用して、実際の応答ヘッダーを判別できます。

于 2010-05-03T02:12:57.690 に答える
0

submitイベントのデフォルトのアクションをキャンセルしますか？フォームが実際に送信されているように聞こえます（古典的な意味では、Firefoxは実際にはフォームで指定されたページに移動していますaction）。

于 2010-05-03T02:38:25.647 に答える
0

多分それは役立ちます

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

あまり良くないが、働いている

于 2010-06-20T22:13:13.660 に答える
0

簡単な方法：

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

于 2018-10-09T17:22:35.890 に答える