【问题标题】:Stop Ladda button spin after successfully submit ajax form成功提交 ajax 表单后停止 Ladda 按钮旋转
【发布时间】:2017-03-25 03:29:50
【问题描述】:

我有这个提交表单数据到 post_receiver.php 的代码

<html>
    <head>
        <title>jQuery post form data using .post() method by codeofaninja.com</title>

    </head>
<body>

<h1>jQuery post form data using .post() method</h1>
<div>Fill out and submit the form below to get response.</div>

<!-- our form -->  
<form id='userForm'>
    <div><input type='text' name='firstname' placeholder='Firstname' /></div>
    <div><input type='text' name='lastname' placeholder='Lastname' /></div>
    <div><input type='text' name='email' placeholder='Email' /></div>
    <div><input type='submit' value='Submit' /></div>
</form>

<!-- where the response will be displayed -->
<div id='response'></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script>
$(document).ready(function(){
    $('#userForm').submit(function(){

        // show that something is loading
        $('#response').html("<b>Loading response...</b>");

        /*
         * 'post_receiver.php' - where you will pass the form data
         * $(this).serialize() - to easily read form data
         * function(data){... - data contains the response from post_receiver.php
         */
        $.post('post_receiver.php', $(this).serialize(), function(data){

            // show the response
            $('#response').html(data);

        }).fail(function() {

            // just in case posting your form failed
            alert( "Posting failed." );

        });

        // to prevent refreshing the whole page page
        return false;

    });
});
</script>

</body>
</html>

这段代码没有问题。但是我使用 Ladda 按钮来显示提交按钮的旋转效果(这个:https://msurguy.github.io/ladda-bootstrap/),我希望这个效果在结果返回后立即停止。

我在这个网站上搜索并找到了一些类似问题的答案,但是作为一个对 Javascript 和 Ajax 几乎一无所知的新手,我仍然无法解决我的问题。

所以有人请告诉我我需要插入更多的代码。感谢您的所有帮助!

【问题讨论】:

标签: javascript php jquery ajax twitter-bootstrap


【解决方案1】:

您可能应该在$('#response').html(data); 之后添加l.stop(),但这取决于您如何初始化Ladda。

如果它不起作用,也发布该代码。

【讨论】:

  • 很晚了,但我还是要说声谢谢。解决方案接受!
猜你喜欢
  • 2018-09-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-11-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-07-07
相关资源
最近更新 更多