Question

我有2个输入字段“User”和“Comment”，我希望使用AJAX异步保存用户输入，所以没有刷新。到目前为止，我已经将它添加到数据库的新行，但由于某种原因它是空的。我相信原因是我没有正确追加价值。

HTML（JS介于头标记之间）：

<p>User: <input type="text" id="userName" /></p>
<p>Comment : <input type="text" id="comment" /></p>
<input type="button" value="Submit" onclick="callServer();" />

JS：

function callServer(){
  var usr = document.getElementById("user").value;
  var cmnt = document.getElementById("comment").value;
  var ajaxRequest = XMLHttpRequest();

  ajaxRequest.open("POST", "insert.php", true);
  ajaxRequest.send(null);
}

PHP：

<?php
// Setting variables for the elements
$user = $_POST['user'];
$comment = $_POST['comment'];

// Establishing connection and selecting db    
$con = mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db('local',$con);

// Doing the query for the insert
$query = mysql_query("INSERT INTO content (Title, Article)
VALUES('$user', '$comment')");

mysql_query($query, $con);
mysql_close($con);
?>

Answer 1

您的输入ID为userName，但您定位的是user。

更改为：

var usr = document.getElementById("userName").value;

您还发送null ajax请求，您应该发送数据：

var params = "user=" + encodeURIComponent(usr) + "&comments=" + encodeURIComponent(cmnt);
ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
ajaxRequest.send(params);

此外，您应该包含内容类型标题 - 如上所述。

最后，不推荐使用mysql_ *库，您应该使用现代API（如PDO或MySQLi）进行任何新开发。因为您正在使用此库，所以需要转义SQL注入的后期数据：

$user = mysql_real_escape_string($_POST['user']);
$comment = mysql_real_escape_string($_POST['comment']);

如果您使用现代API，则可以执行参数化查询，这些查询不需要您手动转义任何内容。

还注意到，请删除此行：

mysql_query($query, $con);

您之前已经在该行上执行了查询。此行无用且将失败，它尝试使用第一个查询的结果资源执行另一个查询。

Answer 2

我开始关注Jquery，它对javascript / Ajax部分有很大帮助。

这里的问题是你永远不会在AJAX调用中发送变量，你需要这样的东西：

ajaxRequest.send(postvariables);

如何使用AJAX和PHP将数据添加到sql db中

2 个答案: