2017-05-14 39 views
0

我正在爲項目的後端腳本工作我的PHP技能沒問題,我得到了我想要的工作。但關於JS/AJAX/jQuery的一切我都不明白。用Modal替換Popup並執行PHP腳本

好吧,我的問題:

我有視頻和照片縮略圖集合並希望設置封面照片爲每個。我現在使用的是一個彈出腳本,可以工作。 但我使用管理主題(基於Bootstrap),我購買了它,當我使用模態而不是彈出窗口時,它會更好看。

我嘗試了很多事情來讓彈出窗口中的腳本進入模態 - 但我總是失敗。

我打開與

<a class="btn red btn-outline sbold" href="<?php echo $website; ?>/modals/photo_cover.php?photoid=<?php echo $row['id']; ?>" data-target="#ajax" data-toggle="modal"> Generiere Thumbnails </a> 

這將打開一個預加載模式,我添加到我的網頁也模態。我想要這個,因爲我想在未來添加一個自動生成的拇指。所以,它應該顯示加載器,而拇指將被生成。

<div class="modal fade bs-modal-lg" id="ajax" role="basic" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-body"> 
     <img src="<?php echo $website; ?>/assets/global/img/loading-spinner-grey.gif" alt="" class="loading" /> 
     <span> &nbsp;&nbsp;Generiere Thumbnails ...</span> 
     </div> 
    </div> 
    </div> 
</div> 

然後(外部)模式將與我的腳本開:

