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的“隐藏”按钮：

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

使用Jquery中的Ajax将数据发送到DB

2 个答案: