php - 在 PHP MySQL 中使用 jQuery AJAX 提交表单而不重新加载

标签 php jquery mysql ajax authentication

我有一个基本的注册/登录页面,它使用 php 将数据提交到 SQL 数据库。但是,我希望页面在 jQuery AJAX 的帮助下提交时不重定向(无论成功与否)。

这是我目前拥有的,但无法正常工作。它不显示任何错误消息。

HTML - signup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Signup</title>
    <meta charset="utf-8">
</head>
<body>
    <form>
        <table>
            <tbody>
                <tr>
                    <td>
                        <input type="text" name="first" placeholder="First Name" id="first">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" name="last" placeholder="Last Name" id="last">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="submit" value="Signup" id="signup">
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
</body>
</html>

JavaScript - signup.js

function submit() {
    $("form").submit(function(e) {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'signup.php',
            data: $('form').serialize(),
            success: function() {
                console.log("Signup was successful");
            },
            error: function() {
                console.log("Signup was unsuccessful");
            }
        });
    });
}

$(document).ready(function() {
    submit();
});

PHP - signup.php

<?php
  include_once "db_connect.php";

  $post_FirstName = $_POST['first'];
  $post_LastName = $_POST['last'];

  $addData = "INSERT INTO details (firstname, lastname) VALUES ('$post_FirstName', '$post_LastName')";

  if ($conn->query($addData) === TRUE) {
    echo "Working";
  } else {
    echo "Not working";
  }
?>

这是 JSFiddle .

希望大家帮帮忙。提前致谢:)

最佳答案

如果您使用的是 ajax,则无需将输入类型用作 submit,请使用 button

$(document).ready(function() {
$("#signup").click(function(e) {
    e.preventDefault();
    $.ajax({
  type: 'POST',
  url: 'signup.php',
  data: $('form').serialize()
  success: function() {
    console.log("Signup was successful");
  }
  error: function() {
    console.log("Signup was unsuccessful");
  }
});
});

这里也改

$post_FirstName = $_POST['first']; // name is `first` not `firstname`

关于php - 在 PHP MySQL 中使用 jQuery AJAX 提交表单而不重新加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37019309/

相关文章:

php - PHP DOM-加载YouTube嵌入代码时出现问题

jquery - CSS 边框重叠

PHP:如何将数组转换为字符串

java - SQL select 语句查看 JPA 存储的两个表中的项目

php - Xampp 服务器中的所有 php 项目应该放在哪里?

PHP 基本搜索引擎

javascript - 多个 "if"语句

jquery - 这是最先进的 Ajax/jQuery,还是我应该采取不同的做法?

索引列上的 MySQL Slow Order BY

php - 忽略 PHP Web 服务中的 fatal error 和数据库异常