Php 为什么这个ajax表单不插入记录？_Php_Jquery_Mysql_Ajax_Bootstrap Modal

Php 为什么这个ajax表单不插入记录？

php jquery mysql ajax

Php 为什么这个ajax表单不插入记录？,php,jquery,mysql,ajax,bootstrap-modal,Php,Jquery,Mysql,Ajax,Bootstrap Modal,我有一个表单，用于编辑mysql数据库中的记录。表单在引导模式中，我试图让它在没有任何运气的情况下使用ajax提交。我收到一条成功消息，但它只会很快闪烁，并且没有记录被插入数据库请找个人帮忙。我确信我的jquery会出错，因为我花了很长时间试图弄清楚（以及这里提供的很多帮助）如何将变量传递到模式中。非常感谢 jquery $(document).ready(function(){ $('#my_modal').on('show.bs.modal', function(e) {

我有一个表单，用于编辑mysql数据库中的记录。表单在引导模式中，我试图让它在没有任何运气的情况下使用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>

$（文档）.ready（函数（）{
$（'my#u model'）。on（'show.bs.model'，function（e）{
var review=$（e.relatedTarget）。数据（‘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）；
});
$（“#提交按钮ID”）。在（“单击”，函数（）上）{
var username=$（this.data（“用户名”）；
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}，
功能（数据）{
$（'my'u model'）.model（'hide'）；
$（“#消息”）.html（数据）；
$（“#消息”）.fadeIn（500）；
$（“#消息”）。淡出（500）；
});
});
});

形式

<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!"; }
?>

您正在将username
等变量设置为$（this）.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);
           });
});

您正在使用$（this）.data（“用户名”）
，而this
是提交按钮。但是数据字段在锚元素中，而不是“提交”按钮中。您没有input type=“text”name=“review”value=“”>
的ID检查错误和开发人员控制台。为什么它们需要ID？仅当您想通过ID访问它们时，例如$（“#review”）
。他用$（“input[name=review]”
通过名字访问它们。我想让你知道，鉴于OP发布的代码，我已经用你的答案测试了它，但我无法让它工作。非常感谢你的评论。我一直试图让上述代码正常工作，但php页面报告了一个错误。我用firebug来找出问题所在，我可以看到它发布到php表单中，但firebug控制台在一秒钟后变为空白…使用开发人员工具的网络选项卡查看php正在发送回什么。看起来变量正在发送到ajax_insert.php，但页面以红色突出显示，我想报告为“暂停”。早些时候我在尝试了，网络上说ajax_insert.php被取消了。检查服务器上的日志，看看是否有php错误。