使用 AJAX + PHP 插入到 MySQL 数据库

Question

我试图在不刷新页面的情况下将数据从表单插入数据库，我的 HTML 页面如下所示：

<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>

    <body>
        <form name="form1" method="post" action="">Enter Name
            <input type="text" name="t1" id="t1">
            </td>
            <br>Enter City
            <input type="text" name="t2" id="t2">
            </td>
            <br>
            <input type="button" name="button1" value="Insert to DB" onClick="aa()">
        </form>
        <div id="d1"></div>
        <script type="text/javascript">
            function aa() {
                var xmlhttp = new XMLhttpRequest();
                xmlhttp.open("GET", "insert.php?name=" + document.getElementById("t1").value + "&city" + document.getElementById("t2").value, false);
                xmlhttp.send(null);

                document.getElementById("d1").innerHTML = xmlhttp.responseText;;
            }
        </script>
    </body>
</html>

我的 insert.php 看起来像：

<?php
    $name = $_GET["name"];
    $city = $_GET["city"];

    mysql_connect("localhost","root", "");
    mysql_select_db("dwh");
    mysql_query("insert into table1 values('$name','$city')");
    echo "Record inserted";
?>

在我看来，这应该发送 PHP "get" 中的所有数据，而 php 应该只接收并插入它。不知何故不是。也许我遗漏了什么，你能帮我找到问题吗？

浏览器控制台说：

(index):16 Uncaught ReferenceError: XMLhttpRequest is not defined(index):16 aa(index):9 onclick

非常感谢。

p.s。我知道我的 MYSQL 连接存在安全风险，创建它只是为了测试如何使其工作。

Answer 1

您在 &city 中的单词 "city" 后遗漏了一个等号，并且在构建查询字符串时是必需的：

xmlhttp.open("GET", "insert.php?name=" + document.getElementById("t1").value + "&city" + document.getElementById("t2").value, false);

应该是

xmlhttp.open("GET", "insert.php?name=" + document.getElementById("t1").value + "&city=" + document.getElementById("t2").value, false);

Answer 2

尝试包含表的列名，例如：

insert into table1 (column1, column2) values('$name','$city')

此外，使用另一个变量来检查您的查询是否成功执行：

$result = mysql_query("insert into table1 (column1, column2) values('$name','$city')");
if (!$result) {
    die('Invalid query: ' . mysql_error());
}

Answer 3

(index):16 Uncaught ReferenceError: XMLhttpRequest is not defined(index):16 aa(index):9 onclick

JavaScript 区分大小写。函数是XMLHttpRequest（大写H）。

Answer 4

您需要解决两件事：

行 var xmlhttp = new XMLhttpRequest(); 应该是 var xmlhttp = new XMLHttpRequest(); 大写 H。
您需要将 id 赋给 <input>，因为您要通过 getElementById() 附加值。当前没有您通过的 id 元素。

使用 AJAX + PHP 插入到 MySQL 数据库

Inserting in to MySQL database using AJAX + PHP

php

mysql

ajax