Bootstrap 5가 포함된 PHP Ajax jQuery 플러그인에서 모달 및 진행률 표시줄 로드 대기 중
9146 단어 jquerypluginsajaxjquerybootstrap
이전 게시물에서 모달 및 진행률 표시줄을 로드하기 위해 기다리는 부트스트랩 5를 구현하는 방법에 대해 게시했습니다. 이제 PHP를 사용하여 서버 측에서 요청하여 ajax를 통해 구현합니다.
나는 ajax에서 beforeSend() 및 complete() 함수를 사용하여 beforeSend() 함수를 사용하여 모달 로드 대기를 트리거하고 표시하고 complete() 함수를 사용하여 ajax가 서버에 대한 요청을 완료했는지 감지합니다.
아래의 전체 자바스크립트 코드를 확인하세요.
$(document).ready(function() {
$('#ajax-with-simple-dialog').on('click', function() {
var $this = $(this); //submit button selector using ID
// Ajax config
$.ajax({
type: "POST", //we are using POST method to submit the data to the server side
url: 'server.php', // get the route value
beforeSend: function () {//We add this before send to disable the button once we submit it so that we prevent the multiple click
waitingDialog.show('Ajax is processing...', {
onShow: function() {
$this.attr('disabled', true);
},
onHide: function() {
$this.attr('disabled', false);
}
});
},
success: function (response) {//once the request successfully process to the server side it will return result here
},
complete: function() {
waitingDialog.hide();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
// You can put something here if there is an error from submitted request
}
});
});
});
또한 HTML에 대해서는 아래의 다음 코드를 참조하세요.
<!doctype html>
<html lang="en">
<head>
<title>PHP Ajax with Bootstrap 5 Waitingfor Loading Modal with Progress bar jQuery Plugin</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<br/><br/><br/>
<div class="container">
<h3>Simple Dialog with Ajax</h3>
<pre>waitingDialog.show();</pre>
<button type="button" class="btn btn-primary" id="ajax-with-simple-dialog">Submit Request</button>
<br/><br/>
</div>
<!-- Must put our javascript files here to fast the page loading -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Bootstrap Waiting For Script -->
<script src="assets/plugins/bootstrap-waitingfor/bootstrap-waitingfor.min.js"></script>
<!-- Page Script -->
<script src="assets/js/scripts.js"></script>
</body>
</html>
마지막으로
server.php라는 PHP 파일이 있습니다.<?php
echo 'server';
?>
이 튜토리얼이 도움이 되었으면 합니다. 이 코드를 다운로드하려면 여기https://codeanddeploy.com/blog/php/php-ajax-with-bootstrap-5-waitingfor-loading-modal-and-progress-bar-in-jquery-plugin를 방문하십시오.
행복한 코딩 :)
Reference
이 문제에 관하여(Bootstrap 5가 포함된 PHP Ajax jQuery 플러그인에서 모달 및 진행률 표시줄 로드 대기 중), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/codeanddeploy/php-ajax-with-bootstrap-5-waitingfor-loading-modal-and-progress-bar-in-jquery-plugin-2i9e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
