jQuery/AJAXのやり取りに関する問題

最近jQueryを勉強していて、今日はAJAXで作業していました。私がやりたいことは、現在、日付ピッカーからその日付を返すPHPページに日付を送るだけです。後でPHPページを改善して、私がしなければならないことを行います。ここは、HTMLページのコードです：私は何も起こりませんデータを送信しようとすると、jQuery/AJAXのやり取りに関する問題

<?php 
    echo $_POST["dataS"]; 
?>

しかし：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="generator" content="AlterVista - Editor HTML"/> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> 
    $(document).ready(function() { 
     $("#foo").submit(function(){ 
      var serializedData = $(this).serialize(); 
      $.post('demo.php', serializedData, function(response) { 
       // Log the response to the console 
       console.log("Response: "+response); 
       $("#result").text() = response; 
      }); 
     }); 
    }); 
    </script> 
    <title></title> 
</head> 
<body> 
    <form id='foo'> 
     <input type='date' id='dataI' name='dataI'> 
     <input type='submit' value='send'> 
     <p id='result'></p> 
    </form> 
</body> 
</html>

そして、ここでは私が作ったシンプルなPHPのページです。私は間違って何をしていますか？私はスタックオーバーフローでここで見た解決策を試してみましたが、うまくいきません。

出典

2017-03-16 Marco Belotti

これにはいくつかの理由があります。コンソールのネットワークタブをチェックして、要求の状態が –

コードサンプルを添付しています。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="generator" content="AlterVista - Editor HTML"/> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    
 
    <script type="text/javascript"> 
 
    function validate(){ 
 
\t \t 
 
\t \t var serializedData = $('#foo').serialize(); 
 
      $.post('ajax.php', serializedData, function(response) { 
 
       // Log the response to the console 
 
       console.log("Response: "+response); 
 
       $("#result").html(response); 
 
      }); 
 
return false; 
 

 
\t } 
 
    </script> 
 
    <title></title> 
 
</head> 
 
<body> 
 
    <form id='foo' action="#" onsubmit="return validate()"> 
 
     <input type='date' id='dataI' name='dataI'> 
 
     <input type='submit' value='send'> 
 
     <p id='result'></p> 
 
    </form> 
 
</body> 
 
</html>

Ajaxコードファイル。

出典

2017-03-16 10:02:03

であり、ajaxファイル内で "dataS"ではなく "dataI"のような正しいフィールド名を確認してください。 –

return falseを追加してください。 after

$.post('demo.php', serializedData, function(response) { 
      // Log the response to the console 
      console.log("Response: "+response); 
      $("#result").text() = response; 
     });

文。

$(document).ready(function() { 
     $("#foo").submit(function(){ 
      var serializedData = $(this).serialize(); 
      $.post('demo.php', serializedData, function(response) { 
       // Log the response to the console 
       console.log("Response: "+response); 
       $("#result").text() = response; 
      }); 
      return false; 
      }); 
     });

出典

2017-03-16 10:06:42

jQuery/AJAXのやり取りに関する問題

答えて

関連する問題