基于express框架的Node.js ajax mongoose实时查询操作

基于express框架的Node.js ajax mongoose实时查询操作

想实现选取下拉框后，后台实时查询相关数据，并返回前端显示 前端index.ejs <!DOCTYPE html> <html> <head> <meta charset=“UTF-8” /> <title><%= title %></title> <link rel=‘stylesheet’ href=’/stylesheets/style.css’ /> <script src="/javascripts/jquery-2.1.1.min.js"></script> <script type=“text/javascript”> function showCustomer(str) { var xmlhttp;
if (str=="") { document.getElementById(“txtHint”).innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState ==4 && xmlhttp.status == 200) { document.getElementById(“txtHint”).innerHTML = xmlhttp.responseText; } } xmlhttp.open(“GET”,"/public/javascripts/func.js?q="+str,true); xmlhttp.send(); } </script> </head> <body> <p><%= title %></p> <form action="" style=“margin-top:15px;”> <label>请选择一个群组： <select name=“groupname” onchange=“showCustomer(this.value)” style=“font-family:Verdana, Arial, Helvetica, sans-serif;”> <option value=“baidu”>BAIDU</option> <option value=“tencent”>TENCENT</option> <option value=“ali”>ALI</option> </select> </label> </form> <div id=“txtHint”>群组信息将在此处列出 …</div> </body> <script type=“text/javascript” src="/javascripts/func.js"></script> </html>

查询功能/public/javascripts/func.js var mongoose = require(‘mongoose’) ; var models = require(’./models.js’) ; var GroupModel = models.Group ; mongoose.connect(‘mongodb://localhost/mytest’) ; var getinfo = function(req,res){ var name = req.query.q; GroupModel.find({groupname:name},function(err,doc){ if(doc != 0){ console.log(‘ooooooo’);//用于测试该函数是否被调用 res.write(doc[0].descriptions); } }); }; getinfo();

控制台输出 Express server listening on port 3000 GET / 304 21ms GET /stylesheets/style.css 304 8ms GET /javascripts/jquery-2.1.1.min.js 304 8ms GET /javascripts/func.js 200 12ms - 1006b GET /public/javascripts/func.js?q=baidu 404 2ms 还是没有反应了，也就是func.js并未被调用 请问：node怎么和ajax结合？


3 回复

为了实现基于 Express 框架的 Node.js AJAX 和 Mongoose 实时查询操作，我们需要确保前端通过 AJAX 请求正确地与后端进行通信。以下是一个改进后的示例代码，包括前端、后端以及数据库模型部分。

前端（index.ejs）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title><%= title %></title>
    <link rel="stylesheet" href='/stylesheets/style.css' />
    <script src="/javascripts/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
        function showCustomer(str) {
            if (str == "") {
                document.getElementById("txtHint").innerHTML = "";
                return;
            }
            $.ajax({
                url: "/groups",
                type: "GET",
                data: { q: str },
                success: function(response) {
                    document.getElementById("txtHint").innerHTML = response;
                }
            });
        }
    </script>
</head>
<body>
    <p><%= title %></p>
    <form action="" style="margin-top:15px;">
        <label>请选择一个群组：
            <select name="groupname" onchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
                <option value="baidu">BAIDU</option>
                <option value="tencent">TENCENT</option>
                <option value="ali">ALI</option>
            </select>
        </label>
    </form>
    <div id="txtHint">群组信息将在此处列出 ...</div>
</body>
</html>

后端（app.js）

const express = require('express');
const mongoose = require('mongoose');

const app = express();

// 连接 MongoDB
mongoose.connect('mongodb://localhost/mytest', { useNewUrlParser: true, useUnifiedTopology: true });

// 定义 Group 模型
const GroupSchema = new mongoose.Schema({
    groupname: String,
    descriptions: String
});

const GroupModel = mongoose.model('Group', GroupSchema);

// 设置静态文件目录
app.use(express.static(__dirname + '/public'));

// 路由处理
app.get('/groups', async (req, res) => {
    const groupName = req.query.q;
    try {
        const groups = await GroupModel.find({ groupname: groupName });
        if (groups.length > 0) {
            res.send(groups[0].descriptions);
        } else {
            res.send('No information found.');
        }
    } catch (error) {
        console.error(error);
        res.status(500).send('Server error.');
    }
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Express server listening on port ${PORT}`);
});

数据库模型（models.js）

const mongoose = require('mongoose');

const GroupSchema = new mongoose.Schema({
    groupname: String,
    descriptions: String
});

module.exports = mongoose.model('Group', GroupSchema);

说明

  1. 前端：使用 jQuery 的 $.ajax 方法发送 GET 请求到 /groups 路径，并传递选中的群组名称。
  2. 后端：创建了一个路由 /groups 来处理 AJAX 请求，查询对应的群组描述并返回结果。
  3. 数据库模型：定义了一个简单的 Mongoose 模型来存储群组名称和描述。

这样配置后，当用户选择不同的群组时，会触发 AJAX 请求，后端处理请求并返回相应的数据，最终更新前端页面上的内容。


method

要在你的应用中实现基于 express 框架的 Node.js AJAX 和 Mongoose 实时查询操作，你需要确保后端能够正确处理前端的 AJAX 请求，并返回相应的数据。下面是修改后的代码和解释：

前端代码（index.ejs）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title><%= title %></title>
    <link rel="stylesheet" href='/stylesheets/style.css' />
    <script src="/javascripts/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
        function showCustomer(str) {
            if (str == "") {
                document.getElementById("txtHint").innerHTML = "";
                return;
            }
            $.ajax({
                url: "/groups",
                type: "GET",
                data: { q: str },
                success: function(response) {
                    document.getElementById("txtHint").innerHTML = response;
                }
            });
        }
    </script>
</head>
<body>
    <p><%= title %></p>
    <form action="" style="margin-top:15px;">
        <label>请选择一个群组：
            <select name="groupname" onchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
                <option value="baidu">BAIDU</option>
                <option value="tencent">TENCENT</option>
                <option value="ali">ALI</option>
            </select>
        </label>
    </form>
    <div id="txtHint">群组信息将在此处列出 …</div>
</body>
</html>

后端代码（app.js）

const express = require('express');
const mongoose = require('mongoose');

const app = express();

// 连接 MongoDB
mongoose.connect('mongodb://localhost/mytest', { useNewUrlParser: true, useUnifiedTopology: true });

// 定义模型
const groupSchema = new mongoose.Schema({
    groupname: String,
    descriptions: String
});
const GroupModel = mongoose.model('Group', groupSchema);

// 处理 GET 请求
app.get('/groups', (req, res) => {
    const name = req.query.q;
    GroupModel.findOne({ groupname: name }, (err, doc) => {
        if (!err && doc) {
            console.log('ooooooo'); // 测试函数是否被调用
            res.send(doc.descriptions);
        } else {
            res.status(404).send('Not found');
        }
    });
});

// 设置静态文件目录
app.use(express.static('public'));

app.listen(3000, () => {
    console.log('Express server listening on port 3000');
});

解释

  1. 前端:

    • 使用 jQuery 的 $.ajax 方法来发送异步请求。
    • 当用户选择不同的选项时，showCustomer 函数会被触发，向服务器发送请求。

  2. 后端:

    • 使用 Express 处理 /groups 路由。
    • 查询数据库并根据请求参数 q 返回相应数据。
    • 如果找不到匹配的数据，则返回 404 错误。

这样，当用户选择不同的群组时，会触发 AJAX 请求，后端处理请求并返回数据，最终前端显示查询结果。

回到顶部