を提出した後、私は停止Laddaボタンスピンに成功Ajaxフォーム
<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>
このコードには問題はありませんがpost_receiver.phpするフォームデータを提出するために、このコードを持っています。しかし、私は送信ボタン(この1つ:https://msurguy.github.io/ladda-bootstrap/)のスピン効果を表示するためにLaddaボタンを使用していますが、結果が返された直後にこの効果が止まるようにしたいと思います。
私はこのウェブサイトで同様の質問を検索して見つけましたが、JavascriptとAjaxについてほとんど理解していない初心者でも、私はまだ問題を解決できませんでした。
誰かが私がもっと挿入する必要があるコードを教えてください。すべてのあなたの助けを感謝!
'$。post 'の最後に' .always() 'を追加し、' stop() 'で回転を止めます。リンクしたページには、下部にサンプルコードがあります。 – user2896976
この回答を見るhttp://stackoverflow.com/a/40513161/5019802 –