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

Posted 2023-02-25

【中文标题】使用 javascript 和 php 连接到 phpmyadmin 上的数据库

【英文标题】：Connecting to database on phpmyadmin using javascript and php

【发布时间】：2014-11-11 18:56:53

【问题描述】：

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

发生的事情是用户在画布上绘图，单击保存按钮，然后我将行（保存在数组中）和用户名从我的 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，然后是作者和职位。

【问题讨论】：

为什么不在IDE中调试呢？你检查过日志吗？另外，在两行之间打印一些消息，看看是否正在显示。你会知道哪里出错了。

您有一个嵌套在函数中的事件处理程序。删除这一行：$("#saveimage").on( 'click', function () 和相应的大括号。不需要单击处理程序，因为您的函数已由元素 onclick 属性触发

你检查了萤火虫的反应吗？ Firefox 说“POST localhost/folder/database.php [0ms]”只需展开它并单击响应选项卡。

我不知道你在哪里学会了这样的编码，但是请停止。这是基于危险的过时做法，并且充满了无用的货物崇拜代码，而且由于addslashes 不是正确的做法，因此非常不安全。 mysql_query 是一个过时的接口，不应在新应用程序中使用，并将在 PHP 的未来版本中删除。 PDO is not hard to learn。 PHP The Right Way 之类的指南解释了最佳实践。

我不确定在哪里可以找到萤火虫的响应？如果我单击“POST localhost/folder/database.php [0ms]”行，则会打开一个新窗口，但不确定要在这里查找什么..？

【参考方案1】：

不要忘记解码您的数据（之前由 JSON.stringify 编码）。

在尝试处理数据库之前，尝试添加json_decode() 并使用var_dump() 显示所有变量。

希望对你有帮助。

【讨论】：

我按照史蒂夫所说的做了，现在它向控制台输出了一些东西。 Chrome 说 "POST localhost/folder/database.php net::ERR_INSECURE_RESPONSE" 而 Firefox 说 "POST localhost/folder/database.php [0ms]" 。我也照你说的做了，但是 var_dump 好像没有输出任何东西

哦，真的……你试过用“http”代替“https”吗？

【参考方案2】：

根据我的评论，您的函数中有一个不必要的嵌套单击处理程序，因此请删除它。此外，您正在尝试建立安全连接，但（可能）您的机器上没有安装 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 );
        
    );

【讨论】：

是的，我按照你说的更新了上面的代码。从 http 更改为 https 看起来在 Firefox 中没问题，因为它现在显示“POST localhost/folder/database.php [HTTP/1.1 200 OK 3ms]”，但数据库中没有。通过相同的更改，在 chrome 中显示“XMLHttpRequest 无法加载 localhost/folder/database.php。请求的资源上不存在 'Access-Control-Allow-Origin' 标头。因此不允许访问 Origin 'null'。”