jquery - 使用 jquery 和 ajax 从表单显示搜索结果

Question

我有简单的表单和脚本，它接受输入数据并调用烂番茄 API 并显示结果。如果我不使用$('#submitid').click(function()并且 var 查询是硬编码的，结果会很好地显示。如果我只是$('#submitid').click(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>

Answer 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;
    });

});

Answer 2

var mydata += //code for appending my data

您需要真正完成这一行或将其完全注释掉。另外，最后你} }) })应该是 } });.