AJAX, JS 및 Select2에 문제가 발생했습니다.

바보 같은 짓을하는 경우 사과 드리지만 Select2 및 Ajax에 새로운 소식을 전하며이 작업을 수행하는 데 많은 시간을 할애하고 있습니다. 나 자신의 json 파일 ( ~~링크가 제거 된~~ 제거)을 사용하여 양식 ( ~~링크가 제거 된~~ 제거)와 함께 사용하려고합니다. Chrome에서 Firefox Lite를 사용하면 내 서버 (200 OK)에서 응답을받을 수 있지만 선택 상자에 검색 결과가 표시되지 않습니다. 내 json 파일이 http://jsonformatter.curiousconcept.com을 사용하여 올바르게 유효성 검사를하는 것 같습니다.AJAX, JS 및 Select2에 문제가 발생했습니다.

의견이나 요령을 보시나요?

json.php 소스 :

<? 
    $myArray = array(
      array("id" => "id1", "text" => "title1"), 
      array("id" => "id2", "text" => "title2") 
      ); 

    echo json_encode($myArray); 

?>

select.php 소스 : 당신은 JSONP 호출 같은 URL (willwelch.net)를 호출하는

<html> 
<head> 
    <link href="select2/select2.css" rel="stylesheet"/> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <script src="select2/select2.js"></script> 
    <script> 
     function movieFormatResult(movie) { 
      var markup = "<table class='movie-result'><tr>"; 
      markup += "<td class='movie-info'><div class='movie-title'>" + movie.title + "</div>"; 
      markup += "</td></tr></table>" 
      return markup; 
     } 

     function movieFormatSelection(movie) { 
      return movie.title; 
     } 

    </script> 
    <script id="script_e6"> 
     $(document).ready(function() { 
      $("#e6").select2({ 
       placeholder: "Search for a movie", 
       minimumInputLength: 1, 
       ajax: { // instead of writing the function to execute the request we use Select2's convenient helper 
        url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json", 
        dataType: 'jsonp', 
        data: function (term, page) { 
         return { 
          q: term, // search term 
          page_limit: 10, 
          apikey: "my-api-key" // please do not use so this example keeps working 
         }; 
        }, 
        results: function (data, page) { // parse the results into the format expected by Select2. 
         // since we are using custom formatting functions we do not need to alter remote JSON data 
         return {results: data.movies}; 
        } 
       }, 
       formatResult: movieFormatResult, // omitted for brevity, see the source of this page 
       formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page 
       dropdownCssClass: "bigdrop" // apply css that makes the dropdown taller 
      }); 
     }); 
    </script> 
    <script id="script_e6a"> 
     $(document).ready(function() { 
      $("#e6a").select2({ 
       placeholder: "Search for a movie", 
       minimumInputLength: 1, 
       ajax: { // instead of writing the function to execute the request we use Select2's convenient helper 
        url: "http://willwelch.net/play/nhs/pstudents/json.php", 
        dataType: 'jsonp', 
        data: function() { 
         return; 
        }, 
        results: function() { // parse the results into the format expected by Select2. 
         return {results: data}; 
        } 
       }, 
       formatResult: movieFormatResult, // omitted for brevity, see the source of this page 
       formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page 
       dropdownCssClass: "bigdrop" // apply css that makes the dropdown taller 
      }); 
     }); 
    </script>  
</head> 

<body style="height:500px;"> 
    <p>original example (works)</p> 
    <input type="hidden" class="bigdrop" id="e6" style="width: 600px; display: none;"><br><br> 
    <p>my version (does not work)</p> 
    <input type="hidden" class="bigdrop" id="e6a" style="width: 600px; display: none;"> 
</body> 

</html>

출처

2013-01-20 will w

. 귀하의 PHP에서, 당신은 ajax 호출에 의해 전달 된 callback 매개 변수를 캡처해야하고 함수 호출에 결과를 랩핑해야합니다. 함수 이름 = 콜백 매개 변수의 내용입니다.

그래서 당신의 PHP에 대한 호출이 될 수 있습니다

http://willwelch.net/play/nhs/pstudents/json.php?callback=myfunc

그리고 당신이 반환해야하는 것입니다 :

myfunc([{"id":"id1","text":"title1"},{"id":"id2","text":"title2"}])

주 AJAX 호출이 자동으로 콜백 PARAM를 추가합니다.

편집

은 또한 당신은 입력 매개 변수로 data을 추가 할 return 방법을 변경해야합니다 실제로 (JSONP되지 않음) JSON을 사용하는

  results: function (data) { // parse the results into the format expected by Select2. 
       return {results: data}; 
     }

출처

2013-01-20 17:38:47 mccannf

을 의미했다. 이 코드와 두 번째 픽스를 반영하도록 코드를 업데이트하면 select가 채워지지만 모든 항목에는 '정의되지 않음'이 표시됩니다. 이견있는 사람? –

두 가지 질문 : 1. 자바 스크립트 콘솔에서 CORS 오류가 발생하지 않았는지 확인하십시오 (* .Access-Control-Allow-Origin. *에서 허용하지 않는 *.). 그 도메인 **에서 willwelch.net에 연결하는 사람은 ** 그 오류를 얻을 것입니다. 2.'formatResult'와'formatSelection' 라인없이 시도해 볼 수 있습니까? 이 함수는 rottentomatoes API에만 적용됩니다. – mccannf

감사합니다 !!! movie.text를 호출해야 할 때 movie.title을 호출했습니다. –

AJAX, JS 및 Select2에 문제가 발생했습니다.

답변

관련 문제