引导表单使用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';
}

?>

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

---

尝试阅读

submit（）

以充分了解其工作原理：

您没有使用

标记，因此

submit（）

不会捕获任何事件。 请尝试将输入和按钮包装在同一个表单标记中，使用

id=myform

，然后重试

---

另外，您没有使用

event.preventDefault（）

，没有它页面将被刷新。

在html代码中，您没有任何表单。因此不能直接使用.submit（）或.serialize（）

考虑关闭

将您的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

属性。

---

按名称属性序列化标签项。

出现了什么错误？在浏览器的开发人员模式控制台中看不到任何内容。我的javascript在表单之前被调用，如下所示：在提交了带有空白msgThanks的表单后，我现在得到一个弹出对话框。修复了表单标记，但我仍然无法将新记录插入数据库表添加到

input

中的

name

属性。在我的回答中看到更新的代码。先生，我想在PHPAJAX中插入测试数据和图像，所以代码将如何修改，请帮助我。

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

<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>