從下拉菜單向mysql提交數據而無需刷新頁面

Question

我試圖找到一種方法，可以在不刷新頁面的情況下從下拉菜單向php腳本提交數據。 此刻，當用戶單擊下拉菜單中的選項時，表單操作是將其發送到php腳本，該腳本隨后運行查詢以更新數據庫。 這是我正在使用的下拉菜單之一的代碼。 任何幫助都將是驚人的！

<form action="P1Append.php?PrimaryID=<?php echo $rows['PrimaryID']; ?>" method="post">
    <?php 
    $Check1=$rows['P1'];
    echo $check1;
    if($rows['PeriodInValue'] > '1' && $rows['Day'] == '1') {
    echo '<td bgcolor="#000000">' . $rows['P1'] . '</td>';  
    } else if ($rows['PeriodOutValue'] < '12' && $rows['Day'] == '2') { 
    echo '<td bgcolor="#000000">' . $rows['P1'] . '</td>';  
    } else if(empty($Check1)) {
                    echo '<td><b><select onchange="this.form.submit()" style=" width:30px; height:30px;font-size:12pt; background-color:white;" type="text" name="P1" id="P1" maxlength="15" size="1"><option disabled selected></option><option>G</option><option>R</option></td>';
                      }else if($rows['P1'] == 'G'){
                      echo '<td bgcolor="#02A10C">' . $rows['P1'] . '</td>';        
                      }else if($rows['P1'] == 'R'){
                      echo '<td bgcolor="#FF0000">' . $rows['P1'] . '</td>';
                      }else{

    }
    ?></form>

因此，我一直在這里進行一些搜索，發現其他人已經提出了解決方案。 我已經將此實現到我的代碼中，但似乎無法正常工作？？ 有幫助嗎？

    <form onsubmit="return false">
        <?php 
        $Check1=$rows['P1'];
        echo $check1;
        if($rows['PeriodInValue'] > '1' && $rows['Day'] == '1') {
        echo '<td bgcolor="#0f5b92">' . $rows['P1'] . '</td>';  
        } else if ($rows['PeriodOutValue'] < '12' && $rows['Day'] == '2') { 
        echo '<td bgcolor="#0f5b92">' . $rows['P1'] . '</td>';  
        } else if(empty($Check1)) {
                        echo '<td><b><select style=" width:30px; height:30px;font-size:12pt; background-color:white;" type="text" name="P1" id="P1" maxlength="15" size="1"><option disabled selected></option><option>G</option><option>R</option></td>';
                          }else if($rows['P1'] == 'G'){
                          echo '<td bgcolor="#02A10C">' . $rows['P1'] . '</td>';        
                          }else if($rows['P1'] == 'R'){
                          echo '<td bgcolor="#FF0000">' . $rows['P1'] . '</td>';
                          }else{

        }
        ?></form>
        <script type="text/javascript">
        //on the click of the submit button 
$("#P1").onchange(function(){
 //get the form values
 var P1 = $('#P1').val();

 //make the postdata
 var postData = 'P1='+P1+;

 //call your input.php script in the background, when it returns it will call the success function if the request was successful or the error one if there was an issue (like a 404, 500 or any other error status)
$.ajax({
    url : "P2Append.php?PrimaryID=<?php echo $rows['PrimaryID']; ?>",
    type: "POST",
    data : postData,
    success: function(data,status, xhr)
    {
        //if success then just output the text to the status div then clear the form inputs to prepare for new data
        $("#status_text").html(data);
        $('#name').val('');
        $('#brand').val('');
    },
    error: function (jqXHR, status, errorThrown)
    {
        //if fail show error and server status
        $("#status_text").html('there was an error ' + errorThrown + ' with status ' + textStatus);
    }
});
</script>

Answer 1

通過以JSON格式發布數據，可以使您的生活變得更加輕松。

$("#P1").onchange(function(){
//get the form values
var P1 = $('#P1').val();
var PrimaryID = <?php echo $rows['PrimaryID']; ?>;
//make the postdata
var postData = {
    P1: P1,
    PrimaryID: PrimaryID
}

 //call your input.php script in the background, when it returns it will call the success function if the request was successful or the error one if there was an issue (like a 404, 500 or any other error status)
$.ajax({
    url : "P2Append.php",
    type: "POST",
    data : postData,
    success: function(data,status, xhr) {
    //if success then just output the text to the status div then clear the form inputs to prepare for new data
    $("#status_text").html(data);
    $('#name').val('');
    $('#brand').val('');
},

在您的php腳本中，您只需通過$_POST["PrimaryID"]和$_POST["P1"]即可獲取值