将数据从下拉菜单提交到mysql而不刷新页面

Posted 2023-02-24

【中文标题】将数据从下拉菜单提交到mysql而不刷新页面

【英文标题】：Submit data from drop down menu to mysql without page refresh

【发布时间】：2015-08-09 20:31:35

【问题描述】：

我正在尝试找到一种方法，可以在不刷新页面的情况下将下拉菜单中的数据提交到 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>

【问题讨论】：

基本上，你想看看AJAX。

我看过这里，看到了一些提示，我已经摸不着头脑了好久，似乎无法理解它！

当然要吸收很多东西。许多人使用库来处理这样的任务。最受欢迎的库之一是 jQuery，它提供了jQuery.post 以尽可能轻松地完成此操作。 This 是您的目标（显然，这不起作用且不完整，但希望它能帮助您入门）。

最好的解决方案是做一个快速的jQuery课程：codecademy.com/en/tracks/jquery它会带你一步一步地思考，在一两个小时内，你将能够使用ajax来编写你的表单。 ..

【参考方案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"] 获取值

【讨论】：

这是有道理的。我现在更新了我的代码以反映这一点。当我点击下拉它似乎根本没有做任何事情。似乎它甚至没有尝试运行脚本？？

尝试在浏览器中打开开发者控制台。您可能在某处有错误。如果您使用的是 chrome，您可以使用 ctrl + shift + i 打开它，然后单击 console。另外，检查network 选项卡并查看请求的标头。您应该会看到正在那里提交的表单数据。此外，检查请求的预览和响应选项卡以查看服务器响应的内容。