<?php 
include_once ('../classes/LS.php'); 
include_once ('../inc/config.php'); 
?> 
<style> 
label > input { visibility: hidden; position: absolute; } 
label > input + img { cursor:pointer; border:2px solid transparent; } 
label > input:checked + img { border:2px solid #f00; } 
</style> 
<div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button> 
    <h4 class="modal-title">Galerievorschau</h4> 
</div> 
<div class="modal-body"> 
    <div class="row"> 
    <div class="col-md-12"> 
<?php 
if ($_SERVER['REQUEST_METHOD'] === 'POST') { 
    $sql = "UPDATE content_pic_db SET pic_poster_file = :pic_poster_file WHERE id = :id"; 
    $stmt = $dbh1->prepare($sql); 
    $stmt->bindParam(':id',    $_GET['photoid']); 
    $stmt->bindParam(':pic_poster_file', $_POST['poster']); 
    $stmt->execute(); 
?> 
     <div class="portlet-body"> 
     <div class="note note-danger"><p>Klicke auf ein Bild um es als Vorschaubild f&uuml;r die Galerie festzulegen.</p></div> 
     <div class="row"> 
      <div class="col-sm-12 col-md-12">Das Vorschaubild wurde erfolgreich Deiner Galerie zugewiesen. Du kannst jetzt dieses Fenster schliessen.</div> 
     </div> 
     </div> 
<?php } else { ?> 
     <div class="portlet-body"> 
     <div class="note note-danger"><p>Klicke auf ein Bild um es als Galerievorschau festzulegen.</p></div> 
     <div class="row"> 
      <form id="preview" method="POST"> 
<?php 
if (!empty($_GET['photoid'])) { 
    $stmt = $dbh1->prepare('SELECT pic_count, pic_path FROM content_pic_db WHERE id = :id'); 
    $stmt->execute(array(':id' => $_GET['photoid'])); 
    $row = $stmt->fetch(PDO::FETCH_ASSOC); 
    $pfad = $row['pic_path'] . '/thumbs/'; 
    $scan = glob($pfad . "*.{jpg}",GLOB_BRACE); 
    for ($i = 0; $i<count($scan); $i++) { 
    if (strlen($scan[$i]) >= 3) { 
?> 
      <div class="col-sm-6 col-md-6"> 
       <label class="thumbnail"> 
       <input type="radio" name="poster" value="<?php echo substr($scan[$i], 50); ?>" /> 
       <img title="Klicke auf ein Bild um es als Vorschau auszuw&auml;hlen" src="<?php echo $website; ?>/stream_g.php?id=<?php echo $_GET['photoid']; ?>&file=<?php echo substr($scan[$i],50); ?>" /> 
       </label> 
      </div> 
<?php 
     } 
    } 
    } 
} 
?> 
      </form> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 
<div class="modal-footer"><button type="button" class="btn red" data-dismiss="modal">Fenster schliessen</button></div> 
<script>$('input[name=poster]').change(function() { $("#preview").submit(); });</script> 

在這裏開始我的問題。

模式將會打開,但是當我選擇一個圖像(我用圖像替換單選按鈕)作爲封面時,模式將被關閉並且不會寫入數據庫。 由於彈出一切正在工作,但不是模態。

我想,我必須使用JS/AJAX/jQuery來寫入數據庫。但我不知道如何...我已經讀了很多tut,但我不明白它是如何工作的。

將是很好,如果有人可以解釋我一步一步我怎麼能得到這個工作...

,我需要知道如何執行腳本並得到通知,如果它被完成。正如我之前所說,我想添加一個選項來生成拇指。所以我想打開預加載模式,生成大拇指,當它完成時,應該顯示選擇封面的第二個模式。

回答

0

您無法使用JS(jQuery或Ajax)在數據庫中編寫代碼。 它只能使用像node.js(面向服務器的js)這樣的框架,但我認爲你不必這樣做。

本地JavaScript不是後端語言

瞧,你必須使用PHP與數據庫交互。 Javascript是一種前端語言,在這個級別(考慮到我們不會使用node.js,這是另一回事:p)。所以,你可以考慮這樣的網頁開發:

FRONT END(Client side)|後端(服務器端)

[HTML + CSS] [JS] < - > [AJAX] < - > [PHP] [SQL]

如果您希望您的網頁,使事情動態地,你必須以不同的方式構建everthing。

我建議你considere工作

這種方式[HTML - >導入jQuery和編寫Ajax請求] - index.html的(只腳本)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="application/javascript"> 
 
    $.ajax({ 
 
      type: 'post', 
 
      dataType: 'json', 
 
      url: 'request.php', 
 
      success: function(data){ //Building an array using database datas directly in the body 
 
       var content = "<table><tr><th>Lastname</th><th>Firstname</th><th>Email</th></tr>"; 
 
       for(i = 0; i < data.length; i++) { 
 
        content += "<tr><td>" + data[i].lastname + "</td><td>" + data[i].firstname + "</td><td>" + data[i].email + "</td></tr>"; 
 
       } 
 
       content += "</table>"; 
 
       document.body.innerHTML += content; 
 
      } 
 
    }); 
 
</script>

[PHP - >請求數據庫並返回數據] - request.php

<?php 
 

 
$dbname = "YOUR DATABASE NAME HERE"; 
 
$host = "DATABASE HOST ADDRESS HERE"; 
 
$user = "LOGIN USERNAME HERE"; 
 
$pass = "LOGIN PASSWORD HERE"; 
 

 
try { 
 
    $bdd = new PDO('mysql:host='.$host.';dbname='.$dbname.';charset=utf8', $user, $pass); 
 
} 
 
catch (Exception $e) { 
 
    die('Erreur : ' . $e->getMessage()); 
 
} 
 
$table = "TABLE NAME HERE"; 
 
$colonnes = "*"; //COLUMNS TO SELECT HERE, * FOR ALL 
 
$request = $bdd->query('SELECT ' . $colonnes . ' FROM ' . $table); //SQL QUERY 
 

 

 
/* 
 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% 
 
% BUILDING THE TABLE TO RETURN     % 
 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% 
 

 
TABLE STRUCTURE EXAMPLE : 
 

 
------------------------------------ 
 
| id | lastname | firstname | email | 
 
------------------------------------ 
 
*Line 1* 
 
*Line 2* 
 
*Etc...* 
 
*/ 
 

 
$i = 0; 
 
foreach($request as $req) { 
 
    $table[$i]['lastname'] = $req['lastname']; 
 
    $table[$i]['firstname'] = $req['firstname']; 
 
    $table[$i]['email'] = $req['email']; 
 
    $i++; 
 
} 
 

 
echo json_encode($table); //echo will show datas when executing this script, the ajax request will take every showed data in its success method 
 

 
exit(); 
 

 
?>

顯然,採用這種方法的工作,使您的網站的每一頁是一個html文件。只有PHP腳本使用.php擴展名。對我而言,這是一種更性感的工作方式^^