Question

我是jquery和ajax的新手，我的代码无法正常工作，这就是我需要的。在我的应用程序中，我必须添加，删除对象并将其保存在json文件中。保存必须在node.js中进行。在应用程序中，我在html站点中添加对象，并且当我在html中添加对象时动态地将此对象保存到json文件。现在，我在表格html和json文件中看到对象。现在，我需要通过删除按钮从json文件和站点html中删除对象。我用过mustache.js，但是效果不好，没有显示删除按钮（x）我不能使用php，只能使用node。请帮忙这是我的代码：

<script type="text/javascript">

  $(function (){
    var $orders = $('#orders');
    var $indeks = $('#indeks');
    var $part = $('#part');
    var $mas = $('#mas');
    var $dueDate = $('#dueDate');

    
    var orderTemplate = "" + "<tr>" + "<p>indeks: {{indeks}}</p>" + 
    "part: {{part}}" + 
    "mas: {{mas}}" +
    "data: {{dueDate}}" +
    "button data-id='{{id}}' class='remove'>X</button>" +
    "</tr>";

    function addOrder(order){
     $orders.append(Mustache.render(orderTemplate, order));
    }


  $.ajax({
        url: '/WebService/todo.json',
        type: 'GET',
        success: function(orders) {
          console.log(typeof(orders));
          $.each(orders, function(i, order) {
            $orders.append('<tr><th>Index ' + order.indeks + '</th><th>Part ' + order.part +'</th><th>Mas ' + order.mas + '</th><th>Date ' + order.dueDate +  '</th></tr>');
            console.log(orders)
          });     
        },
        error: function() {
          console.log('error load data');
        }
      });
$('#add-order').on('click', function(){
  var order = {
    indeks: $indeks.val(),
    mas: $mas.val(),
    part: $part.val(),
    dueDate: $dueDate.val(),
  };

  $.ajax({
        type: 'POST',
        url: '/WebService/todo.json',
        data: order,
        success: function (newOrder) {
             $orders.append('<tr><th>Index ' + order.indeks + '</th><th>Part ' + order.part +'</th><th>Mas ' + order.mas + '</th><th>Date ' + order.dueDate +  '</th></tr>');
        },
        error: function () {
          alert('error load data');
        }
      });
  });
$('.remove').on('click', function(){

    $.ajax({
      type: 'DELETE',
      url: '/WebService/todo.json' + $(this).attr('data-id'),
      success: function(){
        $(self);
        $th.fadeOut(300, function(){
          $(this).remove();
        });
      }
});
  });

 });

</script>

<!DOCTYPE html>
<meta charset="UTF=8">  
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script src="/WebService/mustache.js"></script>
  <title></title>
</head>
<body>
<table id="orders">
  
</table>
  <input placeholder="Indeks" type="text" id="indeks"/>
  <input placeholder="part" type="text" id="part"/>
  <input placeholder="mas" type="text" id="mas"/>
  <input placeholder="data" type="date" id="dueDate"/>

  <button type="submit" id="add-order">Add</button>

jQuery，ajax，node.js添加，发送和删除对象json

0 个答案: