使用Jquery中的Ajax將數據發送到DB

Question

我正在嘗試使用隱藏或顯示按鈕調用將數據發送到數據庫。 當我單擊隱藏時，它將顯示用戶信息，而顯示則相反。 我為此使用的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 for Hide按鈕：

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

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

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