php - ajaxポストスクリプト

Question

次のスクリプトをいじっただけです。動いていない。

<SCRIPT> 

function kin() {
    var kobj = document.getElementById("k"); // input Object 
    var q = kobj.value; 

       $.ajax({
      type: "POST",
      URL: "zips.php",
      data:q,
      success: function(res) {
            $("#result").append(res);
            console.log(res);
      }
   });

}

</SCRIPT> 

 <INPUT type="text" autocomplete="off" value="" id="k"><input type="submit" value="search" onClick="kin()" data-role="button">      
<DIV id="result"></DIV>

Answer 1

それ以外の：

data:q,

試す：

data:{"q":q},

Answer 2

投稿したコードに 2 つのエラーがあることに気付きました。古いコードにコメントしたので、変更に簡単に気付くことができます。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<SCRIPT> 

function kin() {
    //var kobj = document.getElementById("k"); // input Object 
    //var q = kobj.value; 

    var q = $("#k").val();

       $.ajax({
      type: "POST",
      url: "zips.php",
      //data:q,
      data: "q="+q,
      success: function(res) {
            $("#result").append(res);
            console.log(res);
      }
   });

}

</SCRIPT> 

 <INPUT type="text" autocomplete="off" value="" id="k"><input type="submit" value="search" onClick="kin()" data-role="button">      
<DIV id="result"></DIV>

JQuery を使用すると、投稿したコードを次のように書き換えることができます。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<SCRIPT> 

$(document).ready(function() { 
    $("#submit").click(function(e) {
      e.preventDefault();

      var q = $("#k").val();

      $.ajax({
          type: "POST",
          url: "zips.php",
          data: "q="+ q,
          success: function(res) {
                $("#result").append(res);
                console.log(res);
        },
      });

    });       

});

</SCRIPT> 

 <INPUT type="text" autocomplete="off" value="" id="k"><input type="submit" id="submit" value="search" data-role="button">      
<DIV id="result"></DIV>