Question

我正在尝试以HTML发送Ajax请求，以获取JSON文件中的对象。这是我的HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <title>JSON Server Test</title>
        <script type="text/javascript">
            var findData = (id) => {
                $('.submit-button').on('click', (e) => {
                    e.preventDefault();

                    console.log('submit button pressed');

                    var data = {};
                    data.title = "title";
                    data.message = "message";

                    $.ajax({
                        type: 'GET',
                        data: JSON.stringify(data),
                        contentType: 'application/json',
                        url: 'localhost:3000/people?id=' + id,
                        success: (data) => {
                            console.log('success');
                            console.log(JSON.stringify(data));
                        }
                    });
                });
            };
        </script>
    </head>

    <body>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            var findData = (id) => {
                $('.submit-button').on('click', (e) => {
                    e.preventDefault();

                    console.log('submit button pressed');

                    var data = {};
                    data.title = "title";
                    data.message = "message";

                    $.ajax({
                        type: 'GET',
                        data: JSON.stringify(data),
                        contentType: 'application/json',
                        url: 'localhost:3000/people?id=' + id,
                        success: (data) => {
                            console.log('success');
                            console.log(JSON.stringify(data));
                            document.getElementById('final-data').innerHTML 
= JSON.stringify(data);
                        }
                    });
                });
            };
            </script>
        <input id="input" type="number">
        <button class="submit-button" 
        onclick="findData(getElementById('input').value)">Find 
        Person</button>
        <p id="final-data"></p>
    </body>
</html>

这是我的NodeJS代码：

const express = require('express');

var app = express();

app.get('/', (req, res) => {
    res.sendFile(__dirname + "/" + "index.html");
});

app.listen(4000, () => {
    console.log('Listening on port 4000');
});

实际的服务器本身使用cmd上的json服务器在端口3000的本地主机上运行。

json-server --watch db.json

问题是当我实际上按下前端的“提交”按钮时，没有任何响应。没有控制台日志记录，没有对HTML中的段落元素进行任何实际更改，什么也没有。

编辑：我确实设法做到了，它可以工作，但是还有另外一件事：我正在获取一个包含数据的数组，但是我想破坏它，所以我一个人都得到了每个属性。我该怎么办？

带通配符的Ajax GET请求

0 个答案: