使用Ajax和PHP插入数据库(mysql) [英] Insert into database (mysql) using Ajax and PHP
本文介绍了使用Ajax和PHP插入数据库(mysql)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试将表单中的数据插入到mysql数据库中.我认为问题所在是Im在HTML中使用按钮的位置，因此为什么我将所有内容都复制了过来.任何帮助，将不胜感激！
I am trying to insert data from a form into a mysql database. The place I think the issue is, is where Im using the button in the HTML hence why I copied all of it over. Any help would be appreciated!
当我按下提交"按钮时，页面闪烁，并且没有任何内容插入数据库.它应该显示一个绿色框，表示记录已在html页上提交.
When I hit the submit button, the page flashes and nothing is inserted into the DB. It should display a green box saying the record has been submitted on the html page.
因为有些人更担心我要建立一个身份验证系统，然后又出了什么问题.这不是身份验证系统，只是如何将其插入mysql数据库的示例.
Because some people are more worried Im building an authentication system then whats wrong. This is NOT an authentication system, its just an example of how to insert into a mysql db.
Index.html
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>
insert.php
insert.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
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);
}
})
});
});
推荐答案
无论如何，此特定代码可以允许插入数据库，尽管在某些地方我仍然找不到问题.
Anyway, this particular code works out to allowing insertion into database, though there are still some problem somewhere which I cannot find out.
index.html
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>
insert.php
insert.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和PHP插入数据库(mysql)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
