php - Bootstrap 表单使用 AJAX 和 PHP 添加新记录

Question

我尝试查看源代码并更改它，但仍然没有成功!希望有人能发现我所犯的错误。

我现在基本上只是尝试使用 AJAX 和 PHP 提交一个只有 1 个输入字段的表单，然后使用 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;
    });
});

插入.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();
    }
}
?>

Answer 1

在您的 html 代码中，您没有任何表单。所以你不能直接使用 .submit() 或 .serialize()

Consider closing you form elements within <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>

更新:添加name input 中的属性标签。按名称属性序列化标签项。