Javascript 如何在不重新加载页面的情况下通过下拉菜单更新数据库

Javascript 如何在不重新加载页面的情况下通过下拉菜单更新数据库,javascript,php,mysql,Javascript,Php,Mysql,请首先查看此代码: $(document).ready(function() { $("#alternatecolor [type=button]").each(function() { $(this).on('click', function() { btnObj = $(this); rowId = $(this).attr("rowId"); changeStatus = $(this).attr("changeStatus");

请首先查看此代码:

$(document).ready(function() {
$("#alternatecolor [type=button]").each(function() {
    $(this).on('click', function() {
        btnObj = $(this);
        rowId = $(this).attr("rowId");
        changeStatus = $(this).attr("changeStatus");
        $.get("changeStatus.php?rowId="+rowId+"&changeStatus="+changeStatus,function(data,status){

                                    if(changeStatus == 0){
                str ="Unverify";
                btnText = "Verify";
                newStatus = 1;
            }
            else{
                str ="Verify";
                btnText = "Unverify";
                newStatus = 0;
            }

            if(data == 'success'){                  
                alert("Status updated successfully to "+str+".");
                btnObj.val(btnText);
                btnObj.attr("changeStatus",newStatus);
            }
            else{
                alert("some error");
            }
        });
    });
});
});
</script>
我在这段代码中使用了一个按钮来查询我的数据库,其值为0,1。如果按下一次,则使用1查询数据库;如果再次按下,则使用0查询数据库

现在,我必须用一个下拉列表代替带有3个值的按钮来查询数据库:0,1,2。如果选择第一个值,则要使用值0更新的数据库行,依此类推


如何操作?

删除按钮并添加选择,如下所示:

<select class="my-select">
<option value="0">update</option>
<option value="1">create</option>
<option value="2">delete</option>
</select>
更新 创造 删除

您可以使用类名或ID。如果它是ID,则执行
$(“#id1”)。单击下面代码中的(函数(){…

Awlad已经使用GET方法完成了,下面是使用POST方法

        $(function () {
            $(".my-select").click(function () {
            var category = $(this).text();
            //$('label').css('color', selText);
                $.ajax({
                        url: "invite_db.php",
                        type: "POST",
                        data: {"category": category},
                        success: function(data) {
                            $(".articleContent").html(data);

                            //setInterval("messageDisable()", 5000);
                        }
                    });
            });
        });

我已经根据我的代码使用了参数名。请您更改它。

这是您的HTML和Javascript代码

<select onchange="getval(this);">
<option value="1">One</option>
<option value="2">Two</option>
</select>


<script type="text/javascript">
function getval(sel) {
   $.ajax({
      type: "POST",
      url: url, // url is page where you want to process this post request
      data: 'val=' + sel.value,
});
}
</script>

一个
两个
函数getval(sel){
$.ajax({
类型:“POST”,
url:url,//url是您要处理此post请求的页面
数据:“val=”+sel.value,
});
}
在PHP方面

<?php
 // Your database connection code
 $val = $_POST['val'];
 mysql_query("UPDATE 'tablename' SET 'column name' = $val 'Your WHere caluse'")
?>

若要继续使用事件绑定,请使用
.on('change',function(){})
它似乎不是动态生成的html。因此这里不需要任何委托。“Mysql api”如果已弃用,请使用我会更进一步@GuilhermeNascimento并使用PDO@No1_Melman这是一个很好的建议,但这是一个意见问题。@Guillermenascimento的确,我非常喜欢PDO处理从数据库中获取信息并将其自动放入类中的方式。@No1_Melman感谢您分享您的意见,但我正是因为这个原因,我说这是一个意见的问题(“类型”)。
<select onchange="getval(this);">
<option value="1">One</option>
<option value="2">Two</option>
</select>


<script type="text/javascript">
function getval(sel) {
   $.ajax({
      type: "POST",
      url: url, // url is page where you want to process this post request
      data: 'val=' + sel.value,
});
}
</script>
<?php
 // Your database connection code
 $val = $_POST['val'];
 mysql_query("UPDATE 'tablename' SET 'column name' = $val 'Your WHere caluse'")
?>