0

だから、ここに私が抱えている問題があります：私はjQueryとajaxForm（フォームプラグイン）を使用してフォームを送信しようとしています。ただし、送信ボタンをクリックしても、応答がありません（エラーもありません）。フォームには必須フィールドがあり、現在期待している応答は、1つ（または複数）の必須フィールドが欠落していることを通知し、フォームを正常に完了するためにデータが必要なフィールドの詳細を示すアラートです。

アプリケーションはCodeIgniterに組み込まれているため、フォームアクションはそのように見えます。

これが私のjQueryコードです：

$(function () {

  $("#div_id").dialog({

    autoOpen: false,
    closeOnEscape: true,
    modal: true,
    width: 600,
    title: "A Title",
    buttons: {

      "SUBMIT": function() {

        $("#form_id").ajaxForm({

          dataType: "json",
          success: function(response) {

            response = $.parseJSON(response);
            alert(response['message']);
          }
        });
      },
      "CANCEL": function() {

        // Some clean up here
        $("#div_id").dialog("close");
      }
    },
    close: function() {

      // Some clean up here
      $("#div_id").dialog("close");
    }
  });
});

フォームタグは次のとおりです。

<form method="post" id="form_id" action="/controller/function">

また、ajaxFormプラグインに正しくリンクしています。したがって、問題はそこにありません。私はまだjQueryを学んでおり、助けていただければ幸いです。http://www.malsup.com/jquery/form/とjQueryのドキュメントも調べましたが、答えが見つかりませんでした。

前もって感謝します！

4

1 に答える 1

1

私は問題を解決しました。将来この質問と回答を見つけた人にとって、これは私がしなければならなかったことです：

まず、これはサンプルのonload関数です（jQueryを使用していると仮定します）。

$(function () {
  $("#div_id").dialog({

  autoOpen: false,
  closeOnEscape: true,
  modal: true,
  width: 600,
  title: "Your Title",
  buttons: {

    "SUBMIT": function() { $("#form_id").submit() },
    "CANCEL": function() {

      // Other clean-up functions here
      $("#div_id").dialog("close");
    }
  },
  close: function() {

    // Other clean-up functions here
    $("#div_id").dialog("close");
  }
  });
});

submit（）呼び出しが内部に配置されていることを確認してください

function(){ }

私がこれを行っていなかったとき、私のフォームはページがロードされるとすぐに自分自身を送信しようとし続けました。上記のコード行にそれらを配置すると、これは停止しました。

以下のすべては、上記のonload関数の後にあります。

次に、ajaxFormオプション変数を設定します。

var ajaxFormOptionsVariable = {

  beforeSubmit:  ajaxFormPreSubmitFunction,
  success:       ajaxFormPostSubmitFunction,
  type:          "post",
  dataType:      "json"
};

ここで、ajaxFormオプションについて簡単に説明します。明らかなはずですが（そうでない場合もありますが、それは問題ありません）、変数に任意の名前を付けることができます。あまり明白ではないかもしれませんが、ページに表示されるフォームダイアログごとに個別の変数が必要になるということです。名前に注意してください！

「beforeSubmit」関数および「success」関数として名前が付けられた関数は、任意の名前を付けることもできます。異なる処理を必要とする異なるフォームがある場合は、フォームごとに異なる関数を定義する必要があります。繰り返しますが、名前には注意してください。

「beforeSubmit」関数はオプションです。「type」に「get」を使用することもできます。「dataType」には他のオプションがあることは知っていますが、私にはわかりません（現在は必要ありません）。ただし、データをjsonオブジェクトとして送信したくない場合は、プラグインを調べてオプションを見つけてください。

3番目に、ajaxFormオブジェクトをインスタンス化します。

$('#form_id').ajaxForm(ajaxFormOptionsVariable);

第4に、「beforeSubmit」関数と「success」関数を定義します。

function ajaxFormPreSubmitFunction(response, statusText, xhr, $form) {

  // Whatever processing you want to do before the form is submitted - 
  // probably validation
}

function ajaxFormPostSubmitFunction(response, statusText, xhr, $form) {

  // Whatever processing you want to do after the form is submitted
  // This is where displaying a message to the user happens
}

コールバック関数に提供される引数について簡単に説明します。まず、応答は、サーバーから返されるものがすべてどこにあるかです。第二に、あなたはする必要はありません

response = $.parseJSON(response);

応答は自動的に解析されます。スクリプトの送信後のコールバックでは、実際には、一方の要素がtrue / false値で、もう一方の要素がユーザーに表示したいメッセージである配列を返します。たとえば、次のようになります。

if (response['result'] == true) {

  $("#success_dialog").html(response['message']);
  $("#success_dialog").dialog("open");
}
else {

  $("#error_dialog").html(response['message']);
  $("#error_dialog").dialog("open");
}

だから、それはそれです。これを行うために、コードがすべて間違っていました。いくつかの欲求不満の後、私はそれを機能させています。私は戻ってきてそれを共有したかったので、質問に回答済みのマークを付けることができ（私が解決したので誰かがこれに時間を浪費するのを防ぐため）、また将来このメッセージに遭遇する可能性のある人を助けるために。

于 2013-03-28T22:19:46.053 に答える