使用输入键 AJAX API 提交 JQuery 表单答案

【问题标题】：JQuery Form Submission with enter key AJAX API使用输入键 AJAX API 提交 JQuery 表单
【发布时间】：2014-02-11 11:57:43
【问题描述】：

我尝试了各种解决方案，但没有一个适合我的特殊情况！我怎样才能做到这一点，以便当用户按下“输入”时表单提交和搜索。我还想尝试从 HTML 文档中删除 JavaScript，并将其移动到 ajax.js 文档并选择它。我不确定这样做的正确语法。顺便说一下，我正在使用带有 AJAX 的烂番茄 API。

search.php

<form name="myform" action="" method="GET"><h3>Search for a movie here:</h3><br> 
    <input type="text" id="inputbox" value="">&nbsp;
    <input type="button" id="button" value="Go!" onClick="filmlist(this.form)">
        </form>

ajax.js

function filmlist (form) {
$('#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
  });


// 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>');
 });
}
}

【问题讨论】：

你是什么意思“从 HTML 文档中删除 JavaScript，并将其移动到 ajax.js 文档并选择它”？

标签： javascript php jquery mysql ajax

【解决方案1】：

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

或者你可以在你的电影列表函数的末尾return false。

【讨论】：

【解决方案2】：

您可以使用以下 jQuery 代码检测#inputbox 元素中的回车键：

$('#inputbox').keyup(function(e) 
{
    if(e.keyCode == 13) 
    {
        //do your stuff
    }
});

您也可以在用户输入时使用$('#inputbox').change() 直接加载电影。

不要忘记一些旧的或移动浏览器不支持 JavaScript。始终构建服务器端解决方案作为后备。

【讨论】：