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

【问题标题】：Form upload with PhP and AJAX to stop reloading the page使用 PhP 和 AJAX 上传表单以停止重新加载页面
【发布时间】：2017-08-27 10:26:01
【问题描述】：

我有一个 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();

   }

【问题讨论】：

在你的 ajax 中你不发送任何数据。
我的错误。请现在检查。不幸的是，我不太擅长 AJAX，并且使用过其他类似问题的代码
您的网址正确吗？我的意思是 Ajax 发布的 URL
为什么不应该。如果我删除 AJAX，它工作正常。我有这段代码，它只是停止页面重新加载而不提交任何数据。
是的，这是一个 wordpress 页面。如果我使用页面名称，那么它将在 url 的最后添加它并使其成为 404。

标签： javascript php jquery ajax forms

【解决方案1】：

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

在你的form页面，添加id到form

<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 url 中更改 uri。

【讨论】：

这是一个 wordpress 页面，file-name.php 被用作 /post-page/ url 下的自定义模板。我的意思是说，/post-page/ 是一个加载 file-name.php 的 url。我还需要提及文件名吗？
您需要使用 ext 指定确切的文件名，您正在处理您的 php 表单。
localhost/palliative-care/single-palliative.php 404（未找到）.. :( 不是这样的
在您的form 页面中，将其添加到表单中的任何位置：并将您的 ajax 表单更改为上面更新的表单。我已经在我的帖子中更新了整个代码。请检查。
只是一个简单的问题。它从系统中获取日期，而不是与输入的数据一起发送。我还应该使用 isset($_POST['query_date']) 吗？你觉得这样行吗？

【解决方案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 语句：

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

这应该可行！

【讨论】：

【解决方案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();

   }

【讨论】：

没有改变你的 ajax 代码，只是 try.the 后面的整个逻辑是 input type=submit 不是你在你的 php 脚本端作为 $_POST['contactus' 使用的表单数据的一部分] 所以条件是无法达到并且你的 php 脚本将无法运行，这就是我建议你，尝试它可能对你有帮助

【解决方案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>}

【讨论】：

这是完全错误的。 OP 已经序列化了表单。问题也已更新
那么 PhP 代码呢？我在同一页面上使用所有这些代码
是的，阿金通德！就像我说的，我不擅长 Ajax，但使用的代码可用于不同的类似问题。
是的，瓦曼！控制台日志中没有错误。否则，它必须给出错误。我在同一页面上拥有所有代码，就像我说的那样，它运行该功能，在控制台中向我显示“已发送电子邮件”消息并显示警报。我认为数据方面存在一些问题。我做对了吗？