使用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>