javascript - 使用Ajax和PHP插入数据库(mysql)-6ren

javascript - 使用Ajax和PHP插入数据库(mysql)

转载作者：行者123 更新时间：2023-11-29 06:10:08

我试图将表单中的数据插入到mysql数据库中。我认为问题在于，我在哪里使用HTML中的按钮，因此我复制了所有的按钮。任何帮助都将不胜感激！
当我按下submit按钮时，页面会闪烁，数据库中没有任何内容。它应该显示一个绿色的框，表示记录已经在html页面上提交。
因为有些人更担心我建立一个认证系统，然后什么错了。这不是一个身份验证系统，它只是一个如何插入mysql数据库的示例。
Index.html索引

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Bootstrap Example with Ajax</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<script src="js/insert.js"></script>
	
	<style>
	 .custom{
	 	margin-left:200px;
	 }
	</style>
</head>
<body>

<div class="container">
	<h2 class="text-center">Insert Data Using Ajax</h2>
	
	<br/>
	<p id="alert" style="display:none;" class="alert alert-success text-center"><i class="glyphicon glyphicon-ok"></i><span> id="show"</span></p>
	<br/>
	<hr/>
	<form class="form-horizontal" role="form" method="POST">
		<div class="form-group">
			<label class="col-sm-2 control-label">Name</label>
				<div class="col-sm-10">
					<input class="form-control" id="name" type="text" placeholder="Enter you name">
				</div>
			</div>
			<div class="form-group">
				<label for="email" class="col-sm-2 control-label">Email</label>
				<div class="col-sm-10">
					<input class="form-control" id="email" type="text" placeholder="Your Email...">
				</div>
			</div>
			<fieldset >
				<div class="form-group">
					<label for="password" class="col-sm-2 control-label">Password</label>
					<div class="col-sm-10">
					<input class="form-control" id="password" type="text" placeholder="Your Password...">
				</div>
			</div>
			<div class="form-group">
				<label for="gender" class="col-sm-2 control-label">Gender</label>
				<div class="col-sm-10">
				<select id="gender" class="form-control">
					<option value="Male">Male</option>
					<option value="Female">Female</option>
				</select>
				</div>
			</div>
		<div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">Submit</button>
      </div>
    </div>
  </form>
</div>
</body>
</html>

插入.php

<?php
	//Create connection
	$connection = mysqli_connect('localhost','username','passwd','dbName');
	
	if($_REQUEST['name']){
	$name = $_REQUEST['name'];
	$email = $_REQUEST['email'];
	$password= $_REQUEST['password'];
	$gender = $_REQUEST['gender'];
	
	$q = "INSERT INTO user VALUES ('','$name', '$email', '$password', '$gender')";
	
	$query = mysqli_query($connection,$q);
	if($query){
		echo ' Data Inserted Successfully'
        mysql_close($connection);
		}
	}
?>

js/插入.js

$(document).ready(function(e) {
	$('#submit').click(function(){
		var name = $('#name').val();
		var email = $('#email').val();
		var password = $('#password').val();
		var gender = $('#gender').val();
		
		$ajax({
			type:'POST',
			data:{name:name,email:email,password:password,gender:gender},
			url:"insert.php", //php page URL where we post this data to save in databse
			success: function(result){
			
				$('#alert').show();
				
				$('#show').html(result);
						
				
			}
		})
	});
});

最佳答案

