Как вызвать функцию JQuery с кнопки SUBMIT, используя параметры - PullRequest
Новая
       2

Как вызвать функцию JQuery с кнопки SUBMIT, используя параметры

0 голосов
/ 07 мая 2018

Я создаю HTML-файл, который имеет это:

enter image description here

Все в порядке! Вот код: 

<!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, и я хочу выполнить синтаксический анализ следующим образом:

enter image description here

В другом 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

1 Ответ

0 голосов
/ 07 мая 2018

Сначала вы меняете 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();
    })
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...