在单击按钮时使用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。 我只是使用了您提供的代码，因为它只是向您展示该方法。 我添加了回显部分以在您的网页中显示结果。 您可以通过css优化外观。

希望这可以帮助！