嗨,我是php和ajax的初学者,试图创建一个简单的管理页面,该页面只提交一条消息,消息将存储在mysql数据库中。(通过ajax)然而,当我点击提交按钮时,似乎没有数据被解析(我对它进行了编码,这样当按下提交按钮时就会发送消息,而不会刷新页面)。
有人能检查一下我的错误在哪里吗?谢谢
admin.php
<!DOCTYPE html>
<html>
<head> <!--inseart script here -->
<script type= "text/javascript" src="js/jquery.js"></script>
</head>
<body>
Message: <input type="text" name="message" id= "message_form"><br>
<input type="submit" id= "submit_form" onclick = "submit_msg()">
<script type= "text/javascript" src="js/func_submit_msg.js"> </script>
</body>
</html>
我创建了一个单独的函数文件,名为func_submit_msg.js
//this is a function file to submit message to database
$(document).ready(function submit_msg(){
alert('worked');
$.ajax({
type: "POST",
url: "submit_data.php"
data: { message: message_form},
})
}
创建了一个connect.php文件以连接到mysql数据库
<?php
$host = "localhost";
$user = "root";
$pass = ""; // phpMyAdmin mysql password is blank ? i believe
$database_name = "test"; //
$table_name = "test_table_1"; //table that will be accessing
//connect to mysql database
$db = new mysqli($host, $user, $pass, $database_name);
//check connection?
if ($db -> connect_error) {
die("error mysql database not connected: " . $db -> connect_error);
}
else {
echo "connected successfully" ;
}
?>
创建submit_data.php文件以提交到数据库
<?php
include "connect.php";
$insert_data=$db-> query ("INSERT INTO test_table_1(message) VALUES ('$message_form')");
if ($db->query($insert_data === TRUE) ){
echo "New record created successfully";
} else {
echo "Error: " . $insert_data . "<br>" . $cdb->error;
}
$db->close();
?>
用于检查数据库是否正确插入的错误检查代码甚至不会反映数据库是否成功。
更新
submit_data.php,根据@Maximus2012 建议
<?php
include "connect.php";
$insert_data=$db->query("INSERT INTO test_table_1(message) VALUES ($_POST['message_form'])");
if ($insert_data === TRUE) {
echo "New record created successfully";
} else {
echo "Error: " . $insert_data . "<br>" . $cdb->error;
}
$db->close();
?>
没有错误显示,但数据库中仍然没有任何数据记录。
您应该首先将success
回调添加到Ajax:(如果您还没有)
$(document).ready(function(){
$('#submit_form').on('click', function(e){
e.preventDefault();
message_form = $('#message_form').val();
$.ajax({
type: "POST",
url: "submit_data.php",
data: {message: message_form},
success: function(data) {
$('#result').html(data);
},
error:function(err){
//handle your error
alert('did not work');
}
});
});
});
- 在这里,我们使用
.on()
作为连接事件处理程序函数 - 然后,我们使用
.val()
来获得消息输入字段的值并将其存储在一个变量中,用于将其发布到submit_data.php脚本 - 使用
e.preventDefault()
以取消默认事件单击"提交"按钮时
在html中,添加一个结果可以返回到的元素:(
#result
)
<html>
<head>
<script type= "text/javascript" src="js/jquery.js"></script>
<script type= "text/javascript" src="js/func_submit_msg.js"></script>
</head>
<body>
<form action="" method="POST">
Message: <input type="text" name="message" id="message_form"><br>
<input type="submit" id="submit_form">
</form>
<div id="result"></div>
</body>
</html>
- 在这里,我们用
method
和action
将您的输入封装在一个表单中属性,以确保名称属性能够在POST请求
在您的PHP(submit_data.PHP)中,您需要在使用
$message_form
之前为其分配一个值:
<?php
include "connect.php";
$message_form = $_POST['message'];
$insert_data=$db->query("INSERT INTO test_table_1(message) VALUES ('$message_form')");
if ($insert_data === TRUE ){
echo "New record created successfully";
} else {
echo "Error: " . $insert_data . "<br>" . $cdb->error;
}
$db->close();
?>
如果一切顺利,您应该从中得到某种的结果。