有关PHP,Jquery和Ajax的问题​​。

时间:2012-10-18 09:40:09

标签: php jquery mysql ajax

我目前在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;'/>

感谢任何帮助

4 个答案:

答案 0 :(得分:1)

正如其他人所说,我们不知道你提交的是什么; - )

使用一个类,这意味着它必须为每个项目创建一个新的绑定,它可以一次完成所有操作。

您可以执行以下操作:

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

});

答案 1 :(得分:0)

我认为您需要检查data: {'changestatusoff': changestatusoff}并尝试将其更改为data: {changestatusoff: 'changestatusoff'}

答案 2 :(得分:0)

如果你想改变加载gif,那么你应该把最后两行:

$('#loadingstatus').fadeOut('slow',function(){
$('#changestatusoff'+x).fadeIn('slow',function();

在完成的回调中,而不是在ajax调用之后。

$.ajax
({
type: "POST",
url: '.php',
data: {'changestatusoff': changestatusoff}, 
success: function(data) {
    return data;
},
error: function() {
    alert('Error occured');
},
completed: function() {
    $('#loadingstatus').fadeOut('slow',function(){
    $.('#changestatusoff'+x).fadeIn('slow',function();
}

答案 3 :(得分:0)

尝试以下

$(function(){
   $('#Your_Event_Source').click(function(){
      $(this).fadeOut(600);
      $('#loadingstatus').fadeIn(600);
      $.post('you_file.php',{changestatusoff: 'yourValue'},function(data){
         if(data.success == 'yes'){
             alert(data.message);
             $('#Your_Event_Source').fadeIn(600);
             $('#loadingstatus').fadeOut(600);
         }else{
             alert('failed'+ data.message);
             $('#Your_Event_Source').fadeIn(600);
             $('#loadingstatus').fadeOut(600);
         }
      },'json');
   });
});

我建议在php中使用'success':

$data = array('success'=>'yes','message' => 'your meaasage',...);
echo json_encode($data);