Question

我是javascript新手，我对javascript和ajax有问题。我想产生这样的效果，即用新索引添加新元素。我将其保存到json文件，然后在站点中显示此文件。现在，我可以通过网站上的“删除”按钮删除具有任何索引的任何元素。

这是我的代码：

function remove() {
    var obj = {
        'index': document.getElementById("index").value
    };
    for(var i = arr.length - 1; i >= 0; i--) {
        if(arr[i]['index']===obj['index']) {
           arr.splice(i, 1);
        }
    }
    console.log(arr);
}
function addTo() {
    var obj = {
        'index': document.getElementById("index").value,
        'name': document.getElementById("name").value,
        'surname': document.getElementById("surname").value,
        'years': document.getElementById("years").value
    };
   
    if (!arr.some(e=>e['index']==obj['index'])) 
        arr.push(obj);
    else
        arr[arr.map((e, i) => [i, e]).filter(e => e[1]['index']==obj['index'])[0][0]] = obj
    console.log(arr);
}

var arr=[];
$(document).ready(function() {
    $.ajax({
        url : "data.json",
        type: "",
        data : jsonData,
    });
    e.preventDefault(); 
});

<select id="index" name="index">
    <option hidden="" >Index</option> 
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<input placeholder="Name" type="text" id="name"/>
<input placeholder="Surname" type="text" id="surname"/>
<input placeholder="Years" type="text" id="years"/>
<input type="button" onclick="remove()" value="Delete"/>
<input type="button" onclick="addTo()" value="Add"/>

Answer 1

出于安全原因，无法使用客户端（浏览器）JavaScript写入本地文件。如果url被定向到后端服务，并且type被定向到 POST 或 UPDATE ，则将允许这样做。

您可以尝试localStorage，因为ajax在这里不起作用。

查看如何使用localStorage

function remove() {

  var arr = [];
  var obj = {
    'index': document.getElementById("index").value
  };
  for (var i = arr.length - 1; i >= 0; i--) {
    if (arr[i]['index'] === obj['index']) {
      arr.splice(i, 1);
    }
  }
  localStorage.removeItem("user", JSON.stringify(arr));
  //console.log(arr);
}

function appendLocalStorage(keys, data) {
  var old = localStorage.getItem(name);
  if (old === null) old = "";
  localStorage.setItem(name, old + data);
}

function addTo() {
  var arr = [];
  var obj = {
    'index': document.getElementById("index").value,
    'name': document.getElementById("name").value,
    'surname': document.getElementById("surname").value,
    'years': document.getElementById("years").value
  };

  if (!arr.some(e => e['index'] == obj['index'])) {

    arr.push(obj);
  } else {
    arr[arr.map((e, i) => [i, e]).filter(e => e[1]['index'] == obj['index'])[0][0]] = obj;
  }
  appendLocalStorage("user", JSON.stringify(arr));
  alert(localStorage.getItem("user"));
}

<select id="index" name="index">
  <option hidden="">Index</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<input placeholder="Name" type="text" id="name" />
<input placeholder="Surname" type="text" id="surname" />
<input placeholder="Years" type="text" id="years" />
<input type="button" onclick="remove()" value="Delete" />
<input type="button" onclick="addTo()" value="Add" />

保存，显示和删除json文件

1 个答案: