php - 不切换页面通过php发送html表单数据到数据库

Question

大家好，我有一个表格:

<form action="signup.php" method="post" class="cd-form">
                <p class="fieldset">
                  <input class="full-width has-padding has-border" type="text" required maxlength="15" placeholder="First Name" name="primeiro_nome" />         
              </p>
                <p class="fieldset">
                  <input class="full-width has-padding has-border"  type="text" required  maxlength="15" placeholder="Last Name" name="segundo_nome">
                </p>
                <p class="fieldset">
                  <input class="full-width has-padding has-border"  type="email" required maxlength="50"  placeholder="E-mail" name="o_email">
                </p>
                <p class="fieldset">
                    <input class="full-width" type="submit" value="Sign Up!">
                </p>        
            </form>

您可能会注意到该操作正在调用“signup.php”:

    <?php
 $con=new mysqli ("localhost","root","","chroniclemark");
    mysqli_set_charset($con, 'utf8mb4');
    if($con->connect_error)
    {
        echo $con->connect_errno;
        die("Database Connection Failed");
    }
    if(($_POST['primeiro_nome']) != ""){

    $sql = "INSERT INTO users (nome, sobrenome, email) 
             VALUES('{$con->real_escape_string($_POST['primeiro_nome'])}', '{$con->real_escape_string($_POST['segundo_nome'])}', '{$con->real_escape_string($_POST['o_email'])}')";
        $insert = $con->query($sql);

}
?>

这是有效的。表单中的数据被插入到我的数据库中。我遇到的问题是当提交表单时主页关闭，“signup.php”页面打开而不是它。

我该如何解决这个问题？我非常希望在同一页面上弹出“感谢您注册”，而不是切换到另一个页面。

Answer 1

您可以使用 AJAX 将数据保存到数据库并在同一页面中向用户显示消息。单击按钮向服务器发送请求，将数据保存到数据库中，在成功或失败时返回响应，然后向用户显示消息。

表单

首先为表单中的输入类型提供 id 并添加消息 div。

<form  method="post" class="cd-form">
            <p class="fieldset">
              <input class="full-width has-padding has-border" type="text" required maxlength="15" placeholder="First Name" id="primeiro_nome" />         
          </p>
            <p class="fieldset">
              <input class="full-width has-padding has-border"  type="text" required  maxlength="15" placeholder="Last Name" id="segundo_nome">
            </p>
            <p class="fieldset">
              <input class="full-width has-padding has-border"  type="email" required maxlength="50"  placeholder="E-mail" id="o_email">
            </p>
            <p class="fieldset">
                <input class="full-width" id='saverecords' type="button" value="Sign Up!">
            </p>        

向服务器发送 AJAX 请求的 jQuery 代码

添加一个包含 jQuery 的脚本标签，在点击事件中获取字段的值，然后发布到 php 页面:

<script src=”http://code.jquery.com/jquery-3.1.1.min.js”></script>

<script type=”text/javascript”> 

$(function(){ 

    $("#saverecords").on('click', function(){ 

        var pnome  = $("#primeiro_nome").val();

        var sname  = $("#segundo_nome").val();

        var email  = $("#o_email").val();

        $.ajax({ 

          method: "POST",
          url: "saverecords.php",

          data: {"pname": pname, "sname": sname, "email": email},

         }).done(function( data ) { 
            var result = $.parseJSON(data); 

            var str = '';

            if(result == 1) {

              str = 'Signup successfull.';

            }else{
              str = 'Data could not be saved. Please try again'; 
            }

          $("#message").html(str);

      });

   }); 

</script> 

php 服务器端代码:

请根据您的要求进行更改

创建一个php页面:saverecords.php 在 saverecords.php 中，您可以将数据插入数据库。

$conn = new mysqli($host, $username, $password, $dbname);
$pname  = $_POST['pname'];

$sname  = $_POST['sname'];

$email  = $_POST['email'];
$sql    = "insert into tablename (pname, sname, email) values (?, ?, ?)  ";

$stmt   = $conn->prepare($sql);

$stmt->bind_param('sss', $pname, $sname, $email);

  if($stmt->execute()){

     $result = 1;

  }

}

echo $result;

$conn->close();

如果您仍然遇到问题，请访问此链接，您可以找到有关如何使用 jQuery Ajax 的详细教程。用 php mysqli