臣本设计 2022-01-25 23:02 采纳率: 100%
浏览 68
已结题

帮我写一个$.ajax代码获取后端nodejs接口数据(简单)

获取mysql后台数据get方法

需求是这样的:
我初学者,

现在我的html页面有一个按键button,
我希望点击这个按键后,可以把后台的某个数据获取出来,并且在button下方的div区域里显示出来.

我的后台是nodejs写的.

主要想解决以下问题:

我现在最大的问题是:

我后台接口的数据用ejs\art-template之类的模板render到前端,是可以正常显示的,假设数据是{{list}}
后端查到的数据,就是 {list:rows},

现在想用$.ajax去获取这个list对象里的内容,就懵了,不知道怎么办了,求解决.

有几个问题:

1,这个代码怎么写?(用get方法,不要post)
要求是真是的数据库调取数据,不要自己var一个虚拟数据!
如果需要后端接口,我用的是nodejs.

2,这个里面的url 怎么写?

3,第一个data是什么意思,填什么内容?

4,success里面的data或者result什么什么的,到底是什么来头?

,千万不要网上复制粘贴,真心愿意帮我解决问题的朋友,我会主动交学费.大家彼此收益.感谢!

  • 写回答

4条回答 默认 最新

  • CSDN专家-showbo 2022-01-26 10:56
    关注

    服务器端:node+express(web服务器)+mysql(读数据库模块)+ejs(试图引擎模块)
    客户端:jquery
    示例代码如下

    img

    app.js

    var express = require('express');
    var mysql = require('mysql');
    var bodyParser = require('body-parser');//获取post参数需要
    var app = express();
    app.set('view engine', 'ejs');
    //注意修改mysql链接配置
    var connection = mysql.createConnection({
        host: 'localhost',
        port: '3306',
        user: 'root',
        password: '123456',
        database: 'test'
    });
    connection.connect();
    
    // 创建 application/x-www-form-urlencoded 解析器
    var urlencodedParser = bodyParser.urlencoded({ extended: false })
    
    
    
    //数据接口,需要post请求
    app.post('/data', urlencodedParser, function (request, response) {
        var s = request.body.s;//获取客户端jquery post的s参数,
        console.log(s);
        var sql = 'SELECT * FROM `admin`';//执行的sql语句,如果要执行查询可以使用s变量,自己组合下sql语句
        connection.query(sql, function (err, result) {
            if (err) {
                response.send({ err: err });
            }
            else {
                response.send(result);
            }
        });
    });
    
    
    //首页显示default模板
    app.get('/', function (request, response) {
        response.render('default');
    });
    
    
    app.listen(3000, function () {
        console.log('Server running at 3000 port');
    });
    
    

    views\default.ejs

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jQuery+nodejs+express+mysql读取数据库示例</title>
    </head>
    <body>
        <input type="button" value="点我用jQuery.ajax加载接口数据" onclick="loaData(this)" />
        <div id="dvHtml"></div>
        <script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
        <script>
            function loaData(el) {
                $(el).prop('disabled', 1);
                $.ajax({
                    type: 'POST',//请求方法,express用的app.post,所以只能post请求
                    url: '/data',//请求的网址
                    data: { s: '测试关键字' },//要发送的数据,比如要查询什么的,可以配置这里发送查询关键字
                    datType: 'json',//返回数据转json对象,success中回调参数直接是json对象
                    //成功返回数据回调
                    success: function (r) {
                        if (r.err) {//查询数据库失败
                            alert(JSON.stringify(r))
                        }
                        else {
                            //r为数据库记录集合,遍历添加到dom中即可,题主注意字段和读取的表中字段名称一样
                            alert(JSON.stringify(r))
                            var s = '';
                            r.forEach(i => {
                                s += `<tr><td>${i.id}</td><td>${i.un}</td><td>${i.clicks}</td></tr>`;
                            });
                            $('#dvHtml').html(`<table border=1>${s}</table>`)
                        }
                    },
                    //服务器端错误或者返回错误信息(非标准json字符串)回调
                    error: function (err) { },
                    //请求完毕回调
                    complete: function () {
                        $(el).prop('disabled', 0);
                    }
                })
            }
        </script>
    </body>
    </html>
    

    img


    有其他问题可以继续交流~

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 2月4日
  • 已采纳回答 1月27日
  • 创建了问题 1月25日

悬赏问题

  • ¥20 基于MSP430f5529的MPU6050驱动,求出欧拉角
  • ¥20 Java-Oj-桌布的计算
  • ¥15 powerbuilder中的datawindow数据整合到新的DataWindow
  • ¥20 有人知道这种图怎么画吗?
  • ¥15 pyqt6如何引用qrc文件加载里面的的资源
  • ¥15 安卓JNI项目使用lua上的问题
  • ¥20 RL+GNN解决人员排班问题时梯度消失
  • ¥60 要数控稳压电源测试数据
  • ¥15 能帮我写下这个编程吗
  • ¥15 ikuai客户端l2tp协议链接报终止15信号和无法将p.p.p6转换为我的l2tp线路