使用jquery和ajax显示表单中的搜索结果

我有一个简单的表单和脚本，它接收输入数据，调用API并显示结果。如果我不使用

$（'#submitid'）。单击（function（）

），var查询将显示硬编码结果。如果我只使用

$（'#submitid'）。单击（function（）{}）

与警报一起，将显示表单数据。但是在当前状态下，不会显示任何内容。非常感谢您的帮助

<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>

$（'#submitid'）。单击（函数（）{
var query=$（'#myid'）.val（）；
var apikey=“我的api密钥样本”；
var baseUrl=”http://api.rottentomatoes.com/api/public/v1.0";
//用我们的apikey构造uri
var moviesSearchUrl=baseUrl+'/movies.json？apikey='+apikey；
$（文档）.ready（函数（）{
//发出询问
$.ajax({
url:moviesSearchUrl+'&q='+encodeURI（查询），
数据类型：“jsonp”，
成功：searchCallback
});
});
//返回结果时的回调
函数searchCallback（数据）{
$（document.body）.append(
'找到'+查询的'+data.total+'结果
);
var movies=data.movies；
$.each（电影，功能（索引，电影）{
var mydata+=//用于附加我的数据的代码
});
//在具有id结果的div上显示mydata
$（'#result'）.html（mydata）；
}
})
})

var mydata+=//用于追加我的数据的代码

您需要实际完成这一行或完整地注释它。另外，在最后还有

}}

，应该是

}）
尝试：

HTML:

为了简单起见，我删除了代码，但是它工作得很好。更改括号不会影响脚本。不客气。您可以利用其他jQuery可用函数（如serialize-Thank）来改进代码，buy将对此进行检查。另外，如果您能解释为什么我需要返回false，我将不胜感激；停止表单提交。jQuery Docs：“现在当表单提交时，消息会被提醒。这发生在实际提交之前，因此我们可以通过调用事件对象上的.preventDefault（）或从处理程序返回false来取消提交操作。”-哦，好的，我可以通过包含return false来做同样的事情吗；在实际表单中，onclick=“return false；”是的，但我不建议在页面上已经有jQuery时使用内联事件处理程序。
<form action="" id="someform">
    <input  type="text" id='myid'>
    <input value="Search" type="submit" id="submitid">
</form>

$(document).ready(function() {

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

});