Py学习  »  Jquery

Jquery,ajax,node.js添加、发送和删除对象json

Arnold • 4 年前 • 288 次点击  

在我的应用程序中,我必须在json文件中添加、删除和保存对象。保存必须在node.js中进行。 在应用程序中,我在html站点中添加对象,当我在html中添加对象时,动态地将该对象保存到json文件中。现在我在html和json文件中看到了对象。现在我需要通过delete按钮从json文件和站点html中删除对象。 请帮忙

<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>
Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/53056
 
288 次点击