Question

我已经尝试查看源代码并更改此内容但仍然没有运气！希望有人能发现我所犯的错误。

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

?>

Bootstrap表格

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

Answer 1

尝试阅读submit()以完全了解其工作原理：https://api.jquery.com/submit/

您没有使用<form>标记，因此submit()不会捕获任何事件。尝试使用id=myform将输入和按钮打包在同一表单标记中，然后重试。

此外，您没有使用event.preventDefault()，否则页面将被刷新。

Answer 2

在您的HTML代码中，您没有任何表单。因此，您无法直接使用 .submit（）或 .serialize（）

考虑在<input name="Name" type="text" id="Name" class="step-input" placeholder="NAME*" readonly="readonly" ng-model="(ContactPerson)+(ContactPersonSurname)" />
中关闭表单元素

将您的HTML更改为：

<form>

<强>更新在<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">×</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属性。按名称属性序列化标签项。

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

2 个答案: