JQuery表單提交API AJAX

有沒有人知道爲什麼這不允許表單提交？我正在嘗試將Rotten Tomatoes API與用戶搜索功能結合使用。JQuery表單提交API AJAX

形態 - PHP頁面

<form name="myform" action="" method="GET"><h3>Search for a movie here:</h3><br> 
    <input type="text" id="inputbox" value="">&nbsp; 
    <input type="submit" name="submit" value="Go!">

JAVASCRIPT

$('form[name="myform"]').submit(function() { 
    $('#films table').empty(); //removes previous search results before adding the new ones. 

    var apikey = "frceg2d5djxezaedgm3qq94h"; 
    var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0"; 
    var moviesSearchUrl = baseUrl + '/movies.json?apikey=' + apikey; 
    var query = form.inputbox.value; //uses the value from the input box as the query search 



     // sends the query 
     $.ajax({ 
     url: moviesSearchUrl + '&q=' + encodeURI(query), 
     dataType: "jsonp", 
     success: searchCallback // if successful, run searchCallback function 
     }); 


    // receives the results 

    function searchCallback(data) { 
    $('#films table').append('Found ' + data.total + ' results for ' + query); 
    var movies = data.movies; 
    $.each(movies, function(index, movie) { 
     $('#films table').append('<tr><td width="70" rowspan="2"><a href="' + movie.links.alternate + 
     '" title="Click here to view film information for ' + movie.title + '."><img class="ajaximage" src="' 
     + movie.posters.thumbnail + '" /></a></td><td class="ajaxfilmlisttitle"><h3><a href="' + movie.links.alternate + 
     '" title="Click here to view film information for ' + movie.title + '.">' + movie.title + '</a></h3>Release year: ' 
     + movie.year + '</td></tr><tr><td class="ajaxfilmlistinfo">Audience Score: ' + movie.ratings.audience_score + 
     '%<br>' + 'Cinema Release Date: ' + movie.release_dates.theater + 
     '<br>Runtime: ' + movie.runtime + ' minutes</td></tr>'); 
    }); 
    }; 
    });

來源

2014-02-11 B-B.

似乎就好像你在document.ready（）包裝器中沒有這個javascript一樣。表單本身之前的javascript輸出？ –

它以前沒有文檔就緒標籤，但只能使用onClick函數。 –

我用這個代碼測試，它的工作原理：

<form name="myform" action="" method="GET"> 
    <h3>Search for a movie here:</h3> 
    <input type="text" id="inputbox" value="" />&nbsp; 
    <input type="submit" name="submit" value="Go!" /> 
</form> 

<script> 

    $(function(){ 

     $('form[name="myform"]').on('submit', function(e) { 
      e.preventDefault(); 

      $('#films table').empty(); //removes previous search results before adding the new ones. 

      var apikey = "frceg2d5djxezaedgm3qq94h"; 
      var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0"; 
      var moviesSearchUrl = baseUrl + '/movies.json?apikey=' + apikey; 
      var query = $('#inputbox').val(); //uses the value from the input box as the query search 

      // sends the query 
      $.ajax({ 
       url: moviesSearchUrl + '&q=' + encodeURI(query), 
       dataType: "jsonp", 
       success: searchCallback // if successful, run searchCallback function 
      }); 

      // receives the results 
      function searchCallback(data) { 
       $('#films table').append('Found ' + data.total + ' results for ' + query); 
       var movies = data.movies; 
       $.each(movies, function(index, movie) { 
        $('#films table').append('<tr><td width="70" rowspan="2"><a href="' + movie.links.alternate + 
        '" title="Click here to view film information for ' + movie.title + '."><img class="ajaximage" src="' 
        + movie.posters.thumbnail + '" /></a></td><td class="ajaxfilmlisttitle"><h3><a href="' + movie.links.alternate + 
        '" title="Click here to view film information for ' + movie.title + '.">' + movie.title + '</a></h3>Release year: ' 
        + movie.year + '</td></tr><tr><td class="ajaxfilmlistinfo">Audience Score: ' + movie.ratings.audience_score + 
        '%<br>' + 'Cinema Release Date: ' + movie.release_dates.theater + 
        '<br>Runtime: ' + movie.runtime + ' minutes</td></tr>'); 
       }); 
      }; 
     }); 
    }); 
</script>

有幾個問題：

的form.inputbox.value沒有工作，將其更改爲$('#inputbox').val()
添加e.preventDefault()，以防止從被提交
有一個失蹤});
變化$('form[name="myform"]').submit(function() {到$('form[name="myform"]').on('submit', function(e) {

來源

2014-02-11 20:36:55 Pierre

不幸的是，這不是解決方案。 URL改變以識別提交，但它實際上不檢索API數據。 –

也許嘗試將數據類型從'jsonp'更改爲'json'？ – Pierre

我只是使用你的代碼做了一個測試，它的工作原理。如果您阻止提交表單，該怎麼辦？ '$（'form [name =「myform」]'）。submit（function（e）{e.preventDefault（）;' – Pierre

JQuery表單提交API AJAX

回答

相關問題