使用 AJAX 提交 PHP 表单后显示成功消息

Question

我在引导模式中注册了一份时事通讯。

我想要实现的是，当客户提交他们的电子邮件时，它应该在同一页面上直接在下面的模式中给出成功消息，而无需重定向到新页面。

我是 AJAX 新手，所以只是一些指导会有所帮助。

这是我的 HTML 代码

<form form id="form1" name="form1" method="post" action="process.php">
    <div class="input-group">
        <input class="btn btn-lg" name="email" id="email" type="email" placeholder="Your Email" required/>
        <button type="submit" class="button">Submit</button>
    </div>
</form>

下面是process.php

/* Database config */
$db_host = 'localhost';
$db_user = 'root';
$db_pass = '';
$db_database = 'maxipakdb'; 
/* End config */

$mysqli = new mysqli($db_host, $db_user, $db_pass, $db_database);

/* check connection */
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
}

$email = $_POST['email'];

// Perform queries 

mysqli_query(
    $mysqli,
    "INSERT INTO maxipaktable (id,email) VALUES (NULL,'$email')"
);

echo $email;

Answer 1

查看此链接：https://api.jquery.com/jquery.post/ Ajax Post 方法是您所需要的，实际上它很容易理解。

Answer 2

从 html 中删除表单名称、操作。

<form form id="form1">
    <div class="input-group">
        <input class="btn btn-lg" name="email" id="email" type="email" placeholder="Your Email" required/>
        <button type="submit" class="button">Submit</button>
    </div>
</form>

<!-- The result of the success message rendered inside this div -->
<div id="result"></div>

/* 将提交处理程序附加到表单 */

 $(document).ready(function() {
 $("#form1").submit(function(event) {
         var ajaxRequest;

        /* Stop form from submitting normally */
        event.preventDefault();

        /* Clear result div*/
        $("#result").html('');

        /* Get from elements values */
        var values = $(this).serialize();

        /* Send the data using post and put the results in a div */
        /* I am not aborting previous request because It's an asynchronous request, meaning 
           Once it's sent it's out there. but in case you want to abort it  you can do it by  
           abort(). jQuery Ajax methods return an XMLHttpRequest object, so you can just use abort(). */
           ajaxRequest= $.ajax({
                url: "process.php",
                type: "post",
                data: values
            });

          /*  request cab be abort by ajaxRequest.abort() */

         ajaxRequest.done(function (response, textStatus, jqXHR){
              // show successfully for submit message
              $("#result").html('Submitted successfully');
         });

         /* On failure of request this function will be called  */
         ajaxRequest.fail(function (){

           // show error
           $("#result").html('There is error while submit');
         });

       });

Answer 3

首先，将您的按钮提交更改为<button onclick='javascript:ajaxpost();'>Submit</button>，以防止在没有 ajax 的情况下手动提交

其次，将您的成功模式引导程序与 id（例如 id = modalnl）放在一起

第三，把下面的代码放到你的html文件中

function ajaxpost(){
    $.ajax({
        url: "process.php",
        type: 'POST',
        data: $('#form1').serialize(),
        error: function(xhr, status, error) {
            var err = eval("(" + xhr.responseText + ")");
            alert(err.Message);
        },
        success: function(data){
            $('#modalln').show();
        }
    });
}

Answer 4

**Here is code for ajax. Remove action**
<form form id="form1" name="form1" method="post">
    <div class="input-group">
        <input class="btn btn-lg" name="email" id="email" type="email" placeholder="Your Email" required/>
        <button type="submit" class="button" id="contactform">Submit</button>
    </div>
</form>
<script type="text/javascript">
$("#form1").submit(function(e) {
  $.ajax({
         type: "POST",
         url: process.php,
         data: $("#contactform").serialize(), // serializes the form's elements.
         success: function(data)
         {
             $("#form1").html("<p>Thank you</p>");
         }
       });
  e.preventDefault(); // avoid to execute the actual submit of the form.
});
</script>