javascript - JQuery 和 JSON

Question

这是我想学习和做的事情。我有一个包含我的产品和详细信息(尺寸、颜色、描述)的 JSON 文件。在网站中我不能使用PHP和MySQL，我只能使用Javascript和HTML。现在我想要做的是使用 JQuery 我可以读写一个 JSON 文件(JSON 文件将作为我的数据库)。我不确定是否可以仅使用 JQuery 和 JSON 来完成。

1. 首先，如何查询 JSON 文件？ (例如:我会搜索产品的名称和颜色。)

2. 如何将搜索到的JSON数据解析成HTML？

3. 如何向 JSON 文件添加详细信息、产品？

如果您能为我指出一个关于我的问题的很好的教程，那就太好了。

我是 JQuery 和 JSON 的新手。

谢谢!

Answer 1

由于 Javascript 是客户端，您将无法仅使用 Javascript 写入服务器上的 JSON 文件。为此，您需要一些服务器端代码。

读取和解析 JSON 文件不是问题。您将使用 jQuery.getJSON功能。您将提供一个 url 和一个回调参数(不需要数据，因为您正在读取一个文件，所以不需要发送数据)。 url 将是您的 JSON 文件的路径，回调将是一个使用数据的函数。

下面是您的代码的示例。我不知道你的 JSON 到底是什么，但如果你有一个名为“products”的集合，其中包含一组详细信息为“name”和“price”的对象，则此代码将打印出来:

$.getJSON("getProductJSON.htm",
    function(data) {
        $.each(data.products, function(i, item) {
            var name = item.name;
            var price = item.price;
            // now display the name and price on the page here!
        });
    }, 
);

基本上，$.getJSON 中的数据变量使您可以非常轻松地使用 JSON 的全部内容。 $.each 用于循环一组 JSON 对象。