AJAX:POST成功后该怎么办

Question

过去几天我在AJAX上做了很多搜索。我明白了为什么我推迟学习JavaScript的特定领域，这似乎有点复杂。

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

我想使用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的javascript服务器https://nodejs.org，但这可能会取代您当前的PHP服务器。您可以使用不同语言的多个服务器，但这会使您的项目更难维护。

现在关于AJAX请求，它和其他任何http请求一样。您将发送一个包含元数据的标头，然后您将从服务器收到答案。如果您希望服务器在每次收到特定请求时都执行某些操作(如写入文件或数据库)，则需要自己编写代码。

---

更新

你编辑了你的问题，现在我知道你在使用nodejs。以下是一些可能有助于的额外信息

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

使用node.js 的基本Ajax发送/接收

2-更改此行：

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

到此：

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

3-这个问题将向你展示如何在节点中处理POST。你如何在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',
});
});
});