ボタンとAJAXが応答しない

Question

ImはAJAXでPHPスクリプトを実行するボタンを取得しようとしています。私のコードは完全に間違っている可能性があるので、私は本当にjavaScriptとPHPの新しいです。私は問題が私のボタンクリックコードではなく、あまりAjaxコードではないと思う。すべてのヘルプは要素が存在する（またはブラウザによってレンダリングされる）前に、それが実行されるので、あなたはjQueryの周りDOM ready wrapperが必要

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
    $(".submit").click(function myCall() { 
     var subdata = $("#form").serializeArray(); 
     var request = $.ajax({ 
      url: "construct_new.php", 
      type: "GET", 
      data: subdata 
     }); 
     return false; 
    }); 
    </script> 
    <div> 
     <form id="form"> 
      Name of Product: <input type="text" name="productName" value="Enter Here"> 
      <input type="button" name="submit" value="Submit" class="submit"> 
     </form> 
    </div> 

Answer 1

素晴らしいです。

$(function(){ })または$(document).ready(function(){ });のいずれかを使用できます。

$(function(){ 
    $(".submit").click(function myCall() { 
     var subdata = $("#form").serializeArray(); 
     var request = $.ajax({ 
      url: "construct_new.php", 
      type: "GET", 
      data: subdata 
     }); 
     return false; 
    }); 
}); 

このケースでは、 serializeArray()単に serialize()を必要としません。

開発者のコ​​ンソール/ネットタブを見ていない限り、成功または完全機能が定義されておらず、送信時に何も表示されません。

また、フォームのサブミットイベントを使用すると、サブミットボタンのクリックイベントより優先されます。

$(function(){ 
    $("#form").submit(function myCall() { 
     var subdata = $(this).serialize(); 
     var request = $.ajax({ 
      url: "construct_new.php", 
      type: "GET", 
      data: subdata, 
      success : function(response){ 
       console.log("success!"); 
      } 
     }); 
     return false; 
    }); 
}); 

Answer 2

このような準備ができてドキュメント内にあなたのjQueryを入れて、（フォームを送信するために）デフォルトのアクションを防ぐ：準備

<script type="text/javascript"> 
    $(document).ready(function(){ 
      $(".submit").click(function(e) { 
       e.preventDefault(); 
       var subdata = $("#form").serializeArray(); 
       $.get("construct_new.php",{data: subdata}, function(){ 
        console.log(data); // whatever returned by php 
       }); 
      }); 
     }); 
    </script> 

ドキュメントは、必ずページがすべてのロードが完了したことができます。 e.preventDefault（）は、デフォルトのアクションを停止します（フォームのsubmission、aタグのリンクに続く）。