Question

当我提交或单击表单按钮时，我想隐藏按钮并显示加载的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;
});

}）;

Answer 1

您的密码：添加ID为<div id="content"></div>

的div

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

第二种选择：你可能想试试这个。创建index.php，并在其中创建一个文件夹http，创建一个文件data.php并回显一些东西。在其中创建一个名为img的文件夹loading.gif。从这里下载http://www.ajaxload.info/

使用firefox firebug调试控制台中的返回值。这里http://getfirebug.com/

这是index.php

  <!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>

这是data.php

<?php 
     echo 'Test Success';
?>

关于这一行：

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

与您的代码相同：

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

加载Gif不工作Jquery ajax

1 个答案: