Question

我正在使用我已经删除的附加代码，试图让基础知识先运行。

我正在将文本输入到文本框中并将其用作PHP文件“testnewsearchresults.php”中的变量。运行后，结果将显示在“结果”<div>内。

问题是PHP脚本很长，因此页面似乎没有做任何事情。

我已经读过这个但是我无法弄清楚如何在加载时添加预加载的动画。这是可能的还是我需要更改当前的代码？

<html>
<head>
<script type="text/javascript"     src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">    </script>
</head>
<body>


<form>
<input type="text" placeholder="Search Critera" id="name"/>
<br>
<center><input type="button" onclick="post();" value="Submit"/>   </center>
</form>

<div id="result"></div>

<script type= "text/javascript" >

function post()
{

var name =$('#name').val();

$.post('testnewsearchresults.php',{postname:name},function(data){$('#result').html(data);});

}
</script>


</body>
</html>

Answer 1

您可以使用

在表单POST上将加载图像添加到#result

$('#result').html('<img src="loading.gif" id="loading" />');

完整代码：

    <html>
        <head>
        <script type="text/javascript"     src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">    </script>
        </head>
        <body>


        <form>
        <input type="text" placeholder="Search Critera" id="name"/>
        <br>
        <center><input type="button" onclick="post();" value="Submit"/>   </center>
        </form>

        <div id="result"></div>

        <script type= "text/javascript" >

        function post()
        {
            $('#result').html('<img src="loading.gif" id="loading" />');
            var name =$('#name').val();

            $.post('testnewsearchresults.php',{
                postname:name

            },function(data){
                $('#result').html(data);

            });

        }
        </script>


        </body>
    </html>

演示（我正在添加文字＆＃39;加载＆＃39;而不是演示中的图片，如果您愿意，可以添加图片）http://codepen.io/aharen/pen/MwjyZE

如何添加预加载的“忙”动画？

1 个答案: