Question

我有一个带有提交按钮的搜索表单，该按钮显示数据库的结果。

我希望在显示结果之前显示加载器，延迟2秒

问题是结果显示整个html页面的结果，而不仅仅是结果div。

代码：

$( document ).ready(function() {
    $(function(){
        $("#search").ajaxForm({
            beforeSend: function() {
                $("#login_result").html("<div id='wrapper'><div class='cssload-loader text-center'></div></div><p>Loading...</p>");
            },
            success: function(data) {
                setTimeout(function() {
                    $("#results").html(data);
                },2000);
            }
        });
    });
});

我的结果代码：

<div class="container bootstrap snippet "  id="results" style="margin-bottom: 90px;">
        <div class="row">
        <div id="login_result"></div>

        <!-- results HERE -->
    </div>
</div>

搜索表单代码：

<div class="col-md-12">
    <p style="font-family: 'rawy-bold';font-size:35px;color:white;margin-top:20px;">
        Search
    </p>
    <form action="index.php" method="post" class="form-inline" id="search">
        <input type="text" class="form-control" name="searchinput" size="50">
        <button type="submit" name="search" class="btn btn-danger">search</button>
    </form> 
</div>

Answer 1

所以基本上你需要做的是解析生成的HTML。然后解析并找到结果周围的包装元素。在这个例子中，我假设它类似于<div class="result-wrapper"></div>：

$( document ).ready(function() {
    $(function(){
        $("#search").ajaxForm({
            beforeSend: function() {
                $("#login_result").html("<div id='wrapper'><div class='cssload-loader text-center'></div></div><p>Loading...</p>");
            },
            success: function(data) {
                setTimeout(function() {
                    // Parse and find element
                    var result = $( data ).find( '.result-wrapper' );
                    $("#results").html( result.html() );
                },2000);
            }
        });
    });
});

Answer 2

我只需将表单action="index.php"更改为action="results.php"即可解决此问题，并将结果代码移至results.php页面。有效！所以当我提交表格并取得成功时; $("#results").html(data);将打印来自results.php的数据，而不是来自index.php ..

jquery提交表单显示整个html作为结果

2 个答案: