使用jquery以输入形式返回json值

时间:2017-11-18 19:38:22

标签: jquery json ajax

我想将API结果抓取到html表单输入值中,以便我可以使用POST方法保存数据等。

但问题是我只能输出span id中的数据..相反,我想把这些数据放入输入值。我想在输入字段中输出结果,但我不知道我该怎么做?我希望你们明白。

还有一件事我怎么能输出数组对象和值?这将是演员结果。

API json结果:http://api.themoviedb.org/3/movie/141052?api_key=e9dfeccf734a61b9a52d9d7660f0d0a1

搜索:141052

screenshot

这是我的完整代码。

<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>
<body>
    <script type="text/javascript">
        $(document).ready(function() {
            var url = 'http://api.themoviedb.org/3/',
            mode = 'movie/',
            movie_id,
            key = '?api_key=e9dfeccf734a61b9a52d9d7660f0d0a1';

            $('button').click(function() {
                var input = $('#movie').val(),
                movie_id = encodeURI(input);
                $.ajax({
                    type: 'GET',
                    url: url + mode + movie_id + key,
                    async: false,
                    jsonpCallback: 'testing',
                    contentType: 'application/json',
                    dataType: 'jsonp',

                    success: function(json) {

                        // grab the span elements by ID and replace their text with the json text

                        $("#movie-title").text(json.title);

                        console.dir(json);
                    },

                    error: function(e) {
                        console.log(e.message);
                    }
                });
            });
        });
    </script>

    <input id="movie" type="text" /><button>Search</button>

    <h1>Movie info:</h1>
    <p>Movie title: <span id="movie-title"></span> </p>


    <div class="input-group">
       <input  id="movie-title" name="file1" type="text"/>
       <div class="input-group-addon">
         Movie Name
       </div>
    </div>

    <div class="form-group ">
        <label class="control-label requiredField" for="Casts">
            4. Casts
            <span class="asteriskField">
                *
            </span>
        </label>

        <input class="form-control" id="Casts" name="Casts" type="text"/>
            <span class="help-block" id="hint_Casts">
                Casts: Name, Name2, Name3
            </span>
    </div>


</body>
</html>

2 个答案:

答案 0 :(得分:0)

制作唯一身份证件需要做一些重要的事情,因为jquery采取了第一次犯罪,所以改变了

<p>Movie title: <span id="span-movie-title"></span> </p>


<div class="input-group">
   <input  id="txt-movie-title" name="file1" type="text"/>
   <div class="input-group-addon">
     Movie Name
   </div>
</div>

尝试$("#txt-movie-title").val(json.title)而不是$(“#movie-title”)。text(json.title);

答案 1 :(得分:0)

不使用text方法,而是使用val方法。此外,您应该更新选择器,使其仅针对您指定的id的输入字段。

$("input#movie-title").val(json.title);

如果您还需要更新范围,请保留原始声明并包含此声明。

来自jquery文档: &#34; .val()方法主要用于获取表单元素的值,例如input, select and textarea。在空集合上调用时,它会返回undefined。&#34;

http://api.jquery.com/val/