1

私はJavascriptが初めてです。jQuery-ajax-php-cooperation のコードは奇妙なことをします。それは動作します - 時々。

これは私がやりたいことです：

  • フォームでいくつかの設定を行う（機能する）
  • 送信ボタンを押した後に JSON ファイルを読み取る (動作)
  • JSON項目をループし、各項目の値を抽出し、パラメーター文字列を形成します（問題はここにあります：ボタンが押された関数でループが（常に）実行されるわけではありません）
  • 各項目の値から構築されたパラメーター文字列を PHP ファイルに送信します (ループに入った場合に機能します)
  • PHP ファイル (html タグ) からの応答を受け取る (動作)
  • フォーム要素を応答値で更新します (まだ実装されていません。実際には、デバッグ目的で PHP 応答を含むアラートを表示します)

JSON ファイルは有効です (テスト済み)。HTML ページは有効な HTML5 (テスト済み) です。PHP スクリプトが機能し、有効な HTML-Image-Tag (テスト済み) を返します。

ボタンを押しても、デバッグ用に実装したアラートに PHP ファイルからの応答が表示されません。しかし、これは機能します：

  • ページをリロード
  • ファイアーバグを開く
  • ループ開始時にブレークポイントを設定
  • ステートメントを 1 つ先にスキップする
  • ページをリロード
  • ループに入り、すべて正常に動作します

Firebug を閉じることができ、ループは適切に実行されます。

JavaScriptコード

<script type="text/javascript">
$(document).ready(function () {
   //click event of submit button
   $('#generator').click(function(){

   // GET variables
   var datafile = "my.json";
   var logo = false;

   // if checkbox is checked
   if( $('#logo').attr('checked')){
      logo = true;
   };

   // read data from json file
   $.getJSON(datafile,function(data){

   //iterate through the data-sets
   for(var i=0; i < data.length; i++) {

    // get the response from server for each data-set
    $.ajax({
       type: 'POST',
       async: false,
       cache:false,
       url: 'myfile.php',
       data: 'param1='+data[i].field1+'&param2='+data[i].field2+'&logo='+logo,
             success: function(response){

              //$('#imgdisplay').html(response);
              // alert only for debugging purposes
              alert(response);}

          }); // end of ajax-call
       };  // end of for-loop
   }  ); // end of getJSON
 }); // end of button.click
 }); // end of document.ready
</script>

（悪意のあるフォーマットで申し訳ありません）

for ループを使用していますが、each() ループを正しく動作させることができませんでした。

そして、これはフォームです：

<form name="settings">
   <label>Source file</label>
   <select id="datasource" name="datasource">
      <option value="extract">Extract</option> 
      <option value="filter">Filter</option>
   </select><br />
   <label>Logo</label>
   <input type="checkbox" id="logo" name="logo" value="ON"/><br />
   <p>&nbsp;</p>
   <input type="submit" value="Start Generator" id="generator" name="generator" />
</form>
<div id="imgdisplay" class="imgdisplay"></div>

この奇妙な動作の原因は何ですか? どうすれば解決できますか？

4

1 に答える 1

2

匿名のクリック メソッドから false を返してみる

$('#generator').click(function(){
    ....
    return false;
}

これにより、クリックでフォームが投稿されなくなります

于 2012-10-29T17:07:20.057 に答える