Question

使用ajax，我試圖顯示什麼被選中，但它沒有顯示任何出於某種原因。我知道ajax函數本身被調用，通過在函數內部使用alert，我認爲真正的問題實際上是在test2.php中，但我不確定我做錯了什麼。請看看：

test1.php

<?php 

include('ajax.php'); 

echo "<select name = 'select' onchange = 'ajax(\"test2.php\",\"output\")'>"; 

echo "<option value = '1'> 1 </option>"; 
echo "<option value = '2'> 2 </option>"; 
echo "<option value = '3'> 3 </option>"; 

echo "</select>"; 
echo "<div id = 'output'/>"; 

?> 

test2的

<?php 

$select = $_POST['select']; 
echo $select; 

?> 

ajax.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

<script type = "text/javascript"> 

function ajax(url,id) { 

     $.ajax({ 
      type: "POST", 
      url: url, 
      error: function(xhr,status,error){alert(error);}, 
      success:function(data) { 
      document.getElementById(id).innerHTML = data; 
      } 

     }); 

} 

</script> 

Answer 1

您還沒有發佈數據到test2！

<?php 

include('ajax.php'); 

echo "<select id = 'select' onchange = 'ajax(\"test2.php\",\"output\")'>"; 

echo "<option value = '1'> 1 </option>"; 
echo "<option value = '2'> 2 </option>"; 
echo "<option value = '3'> 3 </option>"; 

echo "</select>"; 
echo "<div id = 'output'/>"; 

?> 

function ajax(url,id) { 

     $.ajax({ 
      type: "POST", 
      url: url, 
      data : {select:$('#select').find("option:selected").val()}, 
      error: function(xhr,status,error){alert(error);}, 
      success:function(data) { 
      document.getElementById(id).innerHTML = data; 
      } 

     }); 

} 

Answer 2

您在Ajax請求中缺少數據屬性。

將php腳本和html混合在一起是一種糟糕的做法。總是考慮分離關注。

下面是你應該怎麼做。

<?php 
include('ajax.php'); 
?> 
<select name = 'select'>" 
    <option value = '1'> 1 </option> 
    <option value = '2'> 2 </option> 
    <option value = '3'> 3 </option> 
</select> 
<div id = 'output'/> 

Ajax.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

<script type = "text/javascript"> 
$(function() { 
    $(document).on('change','select',function() { 
     var data = $(this).val(); 
     $.ajax({ 
      type: "POST", 
      url: "test2.php", 
      data: data, 
      error: function(xhr,status,error){alert(error);}, 
      success:function(response) { 
       $("#output").html(response); 
      } 

     }); 
    }); 

}); 
</script>