动态填充的表单数据未发布

时间：2016-09-06 17:31:55

标签： javascript php html forms post

我有一个HTML表单，我从外部源提取数据后动态填充javascript但是我有一个问题，通过javascript输入表单的数据似乎没有发布到我的php脚本（将其插入SQL）。如果我手动将数据输入到表单中，它将发布正常，只有当JS填写表单时它才能正常工作。如何让表单成功发布通过JS输入的数据？

（ps。我是新手，对于我可能遇到的任何基本错误感到抱歉！）

形式：

 <form  id="metadata_form" action="sql_import.php" method="post" enctype="multipart/form-data">
<!--File upload-->
<label for="file"><span>Filename:</span></label>
<input type="file" name="file" id="file" />
<br />
<!--Metadata input-->
<label class="form_label" for="title">Title:</label> <input type="text" id="title" name="movie_title" class="form_input"> <br><br>
<label class="form_label" for="plot">Plot:</label><br> <textarea id="plot" name="movie_desc" style="width: 95%; height: 125px;"></textarea>
<label class="form_label" for="runtime">Runtime:</label> <input type="text" id="runtime" name="runtime" class="form_input"> <br><br>
<label class="form_label" for="released">Release date:</label> <input type="text" id="released" name="release_dt" class="form_input"> <br><br>
<label class="form_label" for="rated">Rated:</label> <input type="text" id="rated" name="rated" class="form_input"> <br><br>
<label class="form_label" for="imdbid">IMDb Link:</label> <input type="text" id="imdbid" name="imdb_lk" class="form_input"> <br><br>
<label class="form_label" for="poster">Poster URL:</label> <input type="text" id="poster" name="poster_url" class="form_input"> <br><br>
Poster Preview:<br> <div class="poster" style="width:auto;"><img src=""></div> <br><br>
<input type="submit" value="Confirm" style="float:right; clear:both;"/>
</form>

使用Javascript：

  <script type="text/javascript">
  $(window).load(function(){
  var $Form = $('#search_form'), $Container = $('#container');
  $Container.hide();

 $Form.on('submit', function(p_oEvent){
      var sUrl, sMovie, oData;
      p_oEvent.preventDefault();
  sMovie = $Form.find('input').val();
      sUrl = 'https://www.omdbapi.com/?t=' + sMovie + '&type=movie&plot=full'
      $.ajax(sUrl, {
          complete: function(p_oXHR, p_sStatus){
              oData = $.parseJSON(p_oXHR.responseText);
              console.log(oData);
              //output data to form
              document.getElementById('title').value = (oData.Title);
              document.getElementById('plot').value = (oData.Plot);
              document.getElementById('runtime').value = (oData.Runtime);
              document.getElementById('released').value = (oData.Released);
              document.getElementById('rated').value = (oData.Rated);
              document.getElementById('imdbid').value = ('http://www.imdb.com/title/' + oData.imdbID + '');
              document.getElementById('poster').value = (oData.Poster);
              $Container.find('.poster').html('<img src="' + oData.Poster + '"/>');
              $Container.show();
          }
      });
  });
  });
</script>

PHP：

//Grab data from input form
$movie_title = $_POST['movie_title'];
$movie_desc = $_POST['movie_desc'];
$runtime = $_POST['runtime'];
$release_dt = $_POST['release_dt'];
$rated = $_POST['rated'];
$imdb_lk = $_POST['imdb_lk'];
$poster_url = $_POST['poster_url'];

//Insert query
$query = "INSERT INTO movies (movie_title, movie_desc, release_dt, rated, imdb_lk, thumbnail_path) VALUES ('$movie_title', '$movie_desc', '$release_dt', '$rated', '$imdb_lk', '$poster_url')";
$result = mysqli_query($db, $query);

1 个答案:

答案 0 :(得分：1)

