Javascript 使用ajax、json和php插入数据

简介我正在使用Ajax、PHP和SQL向数据库中插入内容

错误：

警报（数据）

说未定义：first\u name…..我想我是用

$first\u name=strtoupper（$\u POST['first\u name'））定义的。

在

add.php

文件中

Index.php

<script type="text/javascript"> 
    $(document).on('click','#update_btn',function (){
     $.ajax({
            type:'POST',
            url:'add.php',
             datatype: "json",
            data: {
                first_name: $("#first_name").val(),
                last_name: $("#last_name").val(),
                position: $("#position").val(),
                updated: $("#updated").val(),
            }, 
            success: function(data){ 
                alert(data);
                if (data=='ADD_OK') {
                  location.reload();
                } else {
                     alert('something wrong');
                }
                  }
             })
        });

<form id="form1" class="form-inline" method="post" action="">
<input type="text" name="first_name" placeholder="First Name" required>
<input type="text" name="last_name" placeholder="Last Name" required>
<select name="position" id="multiple-select-optgroup-default2" class="custom-select"> 
<option selected>Admin</option>
<option value="Teacher">Teacher</option required>
<option value="Staff">Staff</option>
</select>
<input type="hidden" name="updated" value='<?php echo date("Y-m-d");?>' >
<button class="btn btn-success btn-sm active" type="submit" name="save" id="update_btn"><span class="glyphicon glyphicon-plus-sign"></span> Save</button>
</form>  
</script>

 <?php
    $first_name = strtoupper($_POST['first_name']);
    $last_name = strtoupper($_POST['last_name']);
    $position = strtoupper($_POST['position']);
    $updated = $_POST['updated'];  
       $stmt = $conn->prepare("INSERT INTO employees (first_name, last_name, position, updated) VALUES (?, ?, ?, ?)");
       $stmt->bind_param('ssss', $first_name, $last_name, $position, $updated);
       $add = $stmt->execute();

       if($add) {
          echo "ADD_OK";
       }
      ?>

$（文档）。在（'单击'，'更新'u btn'，函数（）{
$.ajax({
类型：'POST'，
url:'add.php'，
数据类型：“json”，
数据：{
名字：$（“#名字”）.val（），
姓氏：$（“#姓氏”）.val（），
位置：$（“#位置”）.val（），
更新：$（“#更新”）.val（），
}, 
成功：函数（数据）{
警报（数据）；
如果（数据=='ADD_OK'）{
location.reload（）；
}否则{
警惕（“出了什么事”）；
}
}
})
});
管理
教师
工作人员

未定义：first\u name出现错误，因为您没有在表单中提供索引，而是在jquery中使用。显示并使用如下HTML代码进行检查

<input type="text" name="first_name" id="first_name" placeholder="First Name" required>
<input type="text" name="last_name" id="last_name" placeholder="Last Name" required>
<select name="position" id="position" class="custom-select"> 
<option selected>Admin</option>
<option value="Teacher">Teacher</option required>
<option value="Staff">Staff</option>
</select>
<input type="hidden" name="updated" id="updated" value='<?php echo date("Y-m-d");?>' >

管理
教师
工作人员
它是未定义的：first_name给出了一个错误，因为您没有在表单中给出索引，而是在jquery中使用。显示并使用如下HTML代码进行检查

<input type="text" name="first_name" id="first_name" placeholder="First Name" required>
<input type="text" name="last_name" id="last_name" placeholder="Last Name" required>
<select name="position" id="position" class="custom-select"> 
<option selected>Admin</option>
<option value="Teacher">Teacher</option required>
<option value="Staff">Staff</option>
</select>
<input type="hidden" name="updated" id="updated" value='<?php echo date("Y-m-d");?>' >


管理
教师
工作人员
以下是您的jQuery代码：

data: {
                first_name: $("#first_name").val(),
                last_name: $("#last_name").val(),
                position: $("#position").val(),
                updated: $("#updated").val(),
            }, 

在本例中，您正试图通过您提到的文本框id获取值

$（“#名字”）.val（）

将代码更改为：

data: {
                first_name: $('input[name="first_name"]').val(),
                last_name: $('input[name="last_name"]').val(),
                position: $('input[name="position"]').val(),
                updated: $('input[name="updated"]').val(),
            }, 

希望它能对您有所帮助。
以下是您的jQuery代码：

data: {
                first_name: $("#first_name").val(),
                last_name: $("#last_name").val(),
                position: $("#position").val(),
                updated: $("#updated").val(),
            }, 

在本例中，您正试图通过您提到的文本框id获取值

$（“#名字”）.val（）

将代码更改为：

data: {
                first_name: $('input[name="first_name"]').val(),
                last_name: $('input[name="last_name"]').val(),
                position: $('input[name="position"]').val(),
                updated: $('input[name="updated"]').val(),
            }, 

希望能对您有所帮助。
这有什么问题吗？这正是我想弄明白的。我的代码看起来很完美。我的错误是未定义索引：first_name。姓氏、职位和更新的情况也一样。您可以添加print\r（$\u POST）并在add.phpshows数组（）中显示打印结果吗。。。。。。。。。。。看起来你已经了解了一些东西，虽然我认为它在$first\u name=strtoupper（$\u POST['first\u name']）中是空白的；我只是在我的HTML表单中添加了。有一点可能是错误在那里？你可以在HTML中使用.val（）一个值，我假设..这有什么问题吗？这就是我想弄清楚的。我的代码看起来很完美。我的错误是未定义索引：first_name。姓氏、职位和更新的情况也一样。您可以添加print\r（$\u POST）并在add.phpshows数组（）中显示打印结果吗。。。。。。。。。。。看起来你已经了解了一些东西，虽然我认为它在$first\u name=strtoupper（$\u POST['first\u name']）中是空白的；我只是在我的HTML表单中添加了。有一点可能是错误在那里？你可以.val（）一个我假设的HTML值..不认为这是有效的或者是典型的方法：不认为这是有效的或者是典型的方法：正确。我注意到当您将数据类型大写时（这使得ajax JSON无法完全工作）。正确。我注意到当您将数据类型大写时（这使得ajax JSON无法完全工作）。