如何从引导模式在 ajax 中发布数据？

Question

我在引导模式中遇到问题。我想使用引导模型添加图像的标题。

对于模态部分，我已经这样做了，

<!-- Modal content Start-->
 <form method="POST">
   <!-- Modal -->
   <div class="modal fade" id="myModal<?php echo $i;?>" role="dialog">
     <input type="hidden" id="image_id" name="image_id" value="<?php echo $Array->image_id;?>" >
      <div class="modal-dialog">
       <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Image Caption</h4>
          </div>
          <div class="modal-body">
            <input type="text" id="caption" name="caption" placeholder="Caption" value="<?php echo $Array->image_caption;?>"/>
          </div>
          <div class="modal-footer">
            <button class="btn btn-success" id="btn_caption">submit</button>
            <a href="#" class="btn" data-dismiss="modal">Close</a>
          </div>
        </div>
    </div>
  </div>
</form>
<!-- Modal End Here  -->

对于 ajax 部分我已经这样做了，

$(document).ready(function(e) {
  $("button#btn_caption").click(function(){
    var postData = $(this).serialize();
     alert(postData);
     $.ajax({
       type: "POST",
       url: "process.php",
       data: postData,
        success: function(msg){
            //alert('successfully submitted')
        },
        error: function(){
          alert("failure");
        }
    });
  });
});

对于 process.php 文件，我放了这些行，

<?php 
include('require/admin_header.php');
if (isset($_POST['caption'])) {
    $caption=strip_tags($_POST['caption']);
    $image_id=strip_tags($_POST['image_id']);
    echo '<pre>';
    print_r($_POST);
    // Data base update code
    echo 'Update Done';
}?>

现在，问题是数据库没有更新该值。 <?php echo $Array->image_caption;?> 它以模式打印数据库中的值。但是当我这样做alert(postData); 时，它什么也没提醒。任何人都可以帮我解决我犯的错误吗？

提前感谢您的帮助。

Answer 1

您可以在 ajax 代码中使用此代码：

var postData = new FormData($("#form_id")[0]);

并且在您的打开表单标签中，您必须添加 enctype="multipart/form-data" 才能上传图片。

<form method="POST" enctype="multipart/form-data" id="form_id">
   <input></input>
</form>

Answer 2

我是这样解决问题的，

这是模态部分，

 <!-- Modal content Start-->
       <form id="contactForm1" action="process.php">
     <!-- Modal -->
  <div class="modal fade" id="myModal<?php echo $i;?>" role="dialog">
    <input type="hidden" id="image_id" name="image_id" value="<?php echo $Array->image_id;?>" >
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Image Caption</h4>
        </div>
        <div class="modal-body">
          <input type="text" id="caption" name="caption" placeholder="Caption" value="<?php echo $Array->image_caption;?>"/>
        </div>
        <div class="modal-footer">
          <button class="btn btn-success" id="btn_caption">submit</button>
            <a href="#" class="btn" data-dismiss="modal">Close</a>
        </div>
      </div>
    </div>
  </div>
  </form>
  <!-- Modal End Here  -->

这是ajax部分，

<script>
// Attach a submit handler to the form
$( "#contactForm1" ).submit(function( event ) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var $form = $( this ),
 id = $form.find( "input[name='image_id']" ).val(),
 caption1 = $form.find( "input[name='caption']" ).val(),
 url = $form.attr( "action" );
// Send the data using post
var posting = $.post( url, { image_id: id, caption: caption1} );
// Put the results in a div
 posting.done(function( data ) {});
});
</script>

而PHP部分是这样的，

<?php include('require/admin_header.php');
if (isset($_REQUEST['caption'])) {
$caption=$_REQUEST['caption'];
$image_id=$_REQUEST['image_id'];
// Update SQL
echo 'Update Done';
}?>

感谢有兴趣解决问题的人。再次感谢。

Answer 3

替换

var postData = $(this).serialize();

与

var postData = $("#form_id").serialize();

<form method="POST" id="form_id">
</form>