2016-08-05 32 views
1

我試圖從表單插入數據到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 }); 
 
});

+0

到底是什麼問題?什麼不工作? – WillardSolutions

+0

你意識到,這是永遠不會關閉'回聲'數據插入成功',並應該拋出你一個關於它的解析錯誤。你也沒有告訴我們你會得到什麼樣的錯誤(這就是如果你正在檢查它們),它在做什麼,呼應等等。所以,檢查那個和控制檯。 –

+0

當我點擊提交按鈕時,它只是閃爍的頁面,並沒有什麼是在數據庫中。該頁面應在頂部顯示一個綠色框,顯示其添加了一條記錄。 – Colin

回答

2

無論如何,這個特定的代碼可以插入到數據庫中,儘管在某些地方我還找不到一些問題。

的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

<?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'); 
      } 
     } 

?> 
+0

Ill必須重寫綠色彈出說成功!但非常感謝你的完美! – Colin

0

首先,你要連接到一個元素ID爲「提交」 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')";

我想在你的價值觀空字符串應該留出一個位置插入的ID ...如果你有自動遞增您的數據庫表開啓您不必包含空白字符串。這只是解決問題的一個開始,但如果您包含有關您接收哪些錯誤的更多詳細信息,我們可能會提供更多幫助。

+0

非常感謝您的詳細建議,你是正確的我有自動增量設置。我創建了按鈕的變化,但它仍然沒有插入數據庫(和PHP)。 – Colin

+0

你有ssh訪問數據庫的服務器嗎?如果是這樣,你可以查看Apache錯誤日誌,他們可能會告訴你爲什麼插入不起作用。爲了幫助您,我們需要更多關於拋出錯誤的信息以及您的代碼運行環境。如果你還沒有,在你的php腳本中設置error_reporting爲-1,以獲得更多關於可能導致你的腳本失敗的細節:http://php.net/manual/en/function.error-reporting.php –

相關問題