JS / JSON / JQuery - 如何将数据插入 Json 文件 lil css答案

【问题标题】：JS / JSON / JQuery - How to insert Data into Json file lil cssJS / JSON / JQuery - 如何将数据插入 Json 文件 lil css
【发布时间】：2020-06-12 07:25:21
【问题描述】：

今天我想创建一个页面：将 json 文件中的内容插入 div，但也允许您向该 json 添加新信息。我还想创建一个喜欢按钮，增加计数器和基于喜欢的排序功能。我对php或ajax一无所知。没有它也许可以解决？看这里是我的代码。它显然还没有工作:)

但我希望你明白这一点。我基本上认为我正在朝着正确的方向前进，但只是缺少一些部分:)

为了设计，我确实放了一个 div，其中包含 2 个 div // 1 个用于 img，1 个用于文本。我后来想用 css 设置它的样式，这样每一行会有 2 个电影盒 div，而我想用 css flexbox 包装它，这样当窗口变小时，每行只有 1 个盒子。

就像我制作 .filmbox{ width: 40%;} 所以每行只有 2 个空间，其他东西被包裹起来

LAYOUT OF THE PAGE IMAGE LINK

 // Copy Pastaed this ajax from internet to read json data from external file

    let readJSON = function (file) {
        let json = {}
        $.ajax({
            'async': false,
            'global': false,
            'url': file,
            'dataType': "json",
            'success': function (data) {
                json = data;
            }
        });
        return json;
    };

    let film = readJSON("film.json")
    console.table(film)


// Insert new Data to webpage

    for (let i in film){
            $(".content:eq("+i+")").append(`<div class="filmbox"><div class ="imgfield">
            <img src="${film[i].img}" ></div>"<div class="textfield"> <h1>" + film[i].name + "</h1>
            <br>" + film[i].description + "<br>" + 
            "<button type="button" id="button">LIKE</button>" + "<span id="likeCounter">
            </span></div></div>`); 

    }



    // Function to insert new Data into JSON from a from - Update website on Form click
    let film = []
    function getValues(){

    let filmName = $(#fname).value;
    let description = $(#fdescription).value;
    let img = $(#fimg).value;

    let filmData = [{
    "name" : ${filmname},
    "description" : ${description},
    "img" : $${img} 
    }]

    $(#formclick)on("click", ()=>{
    **// how to insert to json file ?**
    window.location.reload();

    })


    let counter = 0
    // Like Button Function
    $(#button).on("click", () =>{

    $(#likeCounter).text(counter++)

    )};

// SORT FUNCTION to first display films with the most likes
function orderDivs(){
counter.sort()
$(#button).find($counter) // Finds the value of likke button+
**Well and now sort all the Divs according to the like value the users did 
input (it dont need to save the like value  somewhere just when i like some films 
on the page by randomly clicking like it then should sort the divs according to that**

}

$(#sortbutton).on("click", ()=>{
orderDivs()
})

【问题讨论】：

标签： javascript html css arrays json

【解决方案1】：

要将数据保存到 JSON 文件，您通常会将数据发布到具有文件系统访问权限的服务器（例如 PHP 或 Node.js）。

如果你想在客户端做这个，你可以查看FileSystem API，或者使用localStorage在浏览器中持久化数据。

关于点赞按钮/计数增量/排序，最好将其作为一个单独的、更具体的问题发布。

【讨论】：