양식 제출시 ajax 페이지 로더 사용?

Question

내 현재 index.php 페이지 형식은 다음과 같습니다 :

<?php include ("header.php") ?> 

Here is the page content 

<?php include ("footer.php") ?> 

header.php 내에 search.php, search.php와 같은 형식의 검색 양식이 있습니다. search.php를 클릭하면 콘텐츠로 인해로드하는 데 약간의 시간이 걸립니다. 나는 ajax를 사용하여 색인 내용을 검색 내용으로 대체하고, 검색 내용이로드되는 동안 이미지 (loading.gif)를 표시하는 것을 좋아합니다. 나는 다른 웹 사이트를 보았습니다.

이것은 기본적으로 내 방문자가 페이지가 실제로로드 중임을 알고 있으므로 제출 버튼을 다시 클릭하지 않아도됩니다.

그래서 아약스에 대한 실질적인 지식이 없으면 어떤 방향으로도 매우 감사 할 것입니다. 어떤 도움도 많이 받으실 것입니다 :)

Answer 1

.

$('#yourForm').submit(function() 
{ 
    // Put your loading code here... 
} 

Answer 2

글쎄,이 솔루션을 발견했습니다.

<script type="text/javascript"> 

function ajax_request() { 
    $('#content').html('<img src="images/ajax-loader.gif" />'); 
    $('#content').load("search.php"); 
} 

</script> 

ajax_request() 함수의 첫 번째 행은 로딩 이미지 <div id="content">의 HTML에서, 두 번째 줄에 다음 DIV search.php로부터 콘텐츠를로드 설정한다.

기능을 실행하려면 제출 버튼에 onclick="ajax_request()"을 추가하십시오.

이미지가로드되기 전에 AJAX 요청이 완료되어 처음에 이미지가 표시되지 않는 것으로 나타 났으므로 이미지의 사전로드를 사용하여 캐시에서 즉시 나타납니다. 나는 순수 CSS로 #preload { display: none; }을 주 스타일 시트에 추가 한 다음 이미지와 함께 해당 div를 삽입하여 앞에<div id ="content"> 아래와 같이 입력합니다.

<div id="preload"> 
    <img src="images/ajax-loader.gif" width="1" height="1"/> 
</div> 

희망이

:) 미래에 다른 사람을 도움