Question

我正在尝试将通过模式传递的数据保存到数据库而不重新加载页面。但我不知道我的代码有什么问题，它无法正常运行。这是我的代码，如果你发现我哪里出错，请告诉我。模态代码 -

<div id="mypartymodal" 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>  New Party Entry</h4>
      </div>
      <div class="modal-body">
        <form  class="partyform"  id="partyform">
    <div class="form-group">
      <label class="control-label col-xs-2">Party name:</label>
      <div class="col-xs-4">
        <input type="text" class="form-control " id="party_name" name="party_name" >
      </div>
    </div>
 <div class="form-group">

     <label class="control-label col-xs-2">Opening bal:</label>
      <div class="col-xs-4">
        <input type="text" class="form-control" id="op_bal" name="op_bal" placeholder="Op.bal">
      </div>
       <label class="control-label col-xs-2">Vat:</label>
      <div class="col-xs-4">
        <input type="text" class="form-control" id="vat" name="vat" placeholder="Vat no.">
      </div>
    </div>

 <div class="form-group">

     <label class="control-label col-xs-2">Cst:</label>
      <div class="col-xs-4">
        <input type="text" class="form-control" id="cst" name="cst" placeholder="Cst no.">
      </div>
       <label class="control-label col-xs-2">Pan:</label>
      <div class="col-xs-4">
        <input type="text" class="form-control" id="pan" name="pan" placeholder="Pan no.">
      </div>
    </div>


     <div class="form-group">
       <label class="control-label col-xs-2">Service Tax no.:</label>
      <div class="col-xs-4">
        <input type="text" class="form-control" id="ser" name="ser" placeholder="Service Tax no.">
      </div>
      <label class="control-label col-xs-2">Address:</label>
      <div class="col-xs-4">
        <textarea class="form-control" id="address" name="address" placeholder="Enter address"></textarea>
      </div>

    </div>


    <div class="form-group">

     <label class="control-label col-xs-2">Email-id:</label>
      <div class="col-xs-4">
        <input type="text" class="form-control" id="email" name="email" placeholder="Enter email-id">
      </div>
       <label class="control-label col-xs-2">Mobile:</label>
      <div class="col-xs-4">
        <input type="text" class="form-control" id="mob" name="mob" placeholder="Enter contact number">
      </div>
    </div>
      </div>

      <div class="modal-footer">
         <input type="submit" class="btn btn-info" id="saveparty" name="saveparty" value="Save" />

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

  </div>
</div>
</form>

脚本 -

$("#saveparty").click(function(){
         $.ajax({
     type: "POST",
 url: "party_post.php",
 data: $('form.partyform').serialize(),
         success: function(msg){
                 alert(msg);
        $("#mypartymodal").modal('hide'); 
         },
 error: function(){
 alert("failure");
 }
       });
 });

party_post.php代码 -

<?php
include('db.php');
if(isset($_POST['saveparty'])){
    $name = $_POST['party_name'];
$address = $_POST['address'];
$group = 'Sundry Creditor';
$op_bal = $_POST['op_bal'];
$vat = $_POST['vat'];
$cst = $_POST['cst'];
$pan = $_POST['pan'];
$ser = $_POST['ser'];
$email = $_POST['email'];
$mob = $_POST['mob'];
$sql ="INSERT INTO `master` (`ledger_name`, `ledger_grp`, `tally_grp`, `address`, `op_bal`, `cl_bal`, `vat`, `cst`, `ser_tax`, `email`, `tel`) 
VALUES ('$name', '$group', '$group', '$address', '$op_bal', '0.00', '$vat', '$cst', '$ser', '$email', '$mob')";

if($result = mysqli_query($conn,$sql)){

    echo "saved";
}
else{
    echo "failed";
}
}
else{
    echo "not done";
}


?>

如果您需要有关该代码的任何其他信息，请与我们联系。提前谢谢。

Answer 1

您没有阻止输入的默认操作。在您的jquery代码中，您可以这样做：

$("#saveparty").click(function(e){
  e.preventDefault();
         $.ajax({
     type: "POST",
 url: "party_post.php",
 data: $('form.partyform').serialize(),
         success: function(msg){
                 alert(msg);
        $("#mypartymodal").modal('hide'); 
         },
 error: function(){
 alert("failure");
 }
       });
 });

Answer 2

尝试data: $('#partyform').serialize(),

还将形式放在模态体内（正确检查div的打开和关闭）

<div class="modal-body">

<form.....>    
</form>

</div>

Answer 3

jQuery的serialize（）不是序列化按钮或在其中提交输入的结果，因此您提交的数据将不包含saveparty属性

将您的数据更改为

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

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

             $.ajax({
               type: "POST",
               url: "party_post.php",
               data: formData,
               success: function(msg){
                     alert(msg);
                   $("#mypartymodal").modal('hide'); 
                },
               error: function(){
                alert("failure");
               }
           });
     });

来自jquery的serialize api

注意：只有＆＃34;成功控制＆＃34;被序列化为字符串。没有提交按钮值被序列化，因为表单未使用按钮提交。要使表单元素的值包含在序列化字符串中，该元素必须具有name属性。复选框和单选按钮（类型为＆＃34;输入＆＃34;或＆＃34;复选框＆＃34;的输入）中的值仅在选中时才包括在内。来自文件选择元素的数据未被序列化。

保存模式中的数据而不重新加载页面

3 个答案: