javascript - 显示从 mysql 数据库检索到的模态字段中的数据

Question

friend 们，我正在单击提交按钮提交表单，同时我正在模式中显示刚刚提交的数据。因此，一旦我点击提交按钮，数据就会被提交，并且模式会出现，其中包含刚刚提交的数据我的代码一切正常，但唯一的问题是数据没有显示在模式中。这是提交表单的代码-

$("#savep").click(function(e){
      e.preventDefault();

       formData = $('form.pform').serialize() + '&' 
        + encodeURI($(this).attr('name'))
        + '='
        + encodeURI($(this).attr('value'));

             $.ajax({
               type: "POST",
               url: "data1_post.php",
               data: formData,
               success: function(msg){
                $('input[type="text"], textarea').val('');
                 $('#entrysavedmodal').modal('show');


                },
               error: function(){
                alert("failure");
               }
           });
     });

这是当我单击提交按钮时显示的模式-

<div id="entrysavedmodal" class="modal fade" role="dialog">
  <div class="modal-dialog" style="width:1000px;">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title"><span class="glyphicon glyphicon-plus"></span> Saved Entry</h4>
      </div>
      <div class="modal-body">
        <form  class="form-horizontal savedform" id="savedform">
    <div class="form-group">
      <label class="control-label col-xs-2">Date:</label>
      <div class="col-xs-4">
        <input type="text" class="form-control" id="datepreview" name="datepreview" 
           value = "<?php
                  include('db.php');
                  $sql = "SELECT `date` FROM tran ORDER BY id DESC limit 1";
                  $result = mysqli_query($conn,$sql);
                  $rows = mysqli_fetch_assoc($result);
                  $date = $rows['date'];
                  echo $date;

                  ?>" readonly /> //this field does not show anything and none of the fields show any data.
      </div>

      <label class="control-label col-xs-2">v_no:</label>
      <div class="col-xs-4">
        <input type="text" class="form-control" id="v_nopreview" name="v_no"  autocomplete="off" readonly /> //same problem 
      </div>

    </div>
   </form>
      </div>
      <div class="modal-footer">
         <button type="button" class="btn btn-info" id="print"  name="print" >Print</button>

        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
   </form>
  </div>
</div>
</div>
</div>

日期字段不显示数据库中的日期值，v_nopreview 字段也不显示任何内容。我已尝试提供尽可能多的详细信息，但如果您需要任何信息，请告诉我。请让我知道为什么数据未显示在模式的输入字段内。提前致谢。编辑部分这是 data1_post.php 代码-

<?php
include('db.php');
$sql = "INSERT INTO `table1` (`date`, `v_no`, `name`,`narration`,`stk_y_n`)
         VALUES ( '".$_POST['date']."','".$_POST['v_no']."', '".$_POST['user']."','".$_POST['narration']."', 'No')";
 if ($conn->query($sql) === TRUE){
echo "saved";
}
else
{
echo "not saved";
}
?>

Answer 1

据我了解，您期​​望每次在 js 事件之后执行 php 代码。但 PHP 是一种服务器端语言，它仅在您请求页面时解释一次。

因此，您的 php 代码将在刷新后从数据库加载一些内容，然后您在显示模型之前清除输入的值，并且由于它无法再次执行 - 您会看到空模态。我建议您从“data1_post.php”返回保存的数据，然后在成功回调中处理它

更新

如果你想显示保存的数据，你的 php 代码将如下所示

include('db.php');

$response = ["success" => false];
$sql = "INSERT INTO `table1` (`date`, `v_no`, `name`,`narration`,`stk_y_n`)
        VALUES ( '".$_POST['date']."','".$_POST['v_no']."', '".$_POST['user']."','".$_POST['narration']."', 'No')";
if ($conn->query($sql) === TRUE){
    $sql = "SELECT `date` FROM tran ORDER BY id DESC limit 1";
    $result = mysqli_query($conn,$sql);
    $rows = mysqli_fetch_assoc($result);
    $response = ["success" => true, "date" => $rows['date']];
}

header('Content-type: application/json');
echo json_encode($response);  

和js

$("#savep").click(function(e){
    e.preventDefault();

    formData = $('form.pform').serialize() + '&'
        + encodeURI($(this).attr('name'))
        + '='
        + encodeURI($(this).attr('value'));

    $.ajax({
        type: "POST",
        url: "data1_post.php",
        data: formData,
        success: function(response){
            $('input[type="text"], textarea').val('');

            if (response.success) {
                $('#datepreview').val(response.date);
                $('#entrysavedmodal').modal('show');
            } else {
                alert("failure");
            }
        },
        error: function () {
            alert("failure");
        }
    });
});