使用 AJAX + jQuery + PHP 将数据发送到 MySQL
Posted
技术标签:
【中文标题】使用 AJAX + jQuery + PHP 将数据发送到 MySQL【英文标题】：send data to MySQL with AJAX + jQuery + PHP 【发布时间】：2013-12-21 22:09:51 【问题描述】：我整天都在寻找一种方法，将一些数据插入到我的数据库中，然后在我的网页上已经存在的数据列表中显示新数据。
我知道我无法完成的一些要点可能是基础知识，但我刚开始学习 javascript/AJAX，所以我的知识有限。
我认为 70% 的工作已经完成，我可以使用 AJAX/jQuery/php 在我的网页上显示数据，但我不知道如何再次使用 AJAX/将数据从“textarea”发送到我的数据库/ jQuery/PHP。
到目前为止，这就是我所做的：
index.php 在这个页面中，我认为我需要在按钮上放置一个 onClick: function()，但我不知道该函数应该放在哪里以及它应该做什么。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TP2</title>
<script src="jquery-1.10.2.min.js"></script>
</head>
<body>
<script src="javascript.js"></script>
Message: <input type="text" id="message-content">
<input type="button" id="message-submit" value="Envoyer">
<div id="output" align="center">
</div>
</body>
</html>
javascript.js 此页面包含在#output div 中显示我的数据的 AJAX 代码。 我只是不知道在“数据：”中放什么，所以我的 textarea 的内容被发送到我的 php 文件。
$.ajax(
url: "messages.php",
type: "POST",
async: true,
data: WHAT GOES HERE ? ,
dataType: "html",
success: function(data)
$('#output').html(data);
,
);
messages.php 我知道 INSERT 查询会到这里，但我不知道如何从我的 textarea 的 POST 中获取值。
<?php
$host = "localhost";
$user = "root";
$pass = "root";
$databaseName = "myDataBaseName";
$tableName = "comments";
$con = mysql_connect($host,$user,$pass);
$dbs = mysql_select_db($databaseName, $con);
$result = mysql_query("SELECT * FROM $tableName ORDER BY date DESC LIMIT 0 , 10 ");
$data = array();
while ($row = mysql_fetch_array($result))
echo $row['message']." - ".$row['date'];
echo "<br />";
?>
【问题讨论】：
【参考方案1】：试试这个。它的工作原理
<script>
$("#message-submit").click(function()
var senddata = $('#message-content').val();
console.log(senddata);
$.ajax(
type: "post",
url: "messages.php",
dataType: 'json',
data: message:senddata,//for multiple data you can use
//message:senddata,id:user_idetc
success: function(data)
console.log(data);
);
);
</script>
【讨论】：
【参考方案2】：您可以使用 onclick，或使用 jQuery .click 函数作为按钮...
你可以把它放在脚本标签中，通常在你的头脑中或在 document.ready 中
$("#message-submit").click(function()
//in here we can do the ajax after validating the field isn't empty.
if($("#message-content").val()!="")
$.ajax(
url: "messages.php",
type: "POST",
async: true,
data: message:$("#message-content").val() , //your form data to post goes here as a json object
dataType: "html",
success: function(data)
$('#output').html(data);
,
);
else
//notify the user they need to enter data
);
对于messages.php，您的AJAX POST 的值现在将在变量$_POST['message'] 中可供PHP 使用
$sql = "INSERT INTO tableName (messages) VALUES ('".$_POST['messages']."')";
编辑/更新： 六年后，我的原始答案再次获得了赞成票，所以我觉得发布一个更新可能是相关的，即上述内容现在被全球接受为非常不安全。使用的 jQuery 应该放在文档末尾的 $(document).ready() 方法中，或者最好从单个缩小的 app.js 文件中加载。除此之外，您可能希望结合某种形式的 CSRF（跨站点请求伪造）令牌系统，以帮助防止机器人用垃圾邮件和潜在的恶意数据猛烈攻击您的表单，这会导致下一点。
此处列出的 SQL 从 post 数据中获取原始数据并将其放入 insert 语句中。至少你应该清理这些数据。如果您使用 mysqli，您可以使用 mysqli::real_escape_string($str) 静态方法 (http://php.net/manual/en/mysqli.real-escape-string.php) 来清理任何用户提供的置于查询中的数据。
但是，现在更好的方法是使用带有 PDO 的预准备语句，以便提供的数据以只能按预期使用的方式绑定到查询。 http://php.net/manual/en/pdo.prepare.php
【讨论】：
【参考方案3】：通过这些调整，我能够使用链接而不是输入类型的文本框和按钮来获得上述代码：
<script type="text/javascript">
function msg(intValue)
var x = intValue;
$.ajax(
url: "messages.php",
type: "POST",
data: 'message=' + x,
success: function(data)
$('#output').html(data);
,
);
</script>
在我的链接上：
<a href="#" id="message-content" onclick="msg('fl')">Florida</a>
【讨论】：
【参考方案4】：您可以发送该属性中的任何内容。尝试这个： js
$.ajax(
url: "messages.php",
type: "POST",
data: 'show=content',
success: function(data)
$('#output').html(data);
,
);
messages.php
if(isset($_POST['show']) && $_POST['show']=='content')
// rest of your code goes here..
还有一件事。使用 MySQLi 而不是 MySQL，因为它现在已被弃用。
【讨论】：
感谢您的回复，我正在尝试使用该代码，但在这一行出现语法错误：if(isset($_POST['show'] && $_POST['show']= ='内容') 糟糕。我急忙写了。 isset 函数缺少括号。请立即尝试。 好的，如果我做对了，它应该看起来像这样： if(isset($_POST['show']) && $_POST['show']=='content') mysql_query("INSERT INTO $tablename (id ,message ,date) VALUES (NULL , ' ', CURRENT_TIMESTAMP"); 我应该在“message”中输入什么值，以便数据库接收到我的 textarea 中的文本？ data: 'message="Hello World!"' 然后在 PHP 文件中，使用 $_POST['message'] 如果你想要你的表单字段数据使用 $("#message-content").val ()【参考方案5】：Doc 是这样说的：
数据 类型：PlainObject 或 String
随请求发送到服务器的普通对象或字符串。
这里有一些关于普通对象的信息：http://api.jquery.com/Types/#PlainObject
请看下一个用法示例：
var formData = "name=ravi&age=31"; //Name value Pair
或
var formData = name:"ravi",age:"31"; //Array
$.ajax(
url : "messages.php",
type: "POST",
data : formData,
success: function(data, textStatus, jqXHR)
//data - response from server
,
error: function (jqXHR, textStatus, errorThrown)
,
);
【讨论】：
【参考方案6】： data: 'messagecontent': $("#message-content").val(),
【讨论】：
以上是关于使用 AJAX + jQuery + PHP 将数据发送到 MySQL的主要内容，如果未能解决你的问题，请参考以下文章