使用jQuery AJAX在PHP MySQL中提交表单而无需重新加载页面

Question

使用jQuery AJAX在PHP MySQL中提交表单而无需重新加载页面

4

我有一个基本的注册 / 登录页面，使用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 - 注册.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链接。

希望大家能提供帮助。提前感谢 :)

- Ryan Hawdon

演示，你可以像演示一样。将你的按钮类型从“submit”更改为“button”，并创建一个事件处理程序。 - guradio

3个回答

3

如果你正在使用ajax，就不需要使用作为按钮，可以使用

- Niklesh Raut

2

不需要调用submit函数，只需要执行以下代码即可（你漏了逗号和闭合标签）：

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

- Thamilhan

如果您在此函数之后加载jQuery脚本，而且希望在按钮点击后触发事件，则需要使用document ready。 - Thamilhan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- madalinivascu · Accepted Answer

您有一些未正确关闭的括号和括号。

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

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