php - 关于 PHP、Jquery 和 Ajax 的问题。

Question

我目前有一个关于 PHP、Jquery 和 Ajax 的问题。

我的页面底部有一个 div，其中包含来自数据库的数据，现在对于数据的每次迭代都会形成一个新的 div，该 div 的 ID 为“pagestatus”，并且接下来会自动递增这样每个 div 的 id 都会更改，例如:'pagestatus0'、'pagestatus1' 等。

现在我对 Jquery 并不是完全陌生，因为我已经使用它来使页面更具交互性，并且我已经使用 Ajax 来更新 MySQL 数据库。

虽然我在处理代码时遇到了问题，但我希望它是这样的:

• 按钮在div中被点击
• 按钮淡入(或 div，哪个更容易)
• 一个带有加载 gif 的隐藏 div 出现在下面
• Ajax 调用 php 文件以更改数据库
• jquery 然后淡出正在加载的 gif 并淡入按钮

我已经为它编写了一些代码，但我认为我在某处出错了，有人可以看到我做错了什么并让我知道如何修复它。

这是我的 Jquery:

$(document).ready(function(){
    for(i=0;i<$('#changestatusoff').val();i++){
        (function(x){
            $('#changestatusoff'+x).click(function(){
                $('#changestatusoff'+x).fadeOut('slow',function(){
                    $('#loadingstatus').fadeIn('slow',function(){
                        $.ajax
                        ({
                            type: "POST",
                            url: '.php',
                            data: {'changestatusoff': changestatusoff}, 
                            success: function(data) {
                                return data;
                            },
                            error: function() {
                                alert('Error occured');
                            }
                            $('#loadingstatus').fadeOut('slow',function(){
                                $('#changestatusoff'+x).fadeIn('slow',function();
                            });
                        });
                    });
                });
            });
        });         
    }
})(i);
});

这是 div 中的按钮:

<input type='button' value='Offline' id='changestatusoff".$count."' style='background: none repeat scroll 0% 0% rgb(0, 118, 188); color: rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0); font-weight: bold; cursor: pointer; margin:5px;'/>

感谢任何帮助

Answer 1

正如其他人所提到的，我们不知道您提交的是什么 ;-)

使用一个类，这意味着它不必为每个项目进行新的绑定(bind)，它可以一次完成。

你可以这样做:

$(function() {
    //set loading
    var $loading = $('#loadingstatus');

    //on changeStatus click
    $('.changeStatus').click( function(e) {
        //since we dont have a form, disable default behaviour
        e.preventDefault();
        //set $this as the item clicked
        var $this = $(this);
        //fadeIn loading, fadeout the item
        $this.fadeOut();
        $loading.fadeIn();
        //make ajax request
        $.ajax
            ({
            type: "POST",
            url: 'yourPhpFile.php',
            data: {'changestatusoff': $(this).val()}, 
            success: function(data) {
                //Do something with data?
                $loading.fadeOut();
                $this.fadeIn();
            },
            error: function() {
                //Do nothing, and tell an error happened
                alert('An error occured');
                $loading.fadeOut();
                $this.fadeIn();
            }
        });
    });

});