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

最新推荐文章于 2024-05-12 15:20:45 发布

weixin_30480075

最新推荐文章于 2024-05-12 15:20:45 发布

阅读量259

点赞数

CC 4.0 BY-SA版权

文章标签：后端 javascript json ViewUI

原文链接：http://www.cnblogs.com/zhuxingqing/p/11527535.html

本文详细介绍如何在Node.js环境中引入jQuery，实现前端Ajax请求，包括基础安装、前端与后端代码示例，以及测试效果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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')
})