我試圖從表單插入數據到MySQL數據庫。我認爲問題出在哪裏,是我在HTML中使用按鈕的地方,因此我把它全部複製過來了。任何幫助,將不勝感激!使用Ajax和PHP插入數據庫(mysql)
當我點擊提交按鈕時,頁面閃爍並且沒有任何內容插入到數據庫中。它應該顯示一個綠色框,表示記錄已經在html頁面上提交。
因爲有些人更擔心我在建立一個認證系統,那麼最新的錯誤。這是不是一個身份驗證系統,它只是一個如何插入mysql數據庫的例子。
的index.html
<!DOCTYPE html>
<html lang="en">
<head>
\t <title>Bootstrap Example with Ajax</title>
\t <meta charset="utf-8">
\t <meta name="viewport" content="width=device-width, initial-scale=1">
\t <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
\t <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
\t <script src="js/insert.js"></script>
\t
\t <style>
\t .custom{
\t \t margin-left:200px;
\t }
\t </style>
</head>
<body>
<div class="container">
\t <h2 class="text-center">Insert Data Using Ajax</h2>
\t
\t <br/>
\t <p id="alert" style="display:none;" class="alert alert-success text-center"><i class="glyphicon glyphicon-ok"></i><span> id="show"</span></p>
\t <br/>
\t <hr/>
\t <form class="form-horizontal" role="form" method="POST">
\t \t <div class="form-group">
\t \t \t <label class="col-sm-2 control-label">Name</label>
\t \t \t \t <div class="col-sm-10">
\t \t \t \t \t <input class="form-control" id="name" type="text" placeholder="Enter you name">
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="form-group">
\t \t \t \t <label for="email" class="col-sm-2 control-label">Email</label>
\t \t \t \t <div class="col-sm-10">
\t \t \t \t \t <input class="form-control" id="email" type="text" placeholder="Your Email...">
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <fieldset >
\t \t \t \t <div class="form-group">
\t \t \t \t \t <label for="password" class="col-sm-2 control-label">Password</label>
\t \t \t \t \t <div class="col-sm-10">
\t \t \t \t \t <input class="form-control" id="password" type="text" placeholder="Your Password...">
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="form-group">
\t \t \t \t <label for="gender" class="col-sm-2 control-label">Gender</label>
\t \t \t \t <div class="col-sm-10">
\t \t \t \t <select id="gender" class="form-control">
\t \t \t \t \t <option value="Male">Male</option>
\t \t \t \t \t <option value="Female">Female</option>
\t \t \t \t </select>
\t \t \t \t </div>
\t \t \t </div>
\t \t <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>
\t \t \t
\t \t \t
\t \t \t \t
insert.php
<?php
\t //Create connection
\t $connection = mysqli_connect('localhost','username','passwd','dbName');
\t
\t if($_REQUEST['name']){
\t $name = $_REQUEST['name'];
\t $email = $_REQUEST['email'];
\t $password= $_REQUEST['password'];
\t $gender = $_REQUEST['gender'];
\t
\t $q = "INSERT INTO user VALUES ('','$name', '$email', '$password', '$gender')";
\t
\t $query = mysqli_query($connection,$q);
\t if($query){
\t \t echo ' Data Inserted Successfully'
mysql_close($connection);
\t \t }
\t }
?>
JS/insert.js
$(document).ready(function(e) {
\t $('#submit').click(function(){
\t \t var name = $('#name').val();
\t \t var email = $('#email').val();
\t \t var password = $('#password').val();
\t \t var gender = $('#gender').val();
\t \t
\t \t $ajax({
\t \t \t type:'POST',
\t \t \t data:{name:name,email:email,password:password,gender:gender},
\t \t \t url:"insert.php", //php page URL where we post this data to save in databse
\t \t \t success: function(result){
\t \t \t
\t \t \t \t $('#alert').show();
\t \t \t \t
\t \t \t \t $('#show').html(result);
\t \t \t \t \t \t
\t \t \t \t
\t \t \t }
\t \t })
\t });
});
到底是什麼問題?什麼不工作? – WillardSolutions
你意識到,這是永遠不會關閉'回聲'數據插入成功',並應該拋出你一個關於它的解析錯誤。你也沒有告訴我們你會得到什麼樣的錯誤(這就是如果你正在檢查它們),它在做什麼,呼應等等。所以,檢查那個和控制檯。 –
當我點擊提交按鈕時,它只是閃爍的頁面,並沒有什麼是在數據庫中。該頁面應在頂部顯示一個綠色框,顯示其添加了一條記錄。 – Colin