麻煩與AJAX，JS，並選擇二

我道歉，如果我做一些愚蠢的事，但我是全新的，以選擇二和阿賈克斯時遇到的一個時間地獄試圖讓這項工作。我試圖創建自己的JSON文件（~~鏈接刪除~~）與形式（~~鏈接刪除~~）我建設使用。在Chrome中使用Firefox精簡版，我能夠從我的服務器（200 OK）的響應，但選擇對話框不顯示搜索結果。我的json文件似乎使用http://jsonformatter.curiousconcept.com正確驗證。你也可以看到它在麻煩與AJAX，JS，並選擇二

任何想法或建議嗎？

json.php來源：

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

    echo json_encode($myArray); 

?>

select.php來源：

<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

要調用您的網址（willwelch.net）作爲JSONP調用。在你的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。

編輯

而且你需要更改return方法添加data作爲輸入參數：

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

來源

2013-01-20 17:38:47 mccannf

我其實是使用JSON（不JSONP）。當我更新我的代碼以反映這一點以及第二次修復時，選擇現在已填充，但所有項目都顯示爲「未定義」。有什麼想法嗎？ –

兩個問題：1，你確定你沒有得到在JavaScript控制檯CORS錯誤（像* ..沒有允許訪問控制允許來源*）。任何一個連接到willwelch.net的人都不會來自那個域**會得到那個錯誤。 2.你可以在沒有'formatResult'和'formatSelection'行的情況下嘗試嗎？這些函數看起來特定於rottentomatoes API。 – mccannf

謝謝！我應該一直打電話給movie.text，我打電話給movie.title。 –

麻煩與AJAX，JS，並選擇二

回答

相關問題