Question

我想在选择选项中使用ajax并将数据保存在数据库中，而不是在带有按钮的表单中使用选择。这是因为我对每一行都有一个选择，并且每次更改选择的值并单击将值发送到DB时，都会重新加载页面并在顶部滚动。

<select class='form-control col-sm-10' id='status' name='status' >
            <option value='new' ". ($data['status'] == 'new'? 'selected ': '') .">New</option>
            <option value='progress' ". ($data['status'] == 'progress'? 'selected ': '') .">Progress</option>
            <option  value='wait' ". ($data['status'] == 'wait'? 'selected ': '') .">Wait</option>
            <option  value='deler_bestilt' ". ($data['status'] == 'deler_bestilt'? 'selected ': '') .">Deler bestilt</option>
            <option  value='deler_trenger' ". ($data['status'] == 'deler_trenger'? 'selected ': '') .">Deler trenger</option>
            <option value='done' ". ($data['status'] == 'done'? 'selected ': '') .">Izettle betalt</option>
            <option value='close' ". ($data['status'] == 'close'? 'selected ': '') .">Online betalt</option>
            <option value='cancel' ". ($data['status'] == 'cancel'? 'selected ': '') .">Cancel</option>

 <td> <button type='submit' class='btn btn-primary btn-sm'name='update'>Update</button></td>

if (isset($_POST['update'])) {$results = $link->query("UPDATE job SET status='$_POST[status]' WHERE id='$_POST[hidden]'");}

Answer 1

我正在举一个虚拟的例子，您可以从这里寻求帮助。您可以这样实现：

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<form method="POST" id="form_data">
    <input type ="hidden" name="id" value="1">
    <select class='form-control col-sm-10 ' id='status' name='status' >
    <option value='new' ". ($data['status'] == 'new'? 'selected ': '') .">New</option>
    <option value='progress' ". ($data['status'] == 'progress'? 'selected ': '') .">Progress</option>
    <option  value='wait' ". ($data['status'] == 'wait'? 'selected ': '') .">Wait</option>
    <option  value='deler_bestilt' ". ($data['status'] == 'deler_bestilt'? 'selected ': '') .">Deler bestilt</option>
    <option  value='deler_trenger' ". ($data['status'] == 'deler_trenger'? 'selected ': '') .">Deler trenger</option>
    <option value='done' ". ($data['status'] == 'done'? 'selected ': '') .">Izettle betalt</option>
    <option value='close' ". ($data['status'] == 'close'? 'selected ': '') .">Online betalt</option>
    <option value='cancel' ". ($data['status'] == 'cancel'? 'selected ': '') .">Cancel</option>
</form>

<script>
$(document).on('change','select',function(){
   let form_data =  $('#form_data').serialize();
   $.ajax({
        url: 'getdata.php',
        data: form_data,
        type: 'POST',
        success: function(respose) {
            console.log(respose);
            }
        });
})
</script>

然后制作getdata.php文件，您可以使用以下命令检查表单数据：

<?php print_r($_POST); ?>

我认为这对您有所帮助，因为您不知道我们如何通过onchange使用ajax

Answer 2

因此，如果您想在更改值后立即使用ajax发送它

$('#status').on('change', function(){ 
    var value = $(this).val();
    $.ajax({
        type: 'POST',
        url: 'somepage.php', // this is your target page where post will go
        data: {update:value},
        success: function (response) {
            console.log(response); // here you can get response
        }

    });


})

使用Ajax通过Select选项而不是带有按钮的表单来更新数据库

2 个答案: