在 Jquery 中使用 Ajax 将数据发送到数据库答案

【问题标题】：Sending data to DB using Ajax in Jquery在 Jquery 中使用 Ajax 将数据发送到数据库
【发布时间】：2018-10-13 06:28:20
【问题描述】：

我正在尝试使用按钮调用隐藏或显示将数据发送到数据库。当我单击隐藏时，它会显示用户信息，而显示则相反。我为此使用的 jQuery 如下：

$(document).ready(function() {

            $("#about-user-widget .hide-btn").click(function(){
                $("#about-user-widget").slideToggle();
                $("#show-button").attr('style', 'margin-bottom: 5px; font-size: 11px; color: #ddd; display: visible;');
            });

            $("#show-button").click(function(){
                $("#about-user-widget").slideToggle();
                $("#show-button").attr('style', 'margin-bottom: 5px; font-size: 11px; color: #ddd; display: none;');
            });

这很好用，很简单。我希望它做的另外是将数据发送到users 表并使用字符串“SHOW”或“HIDE”更新名为view 的列。这样当其他用户来查看他们的个人资料时，它只会显示信息。基于该用户的选择。

我将如何使用 Ajax 来做到这一点？我不擅长 Ajax，也不知道如何将它作为一个函数构建在一起。

我已经开始为 Ajax 隐藏按钮：

    var userLoggedIn = '<?php echo $userLoggedIn; ?>';
    var userInfoHide = 'HIDE';

    $(document).ready(function(){

      $("#about-user-widget .hide-btn").click(function()

    //ajax request for send 'HIDE' string to dB
    $.ajax({
        url: "includes/handlers/ajax_hide_show.php",
        type: "POST",
        data: "userLoggedIn + userInfoHide,
        cache: false,

            success: function(data) {
              $("#about-user-widget").slideToggle();
              $("#show-button").attr('style', 'margin-bottom: 5px; font-size: 11px; color: #ddd; display: visible;');


        });
        });

到目前为止，我有这个 ajax_hide_show.php

$userLoggedIn = $_POST['userLoggedIn'];
$userInfoHide = $_POST['userInfoHide'];

$updateView = mysqli_prepare($con, "UPDATE users SET view=? WHERE username=?");
$updateView->bind_param("ss", $userInfoHide, $userLoggedIn);
$updateView->execute();
$updateView->close();

【问题讨论】：

标签： php ajax mysqli prepared-statement

【解决方案1】：

以这种格式使用....很容易

$(document).ready(function(){
    $("#fname").keyup(function(){
        var fname1 = $('#fname').val();
        if(fname1.length =="") {
            $('.fname_error').remove();
            $('#fname_below').after('<span class="fname_error error">First name is required</span>');
            $('.fname_error').show();
        } else {
            $('.fname_error').hide();
        }

    });
    $("#lname").keyup(function(){
        var lname1 = $('#lname').val();
        if(lname1.length =="") {
            $('.lname_error').remove();
            $('#lname_below').after('<span class="lname_error error">Last name is required</span>');
            $('.lname_error').show();
        } else {
            $('.lname_error').hide();
        }

    });
    $("#cname").keyup(function(){
        var cname1 = $('#cname').val();
        if(cname1.length =="") {
            $('.cname_error').remove();
            $('#cname_below').after('<span class="cname_error error">Company name is required</span>');
            $('.cname_error').show();
        } else {
            $('.cname_error').hide();
        }
    });

【讨论】：

我不确定我是否理解这一点......与上述问题相比似乎没有任何意义。

【解决方案2】：

想通了……数据总是有问题。

var userLoggedIn = '<?php echo $userLoggedIn; ?>';
    var userInfoHide = 'HIDE';
    var userInfoShow = 'SHOW';

        $(document).ready(function() {

            $("#about-user-widget .hide-btn").click(function(){

            //ajax request for send 'HIDE' string to dB
            $.ajax({
                url: "includes/handlers/ajax_profile_hide_info.php",
                type: "POST",
                data: "&userLoggedIn=" + userLoggedIn + "&userInfoHide=" + userInfoHide,
                cache: false,

                        success: function(data) {
                          $("#about-user-widget").slideToggle();
                          $("#show-button").attr('style', 'margin-bottom: 5px; font-size: 11px; color: #ddd; display: visible;');
                        }


                }); 
        });

            $("#show-button").click(function(){

            //ajax request for sending 'HIDE' string to DB
            $.ajax({
                url: "includes/handlers/ajax_profile_show_info.php",
                type: "POST",
                data: "&userLoggedIn=" + userLoggedIn + "&userInfoShow=" + userInfoShow,
                cache: false,

                        success: function(data) {
                          $("#about-user-widget").slideToggle();
                          $("#show-button").attr('style', 'margin-bottom: 5px; font-size: 11px; color: #ddd; display: none;');
                        }
                });
        });

【讨论】：