使用 javascript 和 php 連接到 phpmyadmin 上的數據庫

Question

所以我試圖在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，然后是作者和職位。

Answer 1

不要忘記解碼您的數據（之前由 JSON.stringify 編碼）。

在嘗試處理數據庫之前，嘗試添加json_decode()並使用var_dump()顯示所有變量。

希望能幫助到你。

Answer 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 );
        }
    });
}

Answer 3

這里有一個工作示例： https ://code-boxx.com/connect-database-javascript/

有解釋。