Question

我创建了一个HTML文件：

没关系！这是代码：

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<!-- Form part -->
<!-- bdd8feef -->
<!-- http://www.omdbapi.com/?i=tt0978762&apikey=bdd8feef -->
<!-- 1ca8226c006afb25adc4c816a2f8c184 -->
<!-- https://api.themoviedb.org/3/discover/movie?api_key=1ca8226c006afb25adc4c816a2f8c184 -->
<!-- https://api.themoviedb.org/3/search/movie?api_key=1ca8226c006afb25adc4c816a2f8c184&query=star+wars&page=1 -->
<!-- Just a button <button type="button">Click Me!</button> -->
<h2>HTML Forms</h2>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <form action="https://api.themoviedb.org/3/search/movie?api_key=1ca8226c006afb25adc4c816a2f8c184" method="post" target="_blank">
      Buscar:<br>
      <input type="text" name="query" value="black">
      <br>
    <!--   Last name:<br>
      <input type="text" name="lastname" value="Mouse">-->
      <br>
      <input type="submit" value="Submit">
    </form> 
</body>
</html>

但是那个文件获取了一个JSON文件，我想用这种方式解析：

在另一个TAB（Chrome）中，或者可能在同一个文件中显示，确定我有解析JSON文件的代码（我创建第二个图像的代码相同）

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script>
   $(function() {
   $.getJSON('https://api.themoviedb.org/3/search/movie?api_key=1ca8226c006afb25adc4c816a2f8c184&query=star+wars&page=1&language=en', function(data) {
       $.each(data.results, function(i, f) {
            var myPic = "https://image.tmdb.org/t/p/w185" + f.poster_path 
            var myBac = "https://image.tmdb.org/t/p/w92" + f.backdrop_path 
          var tblRow = "<tr>" + "<td>" 
          + f.vote_count + "</td>" + "<td>" 
          + f.id + "</td>" + "<td>" 
          + f.video + "</td>" + "<td>" 
          + f.vote_average + "</td>" + "<td>" 
          + f.title + "</td>" + "<td>" 
          + f.popularity + "</td>" + "<td>" 
          + "<img src=" + myPic + ">" + "</td>" + "<td>" 
          + f.original_language + "</td>" + "<td>" 
          + f.original_title + "</td>" + "<td>" 
          + f.genre_ids + "</td>" + "<td>" 
          + "<img src=" + myBac + ">" + "</td>" + "<td>" 
          + f.adult + "</td>" + "<td>"  
          + f.overview + "</td>" + "<td>" 
          + f.release_date + "</td>" + "</tr>"
           $(tblRow).appendTo("#userdata tbody");
     });
   });
});
</script>
</head>
<body>
<div class="wrapper">
<div class="profile">
   <table id= "userdata" border="2">
  <thead>
            <th>Total de votos</th>
            <th>Id TMDB</th>
            <th>Video</th>
            <th>Promedio de votos</th>
            <th>Titulo</th>
            <th>Popularidad</th>
            <th>Poster</th>
            <th>Lenguaje original</th>
            <th>Titulo Original</th>
            <th>Generos</th>
            <th>Background</th>
            <th>Para Adultos</th>
            <th>Sinopsis</th>
            <th>Fecha de lanzamiento</th>
        </thead>
      <tbody>
       </tbody>
   </table>
</div>
</div>
</body>
</html>

我现在需要的是“合并”两个文件。当用户按下SUBMIT按钮时，解析JSON文件，而不仅仅是代码，在另一个选项卡中，这是无用的，我想查看该表。我需要在INPUT字段（Buscar）中发送文本以创建搜索并使用参数创建表格QUERY=以及用户在输入中写入的单词或单词字段。

作为参数发送的结果字符串将是：

https://api.themoviedb.org/3/search/movie?api_key=1ca8226c006afb25adc4c816a2f8c184&query=black

Answer 1

首先，您将type=submit更改为type=button

<form action="https://api.themoviedb.org/3/search/movie?api_key=1ca8226c006afb25adc4c816a2f8c184" method="post" target="_blank">
  Buscar:<br>
  <input type="text" name="query" value="black">
  <br>
<!--   Last name:<br>
  <input type="text" name="lastname" value="Mouse">-->
  <br>
  <button type="button" id="submitform">Submit</button>
</form> 
<div class="wrapper">
<div class="profile">
<table id= "userdata" border="2">
   <thead>
        <th>Total de votos</th>
        <th>Id TMDB</th>
        <th>Video</th>
        <th>Promedio de votos</th>
        <th>Titulo</th>
        <th>Popularidad</th>
        <th>Poster</th>
        <th>Lenguaje original</th>
        <th>Titulo Original</th>
        <th>Generos</th>
        <th>Background</th>
        <th>Para Adultos</th>
        <th>Sinopsis</th>
        <th>Fecha de lanzamiento</th>
    </thead>
  <tbody>
   </tbody>
</table>
</div>
</div>

然后使用jquery重定向

$(document).ready(function(){
    $('#submitform').click(function(){
        var action =  $(this).parent().attr('action');
      var value_user_type = $(this).parent().find('input[name="query"]').val();
//change space to plus if you want, it works with multiple space
//value_user_type = value_user_type.split(' ').filter(function(value){return value != ""}); //this line split all words into array
//value_user_type = value_user_type.join('+',value_user_type ); // this line join all words and add the plus
        action += '&query='+value_user_type +'&page=1&language=en'; // this is add whatever user entered
        $.getJSON(action , 
   function(data) {
      $.each(data.results, function(i, f) {
        var myPic = "https://image.tmdb.org/t/p/w185" + f.poster_path 
        var myBac = "https://image.tmdb.org/t/p/w92" + f.backdrop_path 
      var tblRow = "<tr>" + "<td>" 
      + f.vote_count + "</td>" + "<td>" 
      + f.id + "</td>" + "<td>" 
      + f.video + "</td>" + "<td>" 
      + f.vote_average + "</td>" + "<td>" 
      + f.title + "</td>" + "<td>" 
      + f.popularity + "</td>" + "<td>" 
      + "<img src=" + myPic + ">" + "</td>" + "<td>" 
      + f.original_language + "</td>" + "<td>" 
      + f.original_title + "</td>" + "<td>" 
      + f.genre_ids + "</td>" + "<td>" 
      + "<img src=" + myBac + ">" + "</td>" + "<td>" 
      + f.adult + "</td>" + "<td>"  
      + f.overview + "</td>" + "<td>" 
      + f.release_date + "</td>" + "</tr>"
       $(tblRow).appendTo("#userdata tbody");
    });
  });
    })
})

要阻止表单发布，请添加更多

    $('form').submit(function(e){
        e.preventDefault();
    })

如何使用参数从SUBMIT按钮调用JQuery函数

1 个答案: