选择选项后更新数据库

Question

"参考编号，状态"都来自于数据库。下面的代码显示了顶部链接中的结果。我的问题是：当我将选择选项从“待处理”更改为“已交付”时，如何立即将我的数据库更新为“已交付”？

<?php
echo '<tr>
    <td>Reference No</td>
    <td>Status</td>
</tr>';
$result = mysql_query("select * FROM orderhistory"); 
while($row=mysql_fetch_array($result)){
    $shopReference = $row['reference'];
    $status = $row['status'];
    if($status == 'pending')
    {$status = 'Pending';}
    elseif($status == 'delivered')
    {$status = 'Delivered';}
    if($q==0) continue;
?>
    <tr>
    <td><?php echo $shopReference?></td>
    <td>
        <select id="status" name="status" size="1" required>
            <option value="" style="display:none">Status</option>
                <option value="pending" <?php if($status == 'Pending') echo "selected"; ?>>Pending</option>
                <option value="delivered" <?php if($status == 'Delivered') echo "selected"; ?>>Delivered</option>
            </optgroup>
        </select>
    </td>

<?php                   
}
?>

更新数据库的SQL语句很可能是这个：

$sql = "UPDATE orderhistory SET status= '$status' WHERE reference = '$reference'";

但是我应该使用哪个jQuery或其他东西？

我猜应该有一个onChange函数？我不太确定如何使用它。我尝试在网上搜索，但是无法了解任何相关信息...很抱歉，我是新手...

- Thunder

---

尝试一下这个：http://api.jquery.com/change/ - David

你尝试过谷歌搜索“选择框改变时调用PHP”或者搜索“Ajax选择框PHP”吗？ - mplungjan

Answer 1

我经常看到这个问题，所以基于我对概念的理解，我撰写了一篇通用答案，以便将来类似类型的问题能够重定向到这里。

作为新手，你需要知道的第一件事是，在打开 PHP 页面时，PHP 代码首先由服务器执行，然后 HTML 和 JavaScript 由浏览器执行。现在，当你与 HTML 元素交互时，比如更改输入框中的内容、从下拉列表中选择选项，甚至点击按钮等等，这些动作和事件可以被 JavaScript 捕捉到，但是 PHP 不行。因此，你需要一种让客户端（JavaScript）与服务器端（PHP）交互的方法。这种方式称为AJAX。

简单来说，AJAX 的作用是，当用户在页面上执行任何操作，比如点击按钮，使用事件（和事件处理程序），你可以捕捉到用户输入并通过 AJAX 将其传递给 PHP。

AJAX的骨架预览：

$.ajax({ // ajax block starts
   url: 'send.php', // The PHP file that you want to send your user input to
   type: 'POST', /*
                    by default the values will be sent as GET - 
                    through address but if it's sensitive data,
                    use POST 
                 */
   data: {data1: $('#textbox').val(), data2: $('#select').val()}, // The data to be sent
   dataType: 'text', /*
                        Over here you set the type of response that will be sent
                        back by the PHP file. It could be 'text','html' or
                        if you have to send back values in array format 
                        you can use'json' type
                     */
   success: function(data) 
   {
    /* 
       This block will be called once the PHP file is executed and 
       the 'data' parameter here holds
       the values returned from the PHP file
    */
   }
});

如前所述，您可以在页面加载或与HTML元素交互时使用事件和事件处理程序调用AJAX。

例如，我们有一个 button，如下所示：

<input type="button" id="button" value="Click" />

我们可以通过以下方式检测点击事件：

$('#button').click(function(){
  // AJAX here will run on click of button 
}

或者如果我们有一个 select 下拉菜单：

<select id="dropdown">
  <option value=1>1</option>
  <option value=2>2</option>
</select>

当您选择一个选项时，change方法将被触发。

$('#dropdown').change(function(){
   // AJAX here will run on change of select
}

这里的哈希符号 # 表示 id 属性。如果有多个相同的 id，你不能使用它们，此时应该使用 class 属性，然后在类名前加上点号 .，如下所示：

<input type="button" class="button" value="Click">
<input type="button" class="button" value="Click Again">

$('.button').click(function(){ 
    //clicking any of the above button will trigger this code
}

现在由于您有几个具有相同类的按钮，函数如何知道标识哪个按钮已被点击？为此，您使用$(this)。$(this)是一个jQuery元素对象，它指的是调用该方法的当前对象。 另一个重要的要点是，如果您加载了动态HTML元素，则需要添加一个on()事件处理程序。更多信息请点击此处。 现在关键的部分是访问我们从AJAX传递的PHP中的值：

/*
   This if block here detects if the request is sent through AJAX,
   it's not necessary but use this if you want to prevent direct access
   to this PHP file and allow it ONLY through AJAX.
*/
if ( !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest' )
{
    /*
       Now depending on the 'type' we set in our AJAX code, 
       we would have to call it by $_GET if the type is 'GET' 
       and $_POST if the type is 'POST', in the above we have 
       set it to POST so the following code demonstrates the same
    */

    # So the data can be accessed as:
    echo $_POST['data1'];
    echo $_POST['data2'];
}

data1，data2 是我们在 AJAX 中引用传递的值的标识符。

AJAX 中还有很多有用的函数，例如定期访问 PHP 文件（timeout），以数组格式返回数据（json）等。

或者，您也可以使用基于 AJAX 概念的 $.get 和 $.post，但功能较少。

- AyB

Answer 2

$(document).on('change', '#status', function(event) {
    event.preventDefault();
    // make ajax call for update field in db 
    // or submit form (put select in form)
});

- David

Answer 3

尝试使用jQuery的ajax，如下所示：

$(this).on('change', function() {
    var id = $(this).html();
    alert(id);
    $.ajax({
        type:'POST',
        //url: 'updateurl
        success: function(data) {
             //open dialog box and fill it with data
        }
});

- fsalazar_sch