使用 javascript 在按钮单击时动态显示带有 php 表达式的 Html div

Question

请帮我解决我的问题，我一直在为这个问题努力，所以基本上我想动态添加一个带有表单元素的<div>。我想使用 javascript 将其附加到按钮单击上。起初我让它工作，直到我必须在标签中的 <select> 标签上放置 php 表达式的部分和 select option 的值来自我的数据库。

HTML

<div id="file-container" class="container-fluid">
  <div class="form-inline thumbnail">
     <label class="sr-only">File Name</label>
     <input type="text" class="form-control input-sm" name="filename[]" placeholder="File name *">
     <select class="selectpicker" data-live-search="true" title="Choose Article" name="article[]">
     <?php while($row_rsArticles = mysqli_fetch_assoc($rsArticles)){ ?>
        <option value="<?php echo $row_rsArticles['id']; ?>" ><?php echo $row_rsArticles['name']; ?></option>
    <?php } mysqli_data_seek($rsArticles, 0);?>
    </select>
    <div class="radio">
       <fieldset id="group1">
          <label class="radio"><input type="radio" class="radio" name="filemode[] id=group1" value="0">Can View</label>
          <label class="radio"><input type="radio" class="radio" name="filemode[] id=group1" value="1">Can Download</label>
       </fieldset>
     </div>
     <label for="fileinput" class="sr-only">File input</label>
     <input type="file" class="form-control input-sm" name="fileinput[]">
     <button type="button" class="btn btn-danger" id="deletefileinput">Delete</button>
  </div>

SQL

mysqli_select_db($connection, $database);
$query_rsArticles = "SELECT * FROM article order by name asc";
$rsArticles = mysqli_query($connection, $query_rsArticles) or die("Error in retrieving article records");
$totalRows_rsArticles = mysqli_num_rows($rsArticles);

JAVASCRIPT

$(function() {
    var counter = 2; 
    $('#addfileinput').click(function(){
        var newDiv = $('<div class="form-inline thumbnail"><label class="sr-only">File Name</label><input type="text" class="form-control input-sm" name="filename[]" placeholder="File name *"><select class="selectpicker" data-live-search="true" title="Choose Article" name="article[]"><?php while($row_rsArticles = mysqli_fetch_assoc($rsArticles)){ ?><option value="<?php echo $row_rsArticles['id']; ?>" ><?php echo $row_rsArticles['name']; ?></option><?php } mysqli_data_seek($rsArticles, 0);?></select><div class="radio"><fieldset id="group'+counter+'"><label class="radio"><input type="radio" class="radio" name="filemode[] id=group'+counter+'" value="0">Can View</label><label class="radio"><input type="radio" class="radio" name="filemode[] id=group'+counter+'" value="1">Can Download</label></fieldset></div><label for="fileinput" class="sr-only">File input</label><input type="file" class="form-control input-sm" name="fileinput[]"><button type="button" class="btn btn-danger" id="deletefileinput">Delete</button></div>').append(newDiv);
      counter ++;
    });
    });

Answer 1

我认为ajax 是要走的路。试试这个方法...

HTML

<div id="file-container" class="container-fluid">
<div class="form-inline thumbnail">
 <form id="articles_search">
 <label class="sr-only">File Name</label>
 <input id= "srch_input" type="text" class="form-control input-sm" name="filename[]" placeholder="File name *">
 <button class = "btn btn-default" id="articles">Ajax</button>
      </form>
 <div id="srch">

      </div>
<div class="radio">
   <fieldset id="group1">
      <label class="radio"><input type="radio" class="radio" name="filemode[] id=group1" value="0">Can View</label>
      <label class="radio"><input type="radio" class="radio" name="filemode[] id=group1" value="1">Can Download</label>
   </fieldset>
 </div>
 <label for="fileinput" class="sr-only">File input</label>
 <input type="file" class="form-control input-sm" name="fileinput[]">
 <button type="button" class="btn btn-danger" id="deletefileinput">Delete</button>

JAVASCRIPT

  $(document).ready(function() {
  $('#articles').click(function(){
  var title = $("#srch_input").val();
  $.ajax({
  url: 'processing_php_file.php',
  type: "POST",
  data: {'title': $("#srch_input").val()},
  processData: true,
  success: function(data){
  $('#srch').fadeIn(200).html(data);
    },
  error: function(){
  }
  });

  });

PHP

php 文件的名称应为processing_php_file.php。

   <?php
   mysqli_select_db($connection, $database); 
   $query_rsArticles = "SELECT * FROM article order by name asc"; 
   $rsArticles = mysqli_query($connection, $query_rsArticles) or 
  die("Error in retrieving article records"); 
  $totalRows_rsArticles = mysqli_num_rows($rsArticles);
  while($row_rsArticles = mysqli_fetch_assoc($rsArticles));
  echo '<select>';
  for ($i=0; $i <sizeof($totalRows_rsArticles) ; $i++) { 

   echo '<option>';
  echo $row_rsArticles['id']; 
  echo $row_rsArticles['name'];
  echo '</option>';
   }
 echo '</select>';
  ?> 

在此示例中，我们通过 ajax 调用查询数据库并从数据库中检索数据并在不刷新页面的情况下将它们显示在网页中。

注意：您需要根据需要修改您的php。我只是使用了您提供的代码，因为它只是向您展示方法。我添加了 echo 部分以在您的网页中显示结果。您可以通过css优化外观。

希望这会有所帮助！