2013-02-19 80 views
0

我擁有簡單的表單和腳本,它接收輸入數據並調用爛番茄API並顯示結果。如果我不使用$('#submitid').click(function(),並且var查詢是硬編碼結果顯示正常。如果我僅將$('#submitid').click(function() {})與警報一起使用,則會顯示錶單數據。然而在目前的狀態下,沒有顯示。任何幫助表示讚賞。使用jquery和ajax顯示錶單的搜索結果

<form action=""> 
    <input type="text" id='myid' /> 
    <input value="Search" type="submit" id="submitid" /> 
</form> 

<script> 
    $('#submitid').click(function() { 
     var query = $('#myid').val(); 
     var apikey = "my_api_key_sample"; 
     var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0"; 

     // construct the uri with our apikey 
     var moviesSearchUrl = baseUrl + '/movies.json?apikey=' + apikey; 

     $(document).ready(function() { 
      // send off the query 
      $.ajax({ 
       url: moviesSearchUrl + '&q=' + encodeURI(query), 
       dataType: "jsonp", 
       success: searchCallback 
      }); 
     }); 

     // callback for when we get back the results 
     function searchCallback(data) { 
      $(document.body).append(
       'Found ' + data.total + ' results for ' + query 
      ); 
      var movies = data.movies; 
      $.each(movies, function (index, movie) { 
       var mydata += //code for appending my data 
      }); 

      //displaying mydata on div with id result 
      $('#result').html(mydata); 
     } 
    }) 
    }) 
</script> 

回答

1

嘗試:

HTML:

<form action="" id="someform"> 
    <input type="text" id='myid'> 
    <input value="Search" type="submit" id="submitid"> 
</form> 

的jQuery:

$(document).ready(function() { 

    $("#someform").submit(function(){ 
     $.ajax({ 
      url: moviesSearchUrl + '&q=' + encodeURI(query), 
      dataType: "jsonp", 
      success: searchCallback 
     }); 
     return false; 
    }); 

}); 
+0

這樣做。謝謝 – GuyWhoReadsStockoverflow 2013-02-19 01:41:30

+1

不客氣。你總是可以改進你的代碼購買使用其他jQuery可用的功能,如序列化 - http://api.jquery.com/serialize/ – darshanags 2013-02-19 01:46:20

+0

謝謝,將檢查出來。如果你能解釋我爲什麼需要返回false,我將不勝感激; – GuyWhoReadsStockoverflow 2013-02-19 01:48:35

0

var mydata += //code for appending my data

你需要真正完成這一行或完全註釋掉。此外,最後你有} }) })應該是} });

+0

我取消了簡單起見代碼,然而工作的罰款。更改括號不會影響腳本。 – GuyWhoReadsStockoverflow 2013-02-19 01:38:28

+0

控制檯中有任何錯誤? – 2013-02-19 01:40:05

+0

沒有錯誤,現在按照darshanags的建議解決了。 – GuyWhoReadsStockoverflow 2013-02-19 01:42:13