javascript - 使用javascript和php连接到phpmyadmin上的数据库

Question

所以我正在尝试用 html/javascript 制作一个绘图应用程序，我想将文件保存到 mysql/phpmyadmin。我的问题是连接到我设置的数据库。

发生的事情是用户在 Canvas 上绘图，单击保存按钮，然后我将行(保存在数组中)和用户名从我的 javascript 文件发送到一个 php 文件，该文件将信息发送到数据库。我试过在网上寻找解决方案，但似乎找不到任何对我有帮助的东西。它可能就在我面前，但我从未尝试过用 javascript 和 php 编写。

只是为了确保没有混淆:我似乎无法弄清楚如何将数据从我的 javascript 文件发送到我的 php 文件并更新数据库

这是我到目前为止得到的:

HTML:

<button id="saveimage" onclick="saveImage()">Save image</button>

Javascript:

function saveImage()
{
    var position = JSON.stringify(allMousePos);
    author = prompt("Please type your name");

    $.ajax({
        type: 'post',
        url: 'https://localhost/folder/database.php',
        data: {author: author, position: position},
        success: function( data ) {
        console.log( data );
        }
    });
}

PHP:

$dbhost = 'localhost';
$dbuser = 'User';
$dbpass = 'pass';

$conn = mysql_connect($dbhost, $dbuser, $dbpass);

if (!$conn)
{
    die('Could not connect: ' . mysql_error());
}

if (!get_magic_quotes_gpc())
{
    $author = addslashes($_POST['author']);
    $mousepositions = addslashes($_POST['position']);
} else
{
    $author = $_POST['name'];
    $mousepositions = $_POST['position'];
}

var_dump($author);

$sql = "INSERT INTO Images (Author, Image) VALUES ('$author', '$mousepositions')";

mysql_select_db('db_to_use');
$retval = mysql_query($sql, $conn);

if (!$retval)
{
    die('Could not enter data: ' . mysql_error());
}

echo "Entered data successfully\n";
mysql_close($conn);

运行时我没有从 chrome 或 firefox 的控制台获得任何输出，数据库中也没有任何输出

我不知道您是否需要更多信息，但如果您需要，请告诉我。数据库只有 3 个字段，一个自动递增的 id，然后是作者和职位。

Answer 1

根据我的评论，您的函数中有一个不必要的嵌套点击处理程序，因此请将其删除。此外，您正在尝试建立安全连接，但(可能)没有在您的计算机上安装 ssl，因此您需要建立常规连接(http 而不是 https):

function saveImage()
{
    var position = JSON.stringify(allMousePos);
    author = prompt("Please type your name");

    $.ajax({
        type: 'post',
        url: 'http://localhost/folder/database.php', //<--Note http
        data: {author: author, position: position},
        success: function( data ) {
        console.log( data );
        }
    });
}