2016-09-06 70 views
1

我有一個HTML表單,我從外部源拉動數據後動態地填充了javascript,但是我遇到了一個問題,那裏的數據通過javascript放入表單中並沒有' t似乎發佈到我的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

看起來您的數據在用戶提交表單時填充了,對吧?爲什麼?對我來說這是一個奇怪的行爲。無論如何,你的數據不會被冒充,因爲你的ajax請求是異步的,並且當表單被冒充時,請求還沒有完成。 – DontVoteMeDown

+0

首先提交了一個不同的表單,它運行JS來填充第二個表單 –

+0

這樣就改變了很多情況。如果可能,請發佈完整的代碼。 – DontVoteMeDown

回答

1

有幾個問題w ith你的代碼,並且爲了使它工作,我改變了一些東西。這個想法很簡單,

  • 用戶輸入電影標題並點擊提交按鈕,這反過來會觸發AJAX。
  • 後端PHP代碼將處理數據,即將從www.omdbapi.com中獲取影片詳細信息,將它們插入數據庫並將它們返回到AJAX請求的success()以json編碼格式填充HTML表單的回調函數。
  • 最後,在success()回調函數中,它將處理返回的數據並填充你的HTML表單。

HTML:

在你的HTML代碼,你只需要改變

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

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" /> 

因此,由於您沒有上傳任何與您的表單,刪除這兩行。或者可能是我在這裏錯過了一些東西。

的jQuery:

jQuery代碼會是這樣,

注:不要忘記你的AJAX請求更改此設置url: yourpage.php

// 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> 

PHP :

最後,這是你如何處理PHP端的數據。它將根據從AJAX請求收到的URL獲取電影細節,將它們插入到數據庫中,並以json編碼格式將它們發送回AJAX的success()回調函數以填充HTML表單。

<?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 
    } 

?>