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

2024-05-01

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

这是我目前所拥有的,但不起作用。它不显示任何错误消息。

HTML - 注册.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 https://jsfiddle.net/fwgdt2pt/.

我希望你们能帮忙。提前致谢 :)


如果您使用ajax,则无需使用输入类型作为submit use 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`
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 PHP MySQL 中使用 jQuery AJAX 提交表单而无需重新加载 的相关文章

  • Spring Security 的 AJAX 请求给出 403 Forbidden

    我有一个基于spring boot spring security thymeleaf的网站 在某些情况下我也使用ajax 问题 我在 Spring Security 中使用表单登录安全性 在浏览器中 登录后我可以使用rest API GE
  • jQuery Signature Pad:使用类型化版本获取 JSON 输出

    我一直在使用 Thomas J Bradley 的 jQuery Signature Pad 插件来捕获绘制的签名 并且效果很好 我想做的是还允许输入签名如演示所示 http thomasjbradley ca lab signature
  • MongoDB C# 驱动程序检查身份验证状态和角色

    这是我使用 MongoDB 身份验证机制登录 MongoDB 的代码 try var credential MongoCredential CreateMongoCRCredential test admin 123456 var sett
  • jquery改变图像src

    代码与 adminLink 工作得很好 但是 itemLink 没有 我已经尝试了我能想到的一切 我想我需要一双新鲜的眼睛 我想做的就是在单击元素时更改这两个 img 的 src code document ready function H
  • PHP 是否有可重用的路由器/调度程序?

    我正在使用一个简单的框架 它根据查询参数处理请求 http example com index php event listPage http example com index php event itemView id 1234 我想将
  • Composer 自动加载器未加载 GuzzleHttp\ClientInterface

    我正在尝试使用Guzzle http guzzle readthedocs org en latest 但我得到以下内容致命错误 致命错误 找不到类 GuzzleHttp ClientInterface var www myapp vend
  • Magento - 无法重新索引产品价格 - 外键约束失败

    我最近刚刚将我的 magento 商店从 1 4 2 升级到 1 7 0 2 升级进行得很顺利 但是当我尝试在升级后重新索引数据时 产品价格失败了 我尝试过使用php shell indexer php reindexall来自 SSH 它
  • 在内连接中重用 mysql 子查询

    我正在尝试优化查询 试图避免重复用 指示的查询 复杂查询 使用两次 结果相同 原始查询 SELECT news FROM news INNER JOIN SELECT myposter FROM SELECT COMPLEX QUERY U
  • PHP - 调整 PNG 图像大小时出现内存错误

    我有一个脚本可以根据上传的图像创建缩略图 它对 jpg 工作正常 但给我一个错误 致命错误 允许的内存大小 67108864 字节已耗尽 尝试分配 26250000 字节 当我上传 png 图像时 脚本是 create thumbnail
  • 如何在php/mysql中使用事务

    我正在使用 php mysql 我知道 mysql 中的事务 但不能在我的脚本中使用 下面是我的脚本 如何在我的代码中使用 php 事务 即 BEGIN ROLLBACK COMMIT foreach json a shop as json
  • Laravel 5.1 date_format 验证允许两种格式

    我对传入的 POST 请求使用以下日期验证 trep txn date gt date format Y m d H i s u 这只允许这种日期 即 2012 01 21 15 59 44 8 我还想允许没有时间的日期 例如2012 01
  • php 8.1 上的 PHPIDS 已弃用错误 [重复]

    这个问题在这里已经有答案了 我在 PHP 8 1 服务器上遇到 PHPIDS 问题 这里的错误 PHP Deprecated Return type of IDS Report count should either be compatib
  • 使用 Laravel 和 Eloquent 从表中选择全部

    我正在使用 Laravel 4 设置我的第一个模型 以从名为的表中提取所有行posts 在标准 MySQL 中我会使用 SELECT FROM posts 如何在 Laravel 4 模型中实现这一目标 我的完整模型源代码如下
  • 条件对列表的 In 子句

    有一个表 我需要通过在配对值列表中应用和条件来获取分页记录 下面是解释 假设我有一堂课Billoflading其中有各个领域 表中两个重要字段是 tenant billtype 我有一个包含值的对列表 tenant1 billtype1 t
  • php laravel Blade 模板不渲染

    我正在尝试使用 Laravel 和 twitter bootstrap 设置一个基本页面 我安装了 Laravel 并获得了通用的 你在这里 或 w e 图像 这样看起来很闪亮 对于 twitter bootstrap 我在 public
  • 展平数组:保持索引、值等于数组中的位置

    我在尝试以特定方式展平数组时遇到了一些麻烦 这里有一个print r我想要展平的数组的视图 Array 1 gt Array 8 gt 1 9 gt 2 10 gt Array 15 gt Array 22 gt 1
  • Mysql 将 --secure-file-priv 选项设置为 NULL

    我在 Ubuntu 中运行 MySQL 我在运行特定的查询集时收到此错误 MySQL 服务器正在使用 secure file priv 选项运行 因此无法执行此语句 当我这样做的时候SELECT secure file priv 在我的 m
  • 在 PHP 数组定义中显示重复键警告

    下面的代码是否可以得到警告 error reporting E ALL s array a gt 1 a gt 1 var export s 你唯一的希望 除了count 你自己 是你的编辑足够聪明 可以突出显示拼写错误 此屏幕截图来自 P
  • 来自 ajax 的 Bootstrap 表 json

    我有 ajax 和 bootstrap 表的问题 我有一个 ajax JSON 我用这个方法调用 document ready function ajax url php process php method fetchdata dataT
  • 选择更新后不起作用

    我有一个选择的下拉菜单 我更改了选项内容并调用触发器选择 更新但选择不重建下拉列表 这是我更新的

随机推荐