Question

Database

Result

“参考编号，状态”均来自数据库。以下代码在顶部链接中显示结果。 以下是我的问题：我将选择选项从“待处理”更改为“已发送”后，如何立即将数据库从“待处理”更新为“正在发送”？

<?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上的某些功能？我不太清楚如何使用它。我试图在网上搜索，但无法了解它...对不起，我是新人...

Answer 1

我经常看到这个问题，所以我根据我对概念的理解写了一个通用的答案，将类似类型的未来问题重定向到这里。

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

简单来说，当用户使用events（和event handlers ）在页面上执行任何操作（例如点击按钮）时，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()事件处理程序。更多信息here.

现在关键部分是访问我们从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）返回数据等。

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

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)
});

Answer 3

尝试像这样使用jjery使用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
        }
});

选择选项更改后更新UPDATE数据库

3 个答案: