Question

我正在制作TODO list Web应用程序。

这是下面的“ todo.html”代码：

<html>
<head>
  <title>My TODO List</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="main.css">
  <script>

    $(document).ready(function() {

      $("#submit").click(function() {
        var bla = $('#item').val();
        $("#todo").append("<li class='todoVal'>" + bla + "</li>");
      });

      // $(document).click(function(e) {
      //   if (e.target.className == 'todoVal') {
      //     var t = e.target.innerText
      //     $(e.target).remove();
      //     $("#completed").append("<li class='completedVal'>" + t + "</li>");
      //   }
      // });

      $(document).click(function(e) {
        if (e.target.className == 'completedVal') {
          $(e.target).remove();
        }
      });

      jQuery.fn.single_double_click = function(single_click_callback, double_click_callback, timeout) {
        return this.each(function() {
          var clicks = 0,
            self = this;
          jQuery(this).click(function(event) {
            clicks++;
            if (clicks == 1) {
              setTimeout(function() {
                if (clicks == 1) {
                  single_click_callback.call(self, event);
                } else {
                  double_click_callback.call(self, event);
                }
                clicks = 0;
              }, timeout || 500);
            }
          });
        });
      }
      $(document).single_double_click(function(e) {
        if (e.target.className == 'todoVal') {
          var t = e.target.innerText
          $(e.target).remove();
          $("#completed").append("<li class='completedVal'>" + t + "</li>");
        }
      }, function(e) {
        if (e.target.className == 'todoVal') {
          $(e.target).remove();
        }
      });

      $("#clear").click(function() {
        $("li").remove();
      });

    });
  </script>
</head>

<body>
  <div id="addItem" class="box">
    Task:
    <input id="item" type="text" name="add_item" />
    <button id="submit" type="button">Add</button>
    <button id="clear" type="button">Clear All</button>
  </div>
  <div id="todo" class="box">
    <h4>TODO:</h4>
    <ul></ul>
  </div>
  <div id="completed" class="box">
    <h4>Completed:</h4>
    <ul></ul>
  </div>
</body>

</html>

这是下面的“ app.js”文件：

var express = require('express');
var app = express();
var cors = require('cors');
var bodyParser = require("body-parser");

// middleware
app.use(cors());
app.use(bodyParser.json());

var tasks = [];

// This will serve the HTML page todo.html
app.get('/', function(req, res) {
  res.sendFile('todo.html', {
    root: __dirname
  });
});

// GET all tasks
app.get('/tasks', function(req, res) {
  res.set('Content-Type', 'application/json')
  res.status(200).send(tasks);
});

// POST to add a task
app.post('/task', function(req, res) {
  res.set('Content-Type', 'application/json')

  /* HELP ME HERE */

  // returns 201 on success
  res.status(201);
});

// DELETE a task
app.delete('/task', function(req, res) {

  /* HELP ME HERE */

  // returns 204 on success
  res.status(204);
});

// DELETE all tasks
app.delete('/tasks', function(req, res) {

  /* HELP ME HERE */

  // returns 204 on success
  res.status(204);
});

//

// Listen for HTTP requests on port 3000
app.listen(3000, function() {
  console.log("listening on port 3000");
});

我想通过“ TODO”和“ COMPLETED”将文本框值传递给JSON过滤器。
如果我添加一个新的TODO列表，它将转到JSON，如果值将变为COMPLETED，则还将转到JSON。

这是我想要的示例JSON结果：

{"TODO" : [ "Go to market", "Eat dinner with Daniel"], "COMPLETED" : [ "Wash dishes", "Go to gym and Workout" ]}

这只是一个示例，因此你们可以更改格式。
随时欢迎给我反馈。顺便说一句，我刚刚开始学习如何编码
即使您没有帮助我并度过美好的一天，也感谢您花时间在此上！

Answer 1

您要做的只是简单地https://multimediakingdom.com.bd/robots.txt调用Nodejs API。例如，到'/task'并将输入字段值作为json格式的参数传递，然后只需在req.params.yourjsonKeys中的Nodejs中获取它们即可。

var inputData = $("#items").val();

$.ajax({
  url: "/tasks",
  type: "POST",
  data: {params: inputData},
  dataType: "html",
  success: function(data){
     if(data.code === 200){ // the response key 'code' from Nodejs
        alert('Success');
     }
  }
});

接下来，一旦有了参数，您要做的就是使用Ajax将其写入文件，如下所示：

创建一个具有表数组的javascript对象

var obj = {
   table: []
};

向其中添加一些数据

obj.table.push({id: req.params.id , square: req.params.square});

使用stringify将其从对象转换为字符串

var json = JSON.stringify(obj);
//use fs to write the file to disk

var fs = require('fs');
fs.writeFile('myjsonfile.json', json, 'utf8', callback);

如果要附加它，则读取json文件并将其转换回对象

fs.readFile('myjsonfile.json', 'utf8', function readFileCallback(err, data){
    if (err){
        console.log(err);
    } else {
    obj = JSON.parse(data); //now it an object
    obj.table.push({id: 2, square:3}); //add some data
    json = JSON.stringify(obj); //convert it back to json
    fs.writeFile('myjsonfile.json', json, 'utf8', callback); // write it back 
}});

完整代码：

// POST to add a task
app.post('/task', function(req, res) {
  res.set('Content-Type', 'application/json')
    var obj = {
       table: []
    };

    obj.table.push({id: req.params.id , square: req.params.square});
    
    var json = JSON.stringify(obj);

    var fs = require('fs');

    fs.writeFile('myjsonfile.json', json, 'utf8', callback)

    fs.readFile('myjsonfile.json', 'utf8', function readFileCallback(err, data){
        if (err){
            console.log(err);
        } else {

        obj = JSON.parse(data); //now it an object
        obj.table.push({id: 2, square:3}); //add some data
        json = JSON.stringify(obj); //convert it back to json
        fs.writeFile('myjsonfile.json', json, 'utf8', callback); // write it back 

        // returns 201 on success
        res.json({
           code: 201,
           message: 'Success'
        });

    }});

});

如何将输入值放入node.js文件中的JSON

1 个答案: