加载Gif无法使用Jquery ajax_Jquery_Ajax

加载Gif无法使用Jquery ajax

jquery ajax

加载Gif无法使用Jquery ajax,jquery,ajax,Jquery,Ajax,当我提交或单击表单按钮时，我想隐藏按钮并显示正在加载的gif，并显示php脚本中的消息这是我的密码 $("button#sub").click(function() { $("div#error").css("color", "red"); if ($("#username").val() == '' || $("#password").val() == '') { $("div#error").html("Please enter your account"); }else

当我提交或单击表单按钮时，我想隐藏按钮并显示正在加载的gif，并显示php脚本中的消息

这是我的密码

$("button#sub").click(function() {

$("div#error").css("color", "red");

if ($("#username").val() == '' || $("#password").val() == '') {

    $("div#error").html("Please enter your account");

}else
    $.post( $("#loginForm").attr("action"), 
            $("#loginForm :input").serializeArray(), 
            function(data) { 
             $("button#sub").delay(100).show(0);
             $("div#load").delay(100).hide(0);
             $("div#error").html(data); 
            });

$("#loginForm").submit(function() {
    return false;
});

}))

您的代码：添加id内容为的div

与您的代码相同：

你最好也包括相关的HTML。例如，如果没有它，我们就看不出您的jQuery选择器是否正确。您的第一个选项代码不起作用，我添加了您的第一行代码，即显示gif，但什么也没有发生。我将其放在post方法之前。图像显示了吗？如果没有，请将其添加到html正文``使用firebug检查错误

// add this code    
$('#content').html('<img id="loader-img" alt="" src="img/loading.gif" width="100" height="100" align="center" />');

// if u dont have an image try this
$('#content').html('Loading... Loading... Loading...');

    $.post( $("#loginForm").attr("action"), 
            $("#loginForm :input").serializeArray(), 
        function(data) { 
         $("button#sub").delay(100).show(0);
         $("div#load").delay(100).hide(0);
         $("div#error").html(data); 

         // and this
         $('#content').html('<div id="load">Loading Complete</div>');
 });

  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ajax Loading</title>

    <style type="text/css">
    div#load{
        padding: 0 3em;
        outline: none;
        border: none;
        color: black;
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 1px;
        font-size: 1em;
        line-height: 4;
        overflow: hidden;
        border-radius: 5px;
        background: rgba(0,0,0,0.2);
        text-align: center;
        cursor: pointer;
        margin: 20px auto;
        display: block;
    }

    #loader-img{
    margin: 0 auto;
    display: block;
    }

    #content{
        width: 40%;
        margin: 0 auto;
        padding: 3em;
        text-align: center;
        color: black;
        font-family: 'Raleway', sans-serif;
        font-size: 18px;
        font-weight: 600;
    }

    .border{border: 3px solid #fff;     border-radius: 5px;}
    </style>
  </head>
  <body>


    <div id="content">
        <div id="load">Get Data</div>
    </div>
    <pre></pre>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(document).on('click','#load',function (e){
            e.preventDefault();
            // Adding loading GIF
            $('#content').html('<img id="loader-img" alt="" src="img/loading.gif" width="100" height="100" align="center" />');

            $.post("http/data.php",
            {
                test: "test"
            },
            function(data){
                $('pre').html('Hi I am ' + data + '!').show();
                $('#content').html('<div id="load">Get Data</div>');
            });


        });
    });
    </script>
  </body>
</html>

<?php 
     echo 'Test Success';
?>

$(document).on('click','#load',function (e){
                e.preventDefault();

$("button#sub").click(function() {