使用 Ajax 和 PHP 插入数据库(mysql)
Posted
技术标签:
【中文标题】使用 Ajax 和 PHP 插入数据库(mysql)【英文标题】:Insert into database (mysql) using Ajax and PHP 【发布时间】:2016-12-12 04:32:13 【问题描述】:我正在尝试将表单中的数据插入 mysql 数据库。我认为问题出在的地方是我在 html 中使用按钮的地方,因此我复制了所有这些按钮。任何帮助,将不胜感激!
当我点击提交按钮时,页面闪烁并且没有任何内容插入数据库。它应该会显示一个绿色框,说明该记录已在 html 页面上提交。
因为有些人更担心我在建立一个身份验证系统然后出了什么问题。这不是身份验证系统,它只是如何插入 mysql 数据库的示例。
索引.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/insert.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);
)
);
);
【问题讨论】:
到底是什么问题?什么不工作? 你意识到这永远不会关闭echo ' Data Inserted Successfully'
并且应该给你一个解析错误。你也没有告诉我们你可能会遇到什么错误(如果你正在检查它们),它在做什么,回显等等。所以,检查那个和控制台。
当我点击提交按钮时,它只是闪烁页面,数据库中没有任何内容。该页面应在顶部显示一个绿色框,显示其添加的记录。
我们也不知道您是否安装了 webserver/php 等并使用了正确的 url,如果是本地的。
我看到声明 $('#submit').click(function()
但我找不到 submit
id?
【参考方案1】:
无论如何,这个特定的代码允许插入到数据库中,尽管在某个地方仍然存在一些我无法找到的问题。
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');
?>
【讨论】:
我必须重写绿色弹出窗口说成功!但是非常感谢您的完美! 如何在索引屏幕中查看 ajax 响应【参考方案2】:首先,您附加到 ID 为“submit”的元素的 jQuery 事件处理程序永远不会触发,因为它不会匹配 html 中的任何元素。将您的 html 更改为以下内容:
<button type="submit" name="submit" id="submit"> Submit! </button>
然后,您需要稍微改变一下您的 SQL 语法。您的查询是:
$q = "INSERT INTO user VALUES ('','$name', '$email', '$password', '$gender')";
你告诉 mysql 将这些值插入到“用户”表中,但你没有告诉它要插入哪些列。你需要这样的东西:
$q = "INSERT INTO user (name, email, password) VALUES ('$name', '$email', '$password', '$gender')";
我假设您的 VALUES 中的空白字符串应该为插入的 ID 保留一个位置...如果您在数据库表中打开了自动递增功能,则不必包含空白字符串。这只是解决您的问题的开始,但如果您提供有关您收到的错误的更多详细信息,我们可能会提供更多帮助。
【讨论】:
非常感谢您的详细建议,您说得对,我设置了自动增量。我创建了对按钮的更改,但它仍然没有插入到数据库(和 php)中。 您对数据库所在的服务器有 ssh 访问权限吗?如果是这样,您可以查看 Apache 错误日志,它们可能会告诉您插入不起作用的原因。为了帮助您,我们需要更多有关抛出哪些错误以及代码运行环境的信息。如果您还没有,请在您的 php 脚本中将 error_reporting 设置为 -1,以获取有关可能导致脚本失败的原因的更多详细信息:php.net/manual/en/function.error-reporting.php以上是关于使用 Ajax 和 PHP 插入数据库(mysql)的主要内容,如果未能解决你的问题,请参考以下文章
无法使用 PHP 和 JQuery Ajax 将新记录插入 mysql db