将表单数据写入json文件-javascript

Writing form data to a json file - javascript

本文关键字：json 文件 -javascript 表单 数据      更新时间：2023-09-26

我已经为此挠头一段时间了。我有一个使用Electron的桌面应用程序的计划。因此，我正在使用Node.js和Express.js开发一个应用程序

var express = require("express");
var app = express();
app.use(express.static(__dirname + '/public'));
app.listen(3000, function () {
    console.log('Example app listening on port 3000!');
});

然后我的页面上有一个表格：

<form>
    <input type="text" name="name">
    <input type="text" name="url">
    <button type="submit">Submit</button>
</form>

在script.js文件的提交按钮上设置了一个jQuery事件处理程序：

$(document).ready(function(){
    var text;
    $('form').submit(function( event ) {
        text = $( this ).serializeArray();
        console.log( text );
        event.preventDefault();
    });
});

如何将从表单中获得的文本写入JSON文件（当应用程序关闭并重新打开时，可以再次读取该文件）。

有这样一个问题和答案：在Node.js 中编写文件

我理解这一点，但我如何从提交按钮执行代码？

我的文件结构很简单：

|- app.js
|- package.json
|- node_modules
|- public_
   |- data.json
   |- index.html
   |- jquery.js
   |- script.js
   |- style.css
   |- bootstrap.min.css
   |- bootstrap.min.js

在客户端：

$(document).ready(function(){
    var text;
    $('form').submit(function( event ) {
        text = $( this ).serializeArray();
        // Send data to server
        $.post('/saveFile', {data: text});
        event.preventDefault();
    });
});

因此，您可以使用AJAX请求发送数据。查看更多关于jQuery.post（）的信息

服务器上：

app.post('saveFile', function(req, res) {
    // Write to file, I think received data is in req.body.data 
});

在这里，我们创建了一个名为saveFile的路由，用于接收和响应POST请求。您可以在这里将收到的数据写入您的文件。

所以，你会有这样的东西：

app.post('saveFile', function(req, res) {
    fs.writeFile("save.txt", req.body.data, function(err) {
        if(err) {
            return console.log(err);
        }
        console.log("The file was saved!");
        res.end("This message will be sent back to the client!");
    }); 
});
相关文章：