Bootstrap表單使用AJAX和PHP添加新記錄

我試過看源代碼並改變了這一點，但仍然沒有運氣！希望有人能夠發現我犯的錯誤。Bootstrap表單使用AJAX和PHP添加新記錄

我基本上只是試圖提交一個表單只有一個輸入字段，現在使用AJAX和PHP來發布使用PDO方法。

這裏是我的代碼：

連接到數據庫

<?php 

define('HOST', 'localhost'); 
define('DB_NAME','test'); 
define('USER','root'); 
define('PASS',''); 

$dsn = 'mysql:host='.HOST.'; port='.PORT.'; dbname='.DB_NAME; 

try { 
$bd = new PDO($dsn, USER, PASS); 
// $bd->setAttribute(PDO::ATT_ERRMODE, PDO::ERRMODE_EXCEPTION); 
} catch (PDOException $e) { 
echo 'Problem connecting to database, contact admin'; 
} 

?>

引導表

<div class="modal fade" id="add_new_record_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
<div class="modal-dialog" role="document"> 
<div class="modal-content"> 
<div class="modal-header"> 
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
<h4 class="modal-title" id="myModalLabel">Add New Record</h4> 
</div> 
<div class="modal-body"> 

<div class="form-group"> 
<form id ="myform"> 
<label for="name">Name</label> 
<input type="text" id="name" placeholder="Name" class="form-control" /> 
</div>  
</div> 
<div class="modal-footer"> 
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
<button type="submit" class="btn btn-default" id="submit" value="submit">Submit</button> 
</form> 
</div> 
</div> 
</div> 
</div>

AJAX腳本

$(document).ready(function(){ 
    $('#myform').submit(function(){ 
     var data = $(this).serialize(); 

     $.ajax({ 
      url: "insert.php", 
      type: "POST", 
      data: data, 
      success: function(data) 
      { 
       alert(data); 

      }, 
      error: function(){ 
       alert('ERROR'); 
      } 
     }); 

     return false; 
    }); 
});

insert.php腳本

<?php 
require_once('config.php'); 

if(isset($_POST['submit'])){ 

    $name = $_POST['name']; 


    $sql = 'INSERT INTO people(name) '; 
    $sql .= ' VALUES (:name)'; 

    try { 
     $query = $bd->prepare($sql); 
     $query->bindValue(':name', $name, PDO::PARAM_STR); 


     if($query->execute()){ 
      echo "recorded added sucessfully"; 
     }else{ 
      echo "Problem adding new record"; 
     } 

    } catch (Exception $e) { 
     echo $e->getMessage(); 
    } 
} 
?>

來源

2017-07-10 Lets Talk About It

你有什麼錯誤？ –

沒有看到瀏覽器上開發人員模式的控制檯中的任何內容。我的JavaScript被稱爲之前的形式作爲bellow： –

即時獲取彈出對話框後提交空白msg –

在您的html代碼中，你沒有任何表格。所以你不能直接使用.submit（）或.serialize（）

考慮關閉你形式元素中<form>

你的HTML改成這樣：

<div class="modal fade" id="add_new_record_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
<div class="modal-dialog" role="document"> 
<div class="modal-content"> 
<div class="modal-header"> 
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
<h4 class="modal-title" id="myModalLabel">Add New Record</h4> 
</div> 
<div class="modal-body"> 

<div class="form-group"> 
<form id ="myform"> 
<label for="name">Name</label> 
<input type="text" name="name" placeholder="Name" class="form-control" /> 
</div>  
</div> 
<div class="modal-footer"> 
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
<button type="submit" class="btn btn-default" id="submit" value="submit">Submit</button> 
</form> 
</div> 
</div> 
</div> 
</div>

更新： 在input標記中添加name屬性。按名稱屬性序列化標籤項目。

來源

2017-07-10 09:18:26

謝謝。修復了表單標籤，但我仍然無法將新記錄插入數據庫表 –

在'input'中添加'name'屬性。在我的答案中查看更新的代碼。 –

嘗試瞭解submit()充分了解它是如何工作：https://api.jquery.com/submit/

您沒有使用<form>標籤，所以submit()不捕獲任何事件。嘗試使用id=myform將輸入和按鈕封裝在同一個表單標記中，然後重試。

此外，您還沒有使用event.preventDefault()，沒有它，頁面將被刷新。

來源

2017-07-10 09:12:36

Bootstrap表單使用AJAX和PHP添加新記錄

回答

相關問題