原生Javascript不是后端语言

Question

我目前在项目的后端脚本上工作我的PHP技能还可以，我得到了我想要的工作。但是关于JS / AJAX / jQuery的一切我都不明白。

好的，我的问题：

我有视频和照片集的缩略图，并希望为每个设置封面照片。我现在使用弹出脚本，这是有效的。但是我使用了一个管理主题（基于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>

这是我的问题。

模态将打开，但是当我选择一个图像（I＆＃34;替换＆＃34;带图像的单选按钮）作为封面时，模式将被关闭，并且不会将任何内容写入数据库。弹出一切都在起作用，但不是模态的。

我认为，我必须使用JS / AJAX / jQuery来写入数据库。但我不知道如何......我已经阅读了很多但是我不明白它是如何工作的。

如果有人能够一步一步地向我解释我如何才能使这个工作......那就太好了。

我需要知道如何执行脚本并获得通知，如果完成的话。正如我之前所说，我想添加一个生成拇指的选项。所以我想打开预加载模式，生成拇指，当它完成时，应该显示选择封面的第二模态。

Answer 1

你不能用JS（jQuery或Ajax）在数据库中写。 只能使用像node.js这样的框架（面向服务器的js），但我认为你不必这样做。

原生Javascript不是后端语言

看，您必须使用PHP与数据库进行交互。 Javascript是一种前端语言，在这个级别上（考虑到我们不会使用node.js，这是另一回事：p）。所以，你可以考虑这样的网页开发：

FRONT END（客户端）| BACK END（服务器端）

[HTML + CSS] [JS]＆lt; - ＆gt; [AJAX]＆lt; - ＆gt; [PHP] [SQL] 的

如果您希望页面动态制作，则必须以不同的方式构建everthing。

我建议你考虑一下这种工作方式

[HTML - ＆gt;导入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 - ＆gt;请求数据库和返回数据] - 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扩展名。对我来说，这是一种更性感的工作方式^^

用模态替换Popup并执行PHP脚本

1 个答案:

原生Javascript不是后端语言

我建议你考虑一下这种工作方式