您的代码几乎没有问题，我改变了很少的东西以使其工作。这个想法很简单，

  • 用户输入电影标题并点击提交按钮，进而触发AJAX。
  • 后端PHP代码将处理数据，即从success()获取电影细节，将它们插入数据库并将它们返回给json编码的AJAX请求success()回调函数用于填充HTML表单的格式。
  • 最后，在Poster Preview:<br> <div class="poster" style="width:auto;"><img src=""></div> <br><br> ^^^^^^^^^^^^^^ 回调函数中，它将处理返回的数据并填充HTML表单。

<强> HTML：

在您的HTML代码中，您只需要更改

Poster Preview:<br> <div id="poster_image" style="width:auto;"><img src=""></div> <br><br>
                         ^^^^^^^^^^^^^^^^

到

<label for="file"><span>Filename:</span></label>
<input type="file" name="file" id="file" />

另外，我想指出，根据你的逻辑，这两行是多余的，

url: yourpage.php

因此，由于您没有使用表单上传任何内容，请删除这两行。或者可能是我在这里遗漏了一些东西。

<强> jQuery的：

你的jQuery代码就像这样，

注意：请勿忘记在AJAX请求中更改此// User only enters a movie title and submits the form <script type="text/javascript"> $(window).load(function(){ var $Form = $('#metadata_form'), $Container = $('#container'); $Container.hide(); $Form.on('submit', function(p_oEvent){ var sMovie, sUrl; p_oEvent.preventDefault(); sMovie = $Form.find('#title').val(); sUrl = 'https://www.omdbapi.com/?t=' + encodeURIComponent(sMovie) + '&type=movie&plot=full'; $.ajax({ type: 'POST', url: 'yourpage.php', // change this yourpage.php to point to a page where you want to process your ajax request data: {url : sUrl}, dataType: "json", success: function(oData){ // success if(oData.Response == 'True'){ //output data to form $('#title').val(oData.Title); $('#plot').val(oData.Plot); $('#runtime').val(oData.Runtime); $('#released').val(oData.Released); $('#rated').val(oData.Rated); $('#imdbid').val('http://www.imdb.com/title/' + oData.imdbID); $('#poster').val(oData.Poster); var imgElement = $('#poster_image').find('img'); $(imgElement).attr("src", oData.Poster); $Container.show(); } }, error: function(jqXHR, textStatus, errorThrown){ // error alert(errorThrown); } }); }); }); </script> 设置

success()

<强> PHP：

最后，这就是你如何处理PHP方面的数据。它将根据从AJAX请求收到的URL获取电影详细信息，将它们插入数据库并将它们以json编码格式发送回AJAX的<?php if(isset($_POST['url'])){ $movieData = file_get_contents($_POST['url']); $movie = json_decode($movieData, true); echo $movieData; // to populate your HTML form $movie_title = $movie['Title']; $movie_desc = $movie['Plot']; $runtime = $movie['Runtime']; $release_dt = $movie['Released']; $rated = $movie['Rated']; $imdb_lk = $movie['imdbID']; $poster_url = $movie['Poster']; // Now construct the query and insert it into your table } ?> 回调函数，以填充HTML表单。

<p>Simple ADD/SUBTRACT Calculator</p>

<input type="number" id="num1">
<br>
<!-- field for number 1 -->
<input type="number" id="num2">
<br>
<!-- field for number 2 -->
Enter ADD or SUBTRACT to calculate
<br>
<input type="text" id="opper" value "">
<br>
<!-- field for ADD or SUBTRACT text -->
<button type="submit" onclick="calculate()">Calculate</button>

<p id="answerspace"></p>
<!-- field for the answer -->

<script>
  
  function calculate() {

    var num1 = parseInt(document.getElementById('num1').value);
    var num2 = parseInt(document.getElementById('num2').value);

    var operator = document.getElementById('opper').value;

    if (operator === "ADD") {
      document.getElementById('answerspace').innerHTML = num1 + num2;
    } else if (operator === "SUBTRACT") {
      document.getElementById('answerspace').innerHTML = num1 - num2;
    } else {
      document.getElementById('answerspace').innerHTML = "NOTHING WAS ENTERED";
    }
    
  }
  
</script>
相关问题
最新问题