如何使用Javascript从服务器获取特定的JSON数据？

Question

我有一个创建的sqlite服务器，它保存关于用户的JSON数据。数据看起来像这样：

{
0:{
    id: 1,
    name:   "Sam Smith",
  },
1:{
    id: 2,
    name:   "Jane Smith",
  }
}

我也有一个基本的html页面的形式：

<div id="input" class="searchuser">
        <form>
            <legend class="useradd-fonts">Search Existing User</legend>


            <label for="search_byname">Name: <input type="text" id="search_byname"/></label>
            <input type="button" id="get-btn" value="Search" /><br>
        </form>
</div>

我也有使用XMLhttprequest（）从服务器获取此数据的代码，但是，该代码只允许获取整个JSON数据并显示所有用户：

const getBtn = document.getElementById("get-btn");

const getData = function() {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "http://127.0.0.1:3000/users");

    xhr.onload = function() {
        const data = JSON.parse(xhr.response);
        console.log(data);
    };
    xhr.send();

};

getBtn.addEventListener("click", getData);

我的问题是，如何按用户名搜索用户，因此在HTML表单中，编写Sam Smith，单击按钮后，将只返回第一个用户的信息，而不是数据集中的所有用户？我想在不使用任何外部库的情况下使用XMLhttprequests实现这一点，这可以做到吗？

Answer 1

这可以通过两种方式完成，您可以在将数据提供给web页面之前过滤数据（服务器逻辑），或者您可以在JSON数组中的第一个对象到达web页面时使用它，您可能希望在获取第一个数据集之前对数据集进行排序。

如果您在查询中获取所有用户的信息（xhr.open（GET，http://127.0.0.1:3000/users）），并且您试图在前端过滤它，那么您的xhr.onload应该是这样的。

xhr.onload = () => {
        const jsonArray = JSON.parse(xhr.response);
        const user = Object.keys(jsonArray).map(key => jsonArray[key]).filter(e => e.name == document.getElementById("search_byname").value)[0];
        console.log(user );
    };

如果您的JSON数组已经被过滤（如果您按名称查询数据库过滤），那么它应该被过滤

xhr.onload = () => {
        const user = JSON.parse(xhr.response)[0];
        console.log(user);
    };

Answer 2

您需要首先在后端指定搜索服务。例如，您可以检查是否有名为search的GET参数，然后根据给定的参数值筛选用户。

PHP

<?php

$search = @$_GET['search'];
$query = 'SELECT * FROM users';

if (strlen($search) > 0) 
  $query .= " WHERE name LIKE '%$search%'");
}

// Then execute $query and print data as json

?>

Express.js

app.get('/users', (req, res) => {
  let search = req.query.search;
  let query = 'SELECT * FROM users' + (
    search && search.length ? ` WHERE name LIKE '%${search}%'` : '';
  );

  // execute [query] and send response
});

以上代码仅用于示例目的，请勿在生产中使用，否则可能导致SQL注入。

用该代码更改您的js：

const getBtn = document.getElementById("get-btn");
const searchByNameInput = document.getElementById("search_byname");

const getData = function() {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "http://127.0.0.1:3000/users?search=" + encodeURIComponent(searchByNameInput.value));

    xhr.onload = function() {
        const data = JSON.parse(xhr.response);
        console.log(data);
    };
    xhr.send();

};

getBtn.addEventListener("click", getData);

在这段代码中，我们使用查询字符串为服务器提供额外的参数来过滤我们的请求。要指定查询字符串，需要在url后面添加？（问号），并指定由分隔的参数

https://website.tld/link/to/page?param1=value1&param2=value2&...&paramN=valueN

在后端，您可以使用您的语言或框架的功能轻松获取给定的参数，然后使用sqlWHERE子句过滤结果。

下面是用不同语言/框架获取查询字符串参数的其他代码示例。

• Node.js

Answer 3

我已经弄明白了，服务器有一个单独的javascript文件来执行GET请求。因此，与此相反：

    xhr.open("GET", "http://127.0.0.1:3000/users");

我应该这样写：

xhr.open("GET", "http://127.0.0.1:3000/search?type=user&name=" + input);