不管怎样，这个特殊的代码允许插入到数据库中，尽管在某些地方仍然有一些问题我无法发现。
index.html索引

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example with Ajax</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script>
      $(function () {
        $('button').click(function () {
          var name2 = $('#name').val();
          var email2 = $('#email').val();
          var password2 = $('#password').val();
          var gender2 = $('#gender').val();
          console.log('starting ajax');
          $.ajax({
            url: "./insert.php",
            type: "post",
            data: { name: name2, email: email2, password: password2, gender: gender2 },
            success: function (data) {
              var dataParsed = JSON.parse(data);
              console.log(dataParsed);
            }
          });

        });
      });

    </script>

    <style>
      .custom{
         margin-left:200px;
      }
    </style>
  </head>
  <body>

    <div class="container">
      <h2 class="text-center">Insert Data Using Ajax</h2>

      <form class="form-horizontal" >
        <div class="form-group">
          <label class="col-sm-2 control-label">Name</label>
          <div class="col-sm-10">
            <input class="form-control" name="name" id="name" type="text" placeholder="Enter you name">
          </div>
        </div>
        <div class="form-group">
          <label for="email" class="col-sm-2 control-label">Email</label>
          <div class="col-sm-10">
            <input class="form-control" name="email" id="email" type="text" placeholder="Your Email...">
          </div>
        </div>
          <div class="form-group">
            <label for="password" class="col-sm-2 control-label">Password</label>
            <div class="col-sm-10">
              <input class="form-control" name="password" id="password" type="text" placeholder="Your Password...">
            </div>
          </div>
          <div class="form-group">
            <label for="gender" class="col-sm-2 control-label">Gender</label>
            <div class="col-sm-10">
              <select id="gender" class="form-control">
                <option value="Male">Male</option>
                <option value="Female">Female</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-default">Submit</button>
            </div>
          </div>
      </form>
    </div>
  </body>
</html>

插入.php

<?php

    //Create connection
  $connection = mysqli_connect('localhost', 'root', '', 'dbase');
    if($_POST['name']){
      $name = $_POST['name'];
      $email = $_POST['email'];
      $password= $_POST['password'];
      $gender = $_POST['gender'];

      $q = "INSERT INTO user (name, email, password, gender) VALUES ('$name', '$email', '$password', '$gender')";

      $query = mysqli_query($connection, $q);

      if($query){
          echo json_encode("Data Inserted Successfully");
          }
      else {
          echo json_encode('problem');
          }
      }

?>

关于javascript - 使用Ajax和PHP插入数据库(mysql)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38794652/

文章推荐： MySQL触发器没有被触发？

文章推荐： java - 如何使用 JDBC 从数据库中检索 SDO_GEOMETRY？

文章推荐： java - Spring Data Graph、jo4neo、ogrm 的任何替代品？

文章推荐： mysql - 名为 'Index' 的表

