Question

我有一个应用程序，这是一个本地项目，因此在此应用程序中，我有一个包含数据的表。因此，现在我需要通过jQuery和AJAX下载并显示在html json文件（todo.json）中的表中，接下来可以删除站点中的一个或所有对象，并更新并保存在此json文件（todo.json）中。我必须通过jquery在ajax中执行此操作。我在搜索中有人可以帮我吗？

var todos = new Array();
var todo_index = 0;
window.onload = init;

function init() {
    var submitButton = document.getElementById("submit");
    submitButton.onclick = getFormData;
    getTodoData();
}

function getTodoData() {
    var request = new XMLHttpRequest();
    request.open("GET", "todo.json");
    request.onreadystatechange = function() {
        if (this.readyState == this.DONE && this.status == 200) {
            if (this.responseText) { 
                parseTodoItems(this.responseText);
                addTodosToPage();
            }
            else {
                console.log("error");
            }
        }
    };
    request.send();
}

function parseTodoItems(todoJSON) {
    if (todoJSON == null || todoJSON.trim() == "") {
        return;
    }
    var todoArray = JSON.parse(todoJSON);
    if (todoArray.length == 0) {
        console.log("Error:empty array!");
        return;
    }
    for (var i = 0; i < todoArray.length; i++) {
        var todoItem = todoArray[i];
        todos.push(todoItem);
    }
}


function checkInputText(value, msg) {
    if (value == null || value == "") {
        alert(msg);
        return true;
    }
    return false;
}        
function Todo(index, parts, item, dueDate) {
    this.index = index;
    this.parts = parts;
    this.item = item;
    this.dueDate = dueDate;

}
                    


function addTodosToPage() {
  var table = document.getElementById("todoList");
  var tr = document.createElement("tr");
  var index = document.getElementById('index').value;
  var parts = document.getElementById('parts').value;
  var item = document.getElementById('item').value;
  var dueDate = document.getElementById('dueDate').value;

  tr.innerHTML = "<td>" + index + "</td><td>" + parts + "</td><td>" + item + "</td><td>" + dueDate + "</td>";
  table.appendChild(tr);


  todo_index++;


  tr.id = "todo-" + todo_index;

  var index = document.getElementById('index').value;
  var parts = document.getElementById('parts').value;
  var item = document.getElementById('item').value;
  var dueDate = document.getElementById('dueDate').value;

  tr.innerHTML = "\
  <td><input name='select-row' type='checkbox' value='" + todo_index + "'></td>\
  <td>" + index + "</td>\
  <td>" + parts + "</td>\
  <td>" + item + "</td>\
  <td>" + dueDate + "</td>\
  <td><button onclick='removeTodo(" + todo_index + ");'>x</button></td>";
  table.appendChild(tr);
}

function checkInputText(value, msg) {
    if (value == null || value == "") {
        alert(msg);
        return true;
    }
    return false;
}        


function removeTodo(index) {

  var row = document.getElementById('todo-' + index);

  if (row) {

    row.parentNode.removeChild(row);
  }


  todo_index--;
}


function toggleSelection(checkbox) {

  var rowsToSelect = document.querySelectorAll('input[name=select-row]');

  for (var i = 0; i < rowsToSelect.length; i++) {

    rowsToSelect[i].checked = checkbox.checked;
  }
}


function removeSelectedTodos() {

  var rowsToRemove = document.querySelectorAll('input[name=select-row]:checked');

  for (var i = 0; i < rowsToRemove.length; i++) {

    removeTodo(rowsToRemove[i].value);
  }
}



function setselection(){
  var project = document.getElementById('todoList').value;
  document.cookie = 'todotabela=' + project;
}


function getselection(){
  var name = 'todotabela=';
  var x = document.cookie.split(';');
  var i = 0, c = 0;
  for(i = 0; i < x.length; i++) {
    c = x[i];
    while (c.charAt(0) === ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(selectedProject) === 0) {
      return c.substring(name.length, c.length);
    }
  } return '';
}

<table class="table table-bordered table-striped">
  <thead>
    <tr>

      <th><input onchange="toggleSelection(this);" type='checkbox'></th>
      <th>Index</th>
      <th>parts</th>
      <th>item</th>
      <th>Data</th>

      <th><button onclick='removeSelectedTodos();'>x</button></th>
    </tr>
  </thead>
  <tbody id="todoList">
  </tbody>
</table>

<form>
  <fieldset>
    <div class="tableContainer">
      <label for="index">
        <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="4">4</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>
      </label>
      <input placeholder="parts" type="number" id="parts" min="0" />
            <input placeholder="item" type="number" id="item" min="0" />
            <input type="date" id="dueDate"/>
     
           <br>
      <input type="button" id="submit" onclick="addTodosToPage()" value="Add"> 
      </div>
  </fieldset>
</form>
  <script src="todo3.js"></script>
  <script src="data.js"></script>

Answer 1

此示例太大了，无法回答，我将向您展示如何使用XMLHttpRequest对象接收数据。

如果您正在编写应用程序，则应构建可重复使用的组件，因此请更改您的getTodoData()

function request(method, url, data=null) {
  return new Promise((resolve, reject)=> {
    const xhr = new XMLHttpRequest;
    xhr.timeout = 2000;
    xhr.responseType = 'json'
    xhr.onreadystatechange = (e) => {
        if(xhr.readyState === 4){
            xhr.status === 200 ? resolve(xhr.response) : reject(xhr.status)
        }
    }
    xhr.ontimeout = () => reject('timeout');
    xhr.open(method, url, true);

    if(method.toString().toLowerCase() === 'get') {
        xhr.send(data)
    } else {
        xhr.setRequestHeader('Accept','application/json');
        xhr.setRequestHeader('Content-type', 'application/json');
        xhr.send(data)
    }
  })
}

request是可重用的组件，您可以对您的api进行GET, POST, PUT or DELETE调用。下一步，我们应该对函数进行编码以获取数据，由于这个原因，我使用了ES7 async / await中引入的原因，但是您可以使用常见的promise甚至回调。

async function getTasks(){
    const task = await request('GET', 'todo.json') //in task constnt you should have your data
}

还有诺言的例子：

function getTasks(){
    request('GET', 'todo.json').then(data => {
       console.log(data)
    }
}

检查文件路径（todo.json）是否正确

在网站上下载json / show并通过ajax和jquery删除

1 个答案: