使用ajax将javascript变量传递到同一页面上的php变量

时间:2018-04-21 13:53:25

标签: javascript php jquery ajax

我知道我的问题在这里被多次询问过。我已经在过去几天检查了几十个答案,但我仍然无法使其发挥作用。

我有一个带有选项的选择列表,如下所示。每次选择一个新选项时,我想使用AJAX将我的JavaScript变量中的值传递给同一页面上的PHP变量,而不加载页面并在“you selected:”之后回显我的php变量 enter image description here

这是我的代码:

<!DOCTYPE html>
<html>
 <head>
  <title>demo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
  <br /><br />
  <div class="container" style="width:600px;">
   <form method="post" action="">
   <select name="country" id="country" class="form-control action">
    <option value="UK">UK</option>
      <option value="USA">USA</option>
      <option value="Canada">Canada</option>
      <option value="Australia">Australia</option>
   </select>
   <br />
   <p> you selected : 
    <?php   
    if( isset($_POST['myValue']) ){
      echo $_POST['myValue'];
     exit; }
    ?> 
   </p>
   </form>
  </div>
 </body>
</html>

<script>
$(document).ready(function(){
 $('.action').change(function(){
  if($(this).val() != '')
  {
   var selectedOption = $(this).val();
     $.ajax({
      type: 'post',
      data: {myValue: selectedOption},
      success: function(data){
       console.log('country : ' + data);
      }
     });

  }
 });
});
</script>

当我检查我的控制台时,我看到结果console.log('country : ' + data);,这意味着数据被传递给我的变量。但是echo $_POST['myValue'];在我的网页上没有显示任何结果。

任何想法请为什么我的页面上没有显示回声?非常感谢你的帮助。

0 个答案:

没有答案