mysql - 只有 Mysql OR mysql+sqlite OR mysql+自己的解决方案
目前我正在构建相当大的网络系统，我需要强大的 SQL 数据库解决方案。我选择 Mysql 而不是 Postgres，因为一些任务需要只读(MyISAM 引擎)而其他任务需要大量写入(InnoDB)。
mysql - Linux/mysql 将 mysql 表输出写入文件并保持 mysql 格式。
我在 mysql 中使用如下命令。当它显示表格数据时，它被格式化为一个非常干净的表格，间距均匀且 |作为列分隔符。 SELECT * FROM TABLE_NAME; 当我从 CLI 运行命令时，如下
mysql - 无法从终端加载 mysql 但可以使用系统首选项启动 mysql
我知道这个问题之前已经被问过好几次了，我已经解决了很多问题，但到目前为止没有任何效果。 MySQL 试图将自身安装到的目录 (usr/local/mysql) 肯定有问题。关于我的错误的奇怪之处在于我
mysql - 在 mysql 数据查询上获取不需要的输出 mysql
以下是我的 SQL 数据结构，我正在尝试如下两个查询: Select Wrk_ID, Wrk_LastName, Skill_Desc from Worker, Skill where
mysql - 将本地 mysql 服务器复制到基于云的 mysql
我们有一个本地 mysql 服务器(不在公共(public)域上)，并希望将该服务器复制到我们拥有的 google 云 sql 实例。我的问题是:1.这可能吗？2.我们的本地服务器只能在本地网络上访问
mysql - MySQL 触发器上 MySQL 变量的算术运算
我有一个表(test_table)，其中一些字段值(例如字段 A、B 和 C)是从外部应用程序插入的，还有一个字段(字段 D)，我想从现有表(store_table)插入其值，但在插入前者(A、B 和
mysql - 无法在创建 MySQL 服务器的同一计划中使用 mysql
我想创建一个 AWS RDS 实例，然后使用 terraform 管理数据库用户。因此，首先，我创建了一个 RDS 实例，然后使用创建的 RDS 实例初始化 mysql 提供程序，以进一步将其用于用户
mysql - MySql 用户数量对 MySql 性能影响大吗？
当用户在我的网站上注册时，他们会在我的一个数据库中创建自己的表格。该表存储用户发布的所有帖子。我还想做的是也为他们生成自己的 MySql 用户——该用户仅有权从他们的表中读取、写入和删除。创建它应该
mysql - mysql 表中的下和子类别(coldfusion，mysql)
我有一个关于 ColdFusion 和 Mysql 的问题。我有两个表:PRODUCT 和 PRODUCT_CAT。我想列出包含一些标记为:IS_EXTRANET=1 的特殊产品的类别。所以我写了这个
mysql - 如何使用 MYSQL 运算符选择列所有值都必须可用 - MYSQL
我想获取 recipes_id 列的值，以获取包含 ingredient_id 的 2,17 和 26 条目的值。假设 ingredient_id 2 丢失则不获取记录。我已经尝试过 IN 运算符
mysql - MySQL 服务器和 MySQL 客户端有什么区别
在 Ubuntu 中，我通常安装两者，但 MySQL 的客户端和服务器之间有什么区别。作为奖励，当一个新语句提到它需要 MySQL 5.x 时，它是指客户端、服务器还是两者兼而有之。例如这个链接ht
mysql - mysql - 如何在没有触发器和手动插入的情况下在插入时生成/自动增加 guid mysql？
我重新访问了我的数据库并注意到我有一些 INT 类型的主键。这还不够独特，所以我想我会有一个指导。我来自微软 sql 背景，在 ssms 中你可以选择类型为“uniqeidentifier”并自
mysql - Oracle MySQL 与 MySQL 相同吗？
我的系统上有 MySQL，我正在尝试确定它是 Oracle MySQL 还是 MySQL。 Oracle MySQL 有区别吗: http://www.oracle.com/us/products/m
mysql - 本地 mysql 服务器和生产 mysql 服务器之间的显着性能差异
我是在生产 MySQL 中运行的应用程序的新维护者。之前的维护者已经离开，留下的文档很少，而且联系不上了。我面临的问题是执行以下请求大约需要 10 秒: SELECT COUNT(*) FROM `
mysql - 如何自动将数据从一个 MySQL 数据库传输到另一个 MySQL 数据库？
我有两个位于不同机器上的 MySQL 数据库。我想自动将数据从一台服务器传输到另一台服务器。比方说，我希望每天早上 4:00 进行数据传输。可以吗？是否有任何 MySQL 内置功能可以让我们做到这一
mysql - 从 mysql 目录外的 mysql 表查询？
有什么方法可以使用 jdbc 查询位于 mysql 根目录之外的目录中的 mysql 表，还是必须将它们移动到 mysql 根目录内的数据库文件夹中？我在 Google 上搜索时没有找到任何东西。最
mysql - 使用另一个 mysql 表的值更新 Mysql 表
我在 mysql 数据库中有两个表。成员和 ClassNumbers。两个表都有一个付费年份字段，都有一个代码字段。我想用代码数字表中的值更新成员表中的付费年份，其中成员中的代码与 ClassNumb
mysql - 是否可以将本地 MySQL 数据库复制到远程 MySQL 数据库？
情况:我有 2 台服务器，其中一台当前托管一个实时 WordPress 站点，我希望能够将该站点转移到另一台服务器，以防第一台服务器出现故障。传输源文件很容易；传输数据库是我需要弄清楚如何做的。两台服
mysql - 使用 mysql 查询复制 mysql 数据库
Phpmyadmin 有一个功能是“复制数据库到”..有没有mysql查询来写这个函数？类似于将 db A 复制到新的 db B。最佳答案首先创建复制数据库: CREATE DATABASE du
mysql - 当 mySQL 已安装并由另一个应用程序配置时，为新应用程序配置 mySQL
我有一个使用 mySQL 作为后端的库存软件。我已经在我的计算机上对其进行了测试，并且运行良好。当我在计算机上安装我的软件时，我必须执行以下步骤: 安装 mySQL 服务器将用户名指定为“root

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使用Ajax和PHP插入数据库(mysql)