使用 AJAX + jQuery + PHP 将数据发送到 MySQL答案

【问题标题】：send data to MySQL with AJAX + jQuery + PHP使用 AJAX + jQuery + PHP 将数据发送到 MySQL
【发布时间】：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 />";
}

?>

【问题讨论】：

标签： php jquery mysql ajax

【解决方案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_id}etc
                        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()},

【讨论】：