javascript - 将新数据添加到数据库后更新下拉列表

Question

我有一个下拉列表，通过 <select> ，它是由 JavaScript 代码生成的，该代码也来 self 的数据库:

function dirfunc(){

  var dirdiv = document.getElementById("dirdiv");
  var ahref = document.getElementById("href");
  var directidarr = new Array();
  var directorarr = new Array();

  <?php

    include("../conn.php");
    if($stmt = $con->prepare("SELECT directorid,directorname FROM directortb")){
      $stmt->execute();
      $stmt->bind_result($directorid,$directorname);
      $counter = 0;
      while($stmt->fetch()){
        ?>
          directidarr[<?php echo $counter; ?>] = "<?php echo $directorid; ?>";
          directorarr[<?php echo $counter; ?>] = "<?php echo $directorname; ?>";
        <?php
        $counter = $counter + 1;
      }
      $stmt->close();
    }
  ?>

  var div = document.createElement("div");
  div.setAttribute("class","form-group");

  var label = document.createElement("label");
  label.setAttribute("class","col-sm-2 control-label");
  label.appendChild(document.createTextNode("Director"));

  var div2 = document.createElement("div");
  div2.setAttribute("class","col-sm-9");

  var sel = document.createElement("select");
  sel.setAttribute("name","director");
  sel.setAttribute("class","form-control");

  for (var x = 0; x < directidarr.length; x++){
    var opt = document.createElement("option");
    opt.appendChild(document.createTextNode(directorarr[x]));
    opt.setAttribute("value", directidarr[x]);
    sel.appendChild(opt);
  }

  var div3 = document.createElement("div");
  div3.setAttribute("class","col-sm-1");

  var div4 = document.createElement("div");
  div4.setAttribute("class","input-group");

  div2.appendChild(sel);
  div3.appendChild(ahref);
  div.appendChild(label);
  div.appendChild(div2);
  div.appendChild(div3);
  dirdiv.appendChild(div);

}

在我的 HTML 代码中，它生成下拉列表，右侧是一个显示模式的按钮。在此模式中，有一个表单允许用户为选择下拉列表添加更多选项。

这是我用来在不刷新页面的情况下添加数据的脚本:

$(function() {
    $("#adddirector").click(function(e) {
        e.preventDefault();
        var directorname = $("#directorname").val();
        var dataString = 'directorname=' + directorname;

        if(directorname == '')
        {
            $('.success').fadeOut(200).hide();
            $('.error').fadeIn(200).show();
        }
        else
        {
            $.ajax({
                type: "POST",
                url: "../action.php",
                data: dataString,
                success:{
                    $('.success').fadeIn(200).show();
                    $('.error').fadeOut(200).hide();
                }
            });
        }
        return false;
    });
}); 

使用此表格:

<form class="form-horizontal" action="../action.php" method="POST">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Director's Name</label>
    <div class="col-sm-10" id="ccdiv">
      <input type="text" class="form-control" name="directorname" id="directorname" value="" required>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default" name="adddirector" id="adddirector">Add Director <span class="glyphicon glyphicon-plus"></span></button>
    </div>
  </div>
</form>

但是添加新数据后，通过表单或后端/phpmyadmin，下拉列表没有更新。用户仍然必须刷新页面才能更新下拉列表。我缺少什么或应该如何处理我的脚本？

Answer 1

我假设创建新Director的表单在提交时发送一个ajax请求，该请求由一些PHP代码处理，该代码将使用此新条目更新数据库。

我建议，在这段 PHP 代码中，您返回新插入条目的 id。然后，您可以向 ajax 调用添加一个“成功”函数，该函数在插入后将收到新的 id，因此您可以使用它向选择框添加新行。

编辑:

$(function() {
    $("#adddirector").click(function(e) {
        e.preventDefault();
        var directorname = $("#directorname").val();
        //in jQuery you can pass an object, directorname will now show up as $_POST['directorname'] in your PHP handler.
        var dataObj = {'directorname': directorname}

        if(directorname == '')
        {
            $('.success').fadeOut(200).hide();
            $('.error').fadeIn(200).show();
        }
        else
        {
            $.ajax({
                type: "POST",
                url: "../action.php",
                data: dataObj,
                //success function should receive the id back as result
                success: function(result){
                    var newId = result;

                    // create and append the new option here with the new id and the given name.
                    var newOption = $('<option></option>');
                    newOption.val(result);
                    newOption.html(directorname);
                    $('.form-control[name="director"]').append(newOption)

                    $('.success').fadeIn(200).show();
                    $('.error').fadeOut(200).hide();
                }
            });
        }
        return false;
    });
}); 

并确保您的 php 文件 action.php 与文件末尾的新 id 相呼应!如果您想让我看一下，请将代码也发布到该文件中。这是 stackoverflow 上的一个问题，可能会对您的 php 有所帮助。 Getting insert id with insert PDO MySQL