访问node后端接口示例（入门）

时间：2019-09-16 16:39:12 阅读：74 评论：0 收藏：0 [点我收藏+]

一、基础安装参考我的另一篇随笔

https://www.cnblogs.com/zhuxingqing/p/11526558.html

另在之前的基础上引入了jquery，方便使用ajax

二、前端代码

home.html

<!DOCTYPE html>
<html>
<head>
    <title>node home</title>
</head>
<body>
    <div id="wrap">home</div>
    <button onclick="window.location.href = ‘/city.html‘">go to city</button>
    <script type="text/javascript" src="./static/jquery/jquery.min.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            var wrap = $(‘#wrap‘)

            $.ajax({
                url: ‘/‘,
                type: ‘GET‘,
                success: function (res) {
                    if (res.errno == 0) {
                        res = res.data
                        console.log(res)
                    }
                },
                error: function (msg) {
                    console.log(msg)
                }
            })
        }
    </script>
</body>
</html>

city.html

<!DOCTYPE html>
<html>
<head>
    <title>node city</title>
</head>
<body>
    city
    <div id="wrap"></div>
    <script type="text/javascript" src="./static/jquery/jquery.min.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            var wrap = $(‘#wrap‘)

            $.ajax({
                url: ‘/api/city‘,
                type: ‘GET‘,
                success: function (res) {
                    res = JSON.parse(res.data)[0]
                    console.log(res)
                    wrap.html(res.data)
                },
                error: function (msg) {
                    console.log(msg)
                }
            })
        }
    </script>
</body>
</html>

三、node代码

var express = require(‘express‘)

var app = express()
var port = 8090
var router = express.Router()

router.get(‘/‘, function (req, res, next) {
    req.url = ‘/home.html‘
    next()
})

app.use(router)

var apiRouter = express.Router()
apiRouter.get(‘/city‘, function (req, res) {
    res.json({
        errno: 0,
        data: ‘[{"data":"cityssss"}]‘
    })
})

app.use(‘/api‘, apiRouter)

app.use(express.static(‘./‘))

module.export = app.listen(port, function () {
    console.log(‘Listening at http://localhost:‘ + port + ‘\n‘)
})

四、测试效果

home页面

技术分享图片

点击按钮去city页面

技术分享图片

可以看到已经将cityssss添加到wrap的div中~

访问node后端接口示例（入门）

原文：https://www.cnblogs.com/zhuxingqing/p/11527535.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)