javascript - AJAX : What to do when the POST succeeds?

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，以便当页面重新加载或被其他用户访问时，“待处理”与“已完成”的新配置是最新的。正如一位 friend 解释的那样，我不能只从客户端将更新的文件写入服务器，所以我意识到 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 或数据库的情况下处理 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 请求一样。您将发送带有元数据的 header ，并且您将从服务器收到答案。如果您希望服务器在每次收到特定请求时都执行某些操作(例如写入文件或数据库)，则您需要自己编写代码。

更新

您编辑了您的问题，现在我知道您正在使用 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