내 Ajax 요청이 작동하지 않습니다.

Question

저는 <ul id="keuze_lijst">이고, 입력 필드는 #sykje이고, 버튼은 .search입니다.

이제 버튼을 누르면 UL을 지우고 데이터로 다시 채우고 싶습니다. 현재이 .js 파일이 있습니다. 내가 아약스 명령을 제거하고 $("#keuze_lijst").html("hello"); 같은 것을 넣을 때

$(document).ready(function() { 
    $(".search").click(function(){ 
     var searchValue = $("#sykje").val(); 
     $("#keuze_lijst").empty(); 

     $.ajax({ 
      url: 'http://www.autive.nl/frysk/simulator/sim.php?action=getSongs&search='+searchValue, 
      data: "", 
      dataType: 'json', 
      success: function(rows) { 
       for(var i in rows){ 
        var row = rows[i]; 
        var id = row[1]; 
        var titel = row[2]; 
        var artiest = row[9]; 

        $("#keuze_lijst").append("<li class='mag_droppen'>"+ 
            "<div class='song_left'>"+ 
            "<div class='titel'>"+titel+"</div>"+ 
            "<div class='artiest'>"+artiest+"</div>"+ 
            "</div><!-- .song_left -->"+ 
            "</li>"); 
       } 

      } 
     }); 
    }); 
}); 

는 그것을 잘 작동합니다. 그러나 ajax 명령은 작동하지 않습니다. var searchValue 그의 일을하지만. (아약스는 올바른 URL을 사용합니다). 그리고 그 URL을 입력하면 페이지가 여러 줄의 좋은 json을 울립니다.

내 페이지에서 아약스 스크립트는 <li>을 추가하지 않습니다.

내가 뭘 잘못하고 있니?

편집 :는 jsfiddle 추가 -

Answer 1

.html()>http://jsfiddle.net/TVvKb/1/가 완전히 HTML을 대체합니다. 따라서 결국 "#keuze_list에 </li>이 포함됩니다.

html을 문자열 var 또는 다른 것으로 만든 후에는 하나의 html() 명령을 실행하기 만하면됩니다.

Answer 2

간략히 살펴보면 문제는 html() 기능을 사용할 때 발생할 수 있다고 말할 수 있습니다. 이것은 실제로 전체 HTML 컨텐트를 대체합니다.

append() 또는 prepend()을 사용해보세요.

Answer 3

가능한 문제 : 당신은 Same Origin Problem으로 실행하는

. 기본적으로 Ajax-Requests는 자신의 도메인에만 만들 수 있습니다. 도메인 간 통화를해야하는 경우 JSONP 또는 CORS을 사용하십시오.

html()을 한 번만 사용하고 전체 문자열을 넘겨야합니다. 그렇지 않으면 이전 html을 항상 무시합니다.

오류 (예 : 잘못된 JSON)로 인해 사용자가 success 핸들러에 착륙하지 않았습니다.

Answer 4

잘 모르겠지만, .append() 및 기타 jQuery 메서드에 문자열을 삽입하면 (유효한) HTML이 먼저 구문 분석됩니다. 즉, 닫히지 않은 태그가 닫혀 HTML이 유효하지 않게됩니다.

$('<div />'); // parses to <div></div> 

그래서, 나는 당신의 DOM이 이런 식으로 끝나는 것으로 가정합니다

$('ul').append('<li>').append('foo').append('</li>'); // <ul><li></li>foo</li></ul> 

것은, 단지 먼저 문자열을 포맷하십시오. jQuery가 모든 입력을 구문 분석하지 않게하려고한다.

프록시 :

var str = '<li>'; str += 'foo'; str += '</li>'; $('ul').html(str); 

(JSONP없이) 도메인 간 AJAX 요청을

---

.PHP

header('Content-Type: application/json'); 

if(empty($_GET['search'])) exit; 

$url = 'http://www.autive.nl/frysk/simulator/sim.php?action=getSongs&search=' . $_GET['search']; 

$ch = curl_init(); 
curl_setopt($ch, CURLOPT_URL, $url); 
curl_exec($ch); 
curl_close($ch); 

자바 스크립트

$.getJSON({ 
    url: 'proxy.php&search='+searchValue, 
    success: callback 
});