帮我写一个$.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什么什么的,到底是什么来头?

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

服务器端: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


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

$.ajax({
    url: "url",// url就是你nodejs数据的请求地址
    type: "GET",
    data: {},  // data对于GET方式就等于url中的参数.你直接地在url中加参数即可,不需要写这个data
    dataType: "text",
    success: function (data) {//这个data是你nodejs返回的数据
        document.getElementById("id").innerHTML = data;
    }
});

你说后端查到的数据,就是 {list:rows}这个数据是指你已经使用ajax请求到的内容吗?

您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632