Question

我一直在寻找一种方法将一些数据插入到我的数据库中，然后在我网页上已存在的数据列表中显示新数据。

我知道我无法完成的一些要点可能是基础知识，但我刚开始学习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代码。我只是不知道在“data：{}”中输入什么，所以我的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 />";
}

?>

Answer 1

 data: {'messagecontent': $("#message-content").val()},

Answer 2

您可以发送该物业中的任何内容。试试这个： 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，因为它现在已被弃用。

Answer 3

您可以使用onclick，或使用jQuery .click函数作为按钮...

你会将它放在脚本标签中，通常放在头脑中或文件内。已经

    $("#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从发布数据中获取原始数据并将其放在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

Answer 4

以下是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) { }, });

Answer 5

我能够让上面的代码使用链接而不是输入类型的文本框和按钮进行这些调整：

<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>

Answer 6

尝试一下。它可以正常工作

 <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>

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

6 个答案: