用PhP和AJAX上载表单以停止重新加载页面

Question

我有一个PHP表单，提交后会重新加载。 我使用Ajax停止重新加载它，现在它不提交数据库中的数据。 我在这里想念什么吗？ 就像我说的，如果删除AJAX，它可以正常工作，但页面会重新加载。 我知道我犯了一个非常小的错误。

形成

<form class="form-horizontal" method="post" role="form">
  <div class="form-group">
    <div class="col-sm-6">
       <label for="name" class="control-lable" style="font-size:15px;">Name* :</label>
       <input type="text" class="form-control" name="query_name" id="name" required>
    </div>
    <div class="col-sm-6">
       <label for="email" class="control-lable" style="font-size:15px;">Email* :</label>
       <input id="email" type="email" class="form-control" name="query_email" required>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-12">
      <label for="comments" class="control-lable" style="font-size:15px;">Message*:</label>
      <textarea id="comments"  class="form-control" name="query_message" rows="5" required></textarea>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-12">
      <input type="submit" class="btn btn-block btn-danger" name="contactus" value="Submit">
    </div>
  </div> 
</form>

AJAX

 jQuery(function($) {

    $('form').on('submit', function (e) {
      e.preventDefault();
      var str = $(this).serialize();

$.ajax({
       type: "POST",
       cache: false,
       data:str,
       url:window.location.origin+'/post-page/',
       success:function() {
         console.log('email sent');
         $("#result").html('<div class="alert alert-success"><button type="button" class="close">×</button>Thank you for posting query, You will be replied in next 24 hours</div>');
         $("form").trigger("reset");
       }
      });
    });
  });

的PHP

  if(isset($_POST['contactus'])){

    $query_date = date('Y-m-d G:i:s');
    $query_name = strip_tags($_POST['query_name']);
    $query_email = strip_tags($_POST['query_email']);
    $query_message= strip_tags($_POST['query_message'], '<p><br>');

    $ins_query = $conn->prepare("INSERT INTO query (query_date, query_name, query_email, query_message) VALUES (?,?,?,?)");

    $ins_query->bind_param("ssss", $query_date, $query_name, $query_email, $query_message);

    $ins_query->execute();
    $ins_query->close();

   }

Answer 1

您没有在ajax url指定文件名扩展名。 更改为your-php-form-handling-page.php

在form页面中，向表单添加ID

<form class="form-horizontal" id="FrmSubmit" method="post" role="form">
<input type="hidden" name="path_uri" value="<?php echo get_template_directory_uri(); ?> id="path_uri">

在你的ajax页面

jQuery(function($) {
    $("#FrmSubmit").submit(function(e) {
        e.preventDefault();
        var uri = $('#path_uri').val();

        $.ajax({
            type: "POST",
            url: uri+'/single-palliative.php',
            cache: false,
            data: $('#FrmSubmit').serialize(),
            success: function() {
                console.log('email sent');
                $("#result").html('<div class="alert alert-success"><button type="button" class="close">×</button>Thank you for posting query, You will be replied in next 24 hours</div>');
                $("#FrmSubmit").trigger("reset");
            }
        });
    });
});

在您的filename.php

if(isset($_POST['query_name']) && isset($_POST['query_date']) && isset($_POST['query_email']) && isset($_POST['query_message'])){

    $query_date = date('Y-m-d G:i:s');
    $query_name = strip_tags($_POST['query_name']);
    $query_email = strip_tags($_POST['query_email']);
    $query_message= strip_tags($_POST['query_message'], '<p><br>');

    $ins_query = $conn->prepare("INSERT INTO query (query_date, query_name, query_email, query_message) VALUES (?,?,?,?)");

    $ins_query->bind_param("ssss", $query_date, $query_name, $query_email, $query_message);

    $ins_query->execute();
    $ins_query->close();

}

更新 ：在表单中添加了隐藏字段，并在AJAX网址中更改了uri。

Answer 2

1.）给表单一个ID：

<form class="form-horizontal" id="formsid" method="post" role="form">

2.）使用正确的php文件路径编辑Ajax函数，并使用表单ID设置数据。

    $.ajax({
       type: "POST",
       cache: false,
       data: $("#formsid").serialize(),
       url:path/to/phpfile.php,
       success:function() {
         console.log('email sent');
         $("#result").html('<div class="alert alert-success"><button type="button" class="close">×</button>Thank you for posting query, You will be replied in next 24 hours</div>');
         $("#formsid").trigger("reset");
       }
      });

3.）在PHP中更改if-statement：

if(is_array($_POST) && isset($_POST)) {
    //your code
} else {
    throw new Exception('Post is empty'.var_dump($_POST));
}

这应该工作！

Answer 3

尝试这个，

<form class="form-horizontal" method="post" role="form">
<input type="hidden" name="action" value="contactus">
  <div class="form-group">
    <div class="col-sm-6">
       <label for="name" class="control-lable" style="font-size:15px;">Name* :</label>
       <input type="text" class="form-control" name="query_name" id="name" required>
    </div>
    <div class="col-sm-6">
       <label for="email" class="control-lable" style="font-size:15px;">Email* :</label>
       <input id="email" type="email" class="form-control" name="query_email" required>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-12">
      <label for="comments" class="control-lable" style="font-size:15px;">Message*:</label>
      <textarea id="comments"  class="form-control" name="query_message" rows="5" required></textarea>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-12">
      <input type="submit" class="btn btn-block btn-danger" name="contactus" value="Submit">
    </div>
  </div> 
</form>

接着，

if(isset($_POST['action']) && $_POST['action']=="contactus"){

    $query_date = date('Y-m-d G:i:s');
    $query_name = strip_tags($_POST['query_name']);
    $query_email = strip_tags($_POST['query_email']);
    $query_message= strip_tags($_POST['query_message'], '<p><br>');

    $ins_query = $conn->prepare("INSERT INTO query (query_date, query_name, query_email, query_message) VALUES (?,?,?,?)");

    $ins_query->bind_param("ssss", $query_date, $query_name, $query_email, $query_message);

    $ins_query->execute();
    $ins_query->close();

   }

Answer 4

    $.ajax({
           type: "POST",
           cache: false,
           data:{query_name:'query_name',query_email:'query_email',query_email:'query_email'},
           url:window.location.origin+'/post-page/',
           success:function() {
             console.log('email sent');
             $("#result").html('<div class="alert alert-success"><button type="button" class="close">×</button>Thank you for posting query, You will be replied in next 24 hours</div>');
             $("form").trigger("reset");
           }
          });
        });
      });

您应该在ajax中添加data: {<your data>}