Ajax(jQuery)에서 통신하는 동안 로딩 이미지 표시
하고 싶은 일
Ajax로 서버와 통신할 때, 빙글빙글의 로딩 화상을 표시하고 싶다.
개요
beforeSend 를 사용한다. 이것을 사용하면 ajax 요청 전에 처리를 실행할 수 있습니다.removeClass , addClass sleep() 에서 1초 정도 지연시키고 있습니다. index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Ajax Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
body {
margin-top: 100px;
text-align: center;
}
.hide {
display: none;
}
.loading {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,.5);
background-image: url(../img/712-88.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: 150px 150px;
}
</style>
<form method="post" accept-charset="utf-8">
<p>NAME: <input type="text" name="name" id="name"></p>
</form>
<button id="button1">POST</button>
<div class="msg"></div>
<div class="loading hide"></div>
<script type="text/javascript">
$(function() {
$('#button1').on('click', function(){
$.ajax({
url: 'send.php',
type: 'POST',
data: {
name: $('#name').val()
},
//リクエストが完了するまで実行される
beforeSend: function(){
$('.loading').removeClass('hide');
}
}).done(function(data){
$('.loading').addClass('hide');
$('.msg').append('<p>NAME: ' + data + '</p>');
}).fail(function(XMLHttpRequest, textStatus, errorThrown){
console.log("failed...");
console.log("XMLHttpRequest : " + XMLHttpRequest.status);
console.log("textStatus : " + textStatus);
console.log("errorThrown : " + errorThrown.message);
});
});
});
</script>
</body>
</html>
send.php
<?php
sleep(1);
header('Content-type: text/plain; charset=utf-8');
if(isset($_POST['name'])) {
$name = $_POST['name'];
$msg = nl2br($name);
echo $msg;
} else {
echo "FAILED.";
}
실행 결과
Special Thanks
Reference
이 문제에 관하여(Ajax(jQuery)에서 통신하는 동안 로딩 이미지 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/dkmrkm/items/4aa1a457dd26806e9008텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
