Question

我有一个用于编辑mysql数据库中记录的表单。表单在一个bootstrap模式中，我试图让它用ajax提交没有任何运气。我收到一条成功消息，但它只是非常快速地闪烁，没有记录插入到数据库中。

请有人帮忙。我确定这将是我的jquery的一个错误，因为我花了很长时间试图弄清楚（以及从这里得到很多帮助）如何将变量传递到模态中。非常感谢。

jquery

$(document).ready(function(){
    $('#my_modal').on('show.bs.modal', function(e) {
        var review = $(e.relatedTarget).data('review');
        var username = $(e.relatedTarget).data('username');
        var film_id = $(e.relatedTarget).data('film_id');
        var id = $(e.relatedTarget).data('id');
        $(e.currentTarget).find('input[name="review"]').val(review);
        $(e.currentTarget).find('input[name="username"]').val(username);
        $(e.currentTarget).find('input[name="film_id"]').val(film_id);
        $(e.currentTarget).find('input[name="id"]').val(id);
    });
    $("#submitButtonId").on("click",function(){
        var username = $(this).data("username");
        var film_id = $(this).data('film_id');
        var id = $(this).data('id');
        var review = $(this).data('review');

        $.post('ajax_insert.php', {username: username, film_id: film_id, id: id, review: review},
               function(data){
                   $('#my_modal').modal('hide');
                   $("#message").html(data);
                   $("#message").fadeIn(500); 
                   $("#message").fadeOut(500);
               });
    });
});
</script>

表格

<div class="container">
  <body>
    <div id="message"></div>
  </body>
</html>
<a href="#my_modal" data-toggle="modal" data-review="A masterpiece brillopads." data-id="517" data-username="julian" data-film_id="21641">Open Modal</a>
<div class="modal" id="my_modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">×</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title">
          Modal header
        </h4>
      </div>
      <div class="modal-body">


        <form>
          <p>
            some content
          </p>
          <input type="text" name="review" value="">
          <input type="text" name="username" value="">
          <input type="text" name="film_id" value="">
          <input type="text" name="id" value="">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
          Close
        </button>
        <button type="submit" id="submitButtonId" class="btn btn-primary">
          Save changes
        </button>
      </form>

ajax_insert.php

<?php
//include db configuration file
include_once("ajax_review/config.php");
//Configure and Connect to the Databse
if (!$mysqli) {
    die('Could not connect: ' . mysqli_error());
}

$username=$_POST['username'];
$film_id=$_POST['film_id'];
$review=$_POST['review'];
$id=$_POST['id'];
//Insert Data into mysql
$insert_row = $mysqli->query("INSERT INTO ajax_test(username,film_id,id,review) VALUES('$username','$film_id','$id','$review'");
if($insert_row){
    echo 'Success';
}
else{ echo "An error occurred!"; }
?>

Answer 1

您要将username等变量设置为$(this).data("username")。但是提交按钮中没有data-username属性，因此您要向服务器发送空值。

我猜你打算从打开模态的锚点中获取它们。但那不对，那些只是初始值，而不是用户编辑后的值。更新的值位于表单字段中。您可以使用.serialize将所有表单字段转换为表单数据。

$("#submitButtonId").on("click",function(){
    var formdata = $(this.form).serialize();
    $.post('ajax_insert.php', formdata,
           function(data){
               $('#my_modal').modal('hide');
               $("#message").html(data);
               $("#message").fadeIn(500); 
               $("#message").fadeOut(500);
           });
});

为什么这个ajax形式没有插入记录？

1 个答案: