AJAX：POST 成功后怎么办？

Question

过去几天我一直在 AJAX 上进行大量搜索。 我明白为什么我推迟学习 JavaScript 的特定领域了，这似乎有点复杂。

我注意到大多数问题和答案都是围绕如何通过 POST 发送数据制定的，但是我找不到任何详细的示例来说明在 POST 完成后对数据做什么。

我想使用JavaScript而不是php来处理数据服务器端，我还没有找到任何有用的Q/A。关于该主题的教程或讨论，不包括 PHP。我想我必须自己问具体问题。

为了帮助形象化我的问题，我将给出激发我的问题的具体示例。

我有一个包含待处理任务列表和已完成任务列表的文件。

此列表中的功能是，当用户单击任务时，它会被插入到与用户相关联的数据库中。

多个用户查看此页面，任何登录的人都可以通过单击列表项“记录”完成的任务。列表项还会打开另一个页面，其中包含有关该项目的更多详细信息，并在将完成和用户数据记录到数据库时级联到一些其他功能。

<h3>To Do!</h3>
<ol class="pending>
<li><a class="pending_task" href="localhost://nextstep.html">Task Three</a></li>
<li><a class="pending_task" href="localhost://nextstep.html">Task Five</a></li>
<li><a class="pending_task" href="localhost://nextstep.html">Task Six</a></li>
</ol>

在同一页面上是“已完成”任务列表，当单击待处理时会填充该列表：

<h3>Completed!</h3>
<ol class="completed">
<li><a class="completed_task" href="localhost://nextstep.html">Task One</a></li>
<li><a class="completed_task" href="localhost://nextstep.html">Task Two</a></li>
<li><a class="completed_task" href="localhost://nextstep.html">Task Four</a></li>
</ol>

管理它的代码：

$(document).ready(function(){
    $('.pending').on('click', function(){
        evt.preventDefault();
        $(this).toggleClass("pending").parent().appendTo("ol.completed");
    });
});

我的目标是在任务完成后更新服务器端的静态 html，以便当页面重新加载或被其他用户访问时，“待处理”与“已完成”的新配置是最新的。正如一位朋友解释的那样，我不能只从客户端将更新的文件写入服务器，所以我意识到 AJAX 是最好的解决方案。将更新的信息发送到服务器，并在单击任务完成时让服务器端的脚本重写源文件。我已经用 PHP 完成了 $_POST[key] 功能，但我对 JavaScript 印象更深刻，所以我想学习如何纯粹用 JavaScript 来完成。

基于我的新理解，我稍微改了一下代码：

$(document).ready(function(){
    $('.pending').on('click', function(){
        evt.preventDefault();
        $(this).toggleClass("pending").parent().appendTo("ol.completed");
        var newData = $("ul.pending") + $("ul.completed");
        console.log(newData);

        var xhr = $.ajax({ //jshint ignore: line 
            method:'POST',
            data: newData,
            url:"update.js",
            success: function(){
                console.log("completed POST");
            },
            dataType: 'html',
        }); //xhr

    });
});

所以我走到这一步，我对如何正确激活接收脚本以便重写文件以及可能重新加载文件以保持更改的持久性感到困惑。

我希望了解在不使用 PHP 或 DATABASE 的情况下处理 POST 数据的细节。我只想用 <ol> 项目的更新更改重写 HTML。

如果这不是合适的论坛，或者有可以帮助启发我的资源，我将不胜感激有关如何找到最佳资源的建议。

谢谢。

更新： 我在服务器端使用 node.js。 HTML 是通过 app.js 呈现的，因此执行服务器端操作的想法与使用 node.js 密切相关

更新 2：

我在 POST/response 动态的过程中有点迷失。 启动 POST 的脚本会得到响应，我很清楚。

所以如果我希望在服务器端操作 POSTEd html，那么响应将来自 node.js，表明文件已被重写，正如 POST 请求的那样？所以响应可以/将是我在服务器端编码的结果。

我的问题仍然存在：如何在服务器端操作 POST 数据？

在 PHP 中是 $_POST[key]。 JavaScript 中的内容是什么？

既然我将 HTML 作为 POST 数据发送，我应该如何处理它？它是散列 {key, value} 还是其他形式？我在谷歌搜索中找不到这些详细信息。我不知道如何表达这个问题以获得我需要的答案。

此外，一旦 POST 调用解决了节点脚本，什么会触发节点脚本在服务器端执行？还是我想太多了？

Answer 1

您似乎误解了服务器/客户端模型。您不能使用 html/javascript 来更改服务器中的内容，因为您必须使用 PHP 服务器。

您可以拥有一个带有 Node.js https://nodejs.org 的 javascript 服务器，但这可能会取代您当前的 PHP 服务器。您可以拥有多个不同语言的服务器，但这会使您的项目更难维护。

现在关于 AJAX 请求，它就像任何其他 http 请求一样。您将发送带有元数据的标头，并且您将从服务器收到答案。如果您希望服务器在每次收到特定请求时执行某些操作（例如写入文件或数据库），您需要自己编写代码。

---

更新

您编辑了您的问题，现在我知道您正在使用 nodejs。这里有一些额外的信息可能会有所帮助

1 - 看看这个问题（这是非常基本的东西，可能会有很大帮助）

Basic Ajax send/receive with node.js

2 - 改变这一行：

 var newData = $("ul.pending") + $("ul.completed");

对此：

 var newData = $("ul.pending").html() + $("ul.completed").html();

3 - 这个问题将向您展示如何在节点 How do you extract POST data in Node.js? 中处理 POST

Answer 2

这是我了解 AJAX 后开发的最终代码：

http.createServer(function(req, res){
    if ((req.method === 'POST') && (req.url === '/result')){
        var body = '';
        res.statusCode = 200;
        res.end("Message Received!");

        req.on('data', function(data){
            body += data;
        });

        req.on('end', function () {
            var suffix = getDateTime();
            var output = "Links" + "_" + suffix + ".html";
            // Copy the original First
            fs.writeFileSync(output, fs.readFileSync("./Links.html"));

            // Overwrite the original file with the updated list configuration
            fs.writeFileSync("./Links.html", body, 'utf-8');
    });
    } else if (req.method === 'GET') { // Reorganized 2017 01 05 @ 2237
        // Serve the static html
        var filename = req.url || "Links.html";
        var ext = path.extname(filename);
        var localPath = __dirname;
        var validExtensions = {
            ".html": "text/html",
            ".css": "text/css",
            ".js": "application/javascript",
            ".txt": "text/plain",
            ".jpg": "image/jpeg",
            ".gif": "image/gif",
            ".png": "image/png",
            ".woff": "application/font-woff",
            ".woff2": "application/font-woff2",
            ".ico": "image/x-icon",
            ""    : "text/html"
        };

        var validMimeType = true;
        var mimeType = validExtensions[ext];

        if (checkMimeType){
            validMimeType = validExtensions[ext] !== undefined;
        }

        if (validMimeType){
            localPath += filename;
            fs.exists(localPath, function(exists){
                if (exists){
                    getFile(localPath, res, mimeType);
                } else {
                    console.log("File not found: " + localPath);
                    res.writeHead(404);
                    res.end();
                }
            });
        } else {
            console.log("Invalid file extension detected: " + ext + "(" + filename + ")");
        }
    }
}).listen(port, serverURL);

function getFile(localPath, res, mimeType){
    fs.readFile(localPath, function(err, contents){
        if (!err) {
            res.setHeader("Content-Length", contents.length);
            if (mimeType !== undefined){
                res.setHeader("Content-Type", mimeType);
            }
            res.statusCode = 200;
            res.end(contents);
        } else {
            res.writeHead(500);
            res.end();
        }
    });
}

其他相关代码：

/* jslint node: true, browser: true */ /* globals $:false */
"use strict";
var ajax_url ="/result";


$(document).ready(function(){
    $('.source_link').on('click', function(){
        //evt.preventDefault();
        $(this).toggleClass("source_link downloaded").parent().appendTo("ol.downloaded");
        var front = "<!doctype html><html>";
        var head1 = "<head><link rel=\"stylesheet\" href=\"link.css\">";
        var head2 = "<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js\"></script>";
        var head3 = "<script src=\"links.js\"></script>";
        var head4 = "<script src=\"nameanchor.js\"></script>";
        var head5 = "</head><body>";
        var bottom = "</body></html>";
        var newData = front + head1 + head2 + head3 + head4 + head5 + "<ol class=\"pending\">" + $('ol.pending').html() + 
            "</ol>" + "<ol class=\"downloaded\">" + $('ol.downloaded').html() + "</ol>" + bottom;

        $.ajax({
            method:'POST',
            data: newData,
            url: ajax_url,
            success: function(result, status, jqxhr){
                console.log("Response: " + jqxhr.responseText);
                console.log("POST status: " + status);
            },
            dataType: 'html',
        });
    });

});