2011-03-10 3 views
0

jQuery를 만들었습니다. & PHP 함수를 사용하여 API의 결과를 다시 가져 오는 AJAX 스크립트. 그 부분은 잘 작동하지만 새 책을 검색 할 때마다 이전 검색 결과가 제거됩니다.jQuery 및 AJAX - 목록 채우기?

책 ID를 부여하고 검색하고 결과를 얻고 계속하고 싶습니다. '검색'을 클릭 할 때마다 더 많은 책으로 목록을 채우고 싶습니다.

이 코드는 이전 책을 삭제하고 내가 검색 한 새 책으로 대체합니다.

아이디어가 있으십니까?

isbn.php :

<script src="http://code.jquery.com/jquery-1.5.js"></script> 
<form method="post" action="ajax.php" id="searchForm"> 
    <input type="text" name="isbn" placeholder="Search..." /> 
    <input class="myaccount" id="doSearch" name="doSearch" type="submit" value="Search" /> 
</form> 

<div id="result"></div> 

{literal} 
<script> 
// attach a submit handler to the form 
$("#searchForm").submit(function(event) { 
// stop form from submitting normally 
event.preventDefault(); 

// get some values from elements on the page: 
var $form = $(this), 
term = $form.find('input[name="isbn"]').val(), 
//term = "isbn", 
url = $form.attr('action'); 
    $.post(url, { doSearch: "Search", isbn: term } , 
     function(data) { 
      var content = $(data); 
      $("#result").html(content); 
     } 
    ); 
}); 
</script> 

ajax.php가 API 호출을 수행하고 isbn.php의 내부에 결과를 출력합니다.

답변

2

방금 ​​다음 내용 추가하려는 경우 : 새 결과가 $("#result").html(content);를 사용하여 다음 결과 DIV의 상단

$("#result").prepend(content); 

로 이동하려는 경우

$("#result").append(content); 

를에 jQuery를 알려줍니다 #result 내의 HTML 전체를 새 내용으로 바꿉니다.

+0

['.append()'] (http://api.jquery.com/append)와 ['.prepend()'] (http://api.jquery.com/prepend) – gnarf

+0

우수! 정말 고맙습니다! – Charlie

1

문제는 #result 블록의 전체 내용을 다시 작성하는 아약스 성공 함수에 있습니다. .html 파일을 .append로 변경했다면,이 파일을 대체하지 않고 추가로 작성하면됩니다.

+0

그랬습니다! 오 이런. 나는 그것을 알아 내려고 너무 많은 googleing을했지만, 내가 무엇을 찾고 있는지 몰랐다. 이제 아주 분명해 보인다! 정말 고맙습니다! – Charlie