javascript - ajax post 无法在 mvc 中的新页面上工作

Question

我想使用 ajax 请求将可排序列表的结果发布到另一个页面。我该怎么做呢。现在，当我将其设置为 document.getElementbyId 时，它正在同一页面上工作，但我不熟悉 ajax post 请求的工作方式。我是否需要在其他页面上保留某些内容来保留已发布的信息？

    $("#sortable").sortable({
        update: function (event, ui) {
            var order = $(this).sortable('serialize');


        }
    }).disableSelection();
    $('button').on('click', function () {
        var r = $("#sortable").sortable("toArray");
        var a = $("#sortable").sortable("serialize", {
            attribute: "id"
        })

        $.ajax({
            data: (r,a),
            type: 'POST',
            url: '/home/print_results'
        });

        ;

            console.log(r, a);

            $('#selectfeatures').html('<p>' + r, a + '</p>') = sessionStorage.rank;



    });

这是 html

  <ul id="sortable" style="margin-top: 20px;margin-left:190px;">

        <li id="fit" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>FIT</li>

        <li id="durability" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>DURABILITY</li>

        <li id="framematerial" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>FRAME MATERIAL</li>

        <li id="lenstype" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>LENS TYPE</li>

        <li id="lightweight" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>LIGHT WEIGHT</li>

        <li id="style" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>STYLE</li>

        <li id="lensthinness" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>LENS THINNESS</li>

        <li id="lenscolor" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>LENS COLOR</li>

    </ul>

Answer 1

根据您想要执行的操作，您需要向 ajax 添加更多行称呼。您当前的ajax调用只是将数据发送到提供的 url:

$.ajax({
    data: (r,a),
    type: 'POST',
    url: '/home/print_results'
});

如果您查看控制台 > 网络选项卡，您应该会看到对/home/print_results 的调用。该调用应该包含您的数据，即 ajax post 正在执行您要求它执行的操作(我只会传递 r，因为它应该包含您表单中的所有数据)。

下一步是以“处理数据”的形式传递到 home/print_results。该页面中的代码会将其添加到您的数据库中，或者可能进行一些计算并将结果返回到同一函数，以便您可以在同一页面上处理它。

我假设您只想在新页面上显示这些值，而不是保存它们，因此您实际上不需要执行 ajax呼吁这一点。使用注入(inject)的 html 打开一个新窗口应该可以解决(查看 javascript 中的 open 函数)。

如果您需要从您正在调用的页面收集某种结果或消息，则需要在调用中添加“done”参数:

$.ajax({
    data: r,
    type: 'POST',
    url: '/home/print_results',
    done: function(result){
    // enter code here
    }
});

您可以在此处从刚刚发布的帖子中获取结果信息。

请记住，POST 本质上是传递数据。如何处理所述数据取决于获取帖子的代码。

至于保存信息，这取决于您的应用程序配置。您需要将所需的表单数据传递到应用程序可以处理它的位置。在下面的 NodeJS 示例中，您可以看到请求对象有一个 body 参数，您可以在其中处理数据。

app.post('/save', function(req, res) {
  console.log(req.body.data);
  var data = new Data({name: 'Name', age: 25});
  data.save();
});

在上面的示例中，我们使用 mongodb 模型。同样，保存调用的内容取决于您的 MVC 框架。从那里，您只需将数据从数据库抓取回您想要显示此信息的页面调用即可。