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

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 个解决方案

解决方案1
1 已采纳 2018-05-07 01:38:11

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-05-07 01:38:11

解决方案1
1 已采纳 2018-05-07 01:38:11