时间戳

首页 > 解决方案 > 如何从mysql获取数据并使用ajax以表格形式显示

mysql - 如何从mysql获取数据并使用ajax以表格形式显示

问题描述

我创建了一个表单，我希望在输入 user_id 时使用来自 mysql 的数据自动填充（要自动填充的 first_name 和 last_name 字段）。我已经使用 ajax 来执行此操作，并且这些数据（我的意思是指 user_id 输入的 first_name 和 last_name ）完全是从数据库中获取的，但我并没有因为 XMLHttpRequest.response 正在发回而以那种形式恢复它们整个“form.ejs”代码而不是发送这些数据。我只是nodejs的初学者，你能帮我解决它吗？看看我的代码的这些部分：

表单.ejs

<label for = "user_id">User Id:</label>
<input type='text' name="user_id" id="user_id" class="form-control" placeholder="Enter user id" onkeyup="GetDetail(this.value)" value="">

<label for = "first_name">First Name:</label>
<input type="text" name="first_name" id="first_name" class="form-control" placeholder='First Name' value="">

<label>Last Name:</label>
<input type="text" name="last_name" id="last_name" class="form-control" placeholder='Last Name' value="">

form.ejs 链接到下面的脚本 ajax.js

ajax.js

function GetDetail(str) {
if (str.length == 0) {
    document.getElementById("first_name").value = "";
    document.getElementById("last_name").value = "";
    return;
} else {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function (results) {
         if (this.readyState == 4 && this.status == 200) {
        console.log(this.responseText);
        var myObj = JSON.parse(this.responseText);
        document.getElementById("first_name").value = myObj[0];
        document.getElementById("last_name").value =myObj[1];
         }
        }
        xmlhttp.open("GET", "/?user_id=" + str, true);
        xmlhttp.send();
     }
}

“this.responseText”发回整个“form.ejs”脚本，但我希望它发回数据库中获取的数据（名字和姓氏）。

这是服务器端 Server.js

app.get('/', function (req, res) {
    var userid = req.query.user_id;
    var data = [];
    if (userid !== ""){
        connection.query("SELECT * FROM userdata WHERE user_id = ?",[userid], function (err, results, fields) {
            if(err) {
            console.log(err);
            } else {
                for (var i = 0; i < results.length; i++) {
                    var a = results[i].first_name; 
                    var b = results[i].last_name;
                }
            }
            data.push(a, b);
            var obj = JSON.stringify(data);
            res.render("form", {obj:obj});
        });

标签： mysqlnode.jsexpress

解决方案

您错误地使用了 EJS。EJS 是一个模板引擎，因此您正在做的是返回“表单”ejs 而不是 JSON 本身。

这使您有两个选择。

1）创建一个 API 路由以仅返回 JSON 2）将您的查询返回到 EJS 并让它呈现它

就个人而言，除非有理由通过 ajax 执行此操作，否则我只会将其呈现为 EJS 的一部分

要在 ejs 中呈现它，您想要做的是

节点

app.get('/', function (req, res) {
    var userid = req.query.user_id;
    var data = [];
    if (userid !== ""){
        connection.query("SELECT * FROM userdata WHERE user_id = ?",[userid], function (err, results, fields) {
            if(err) {
            console.log(err);
            } else {
                //replace ejstemplate with ejs to render
                res.render('ejstemplate', {
                                //results will be accessable in the template 
                                results: results
                            })
                
                }
        });

所以基本上我们所做的就是从查询中获取响应并将其传递给 EJS 可以使用的变量。注意：我不使用 mysql，因此它返回响应的方式可能会有所不同，在 postgres 中将响应放在“行”对象中，以便控制台输出您需要的内容，但对于 PG，响应将是 results.rows （这是一个 JSON 对象）

然后在您的 EJS 模板上，您可以访问响应，例如

<%-results[0].first_name%>

如果需要，您还可以循环遍历项目。如前所述，EJS 是一种模板语言，因此它允许您将变量等传递给页面，并且 EJS 将在服务器而不是客户端上呈现它。同样，这通常是更好的选择，除非您需要通过 XHR...

另一方面，如果您确实需要使用 XHR，那么响应会有所不同，如前所述，类似于

 res.json(results);

这将以 JSON 格式返回结果，然后您可以在客户端执行所需的操作。

推荐阅读