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来电只是将数据发送到提供的网址：

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

如果你在控制台内查看＆gt;在网络选项卡中，您应该看到对/ home / print_results的调用。该调用应该包含您的数据，这意味着ajax帖子正在执行您要求它执行的操作（我只传递r，因为它应该包含表单中的所有数据）。

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

我假设你只想在新页面上显示这些值，而不是保存它们，所以你真的不需要为此进行ajax调用。使用注入的html打开一个新窗口应该可以解决（在javascript中查看open函数）。

如果您需要从您正在呼叫的页面中收集某种结果或消息，则需要在呼叫中添加“完成”参数：

$.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框架，保存调用将是什么。从那里你只需要将数据从数据库中取回到要显示此信息的页面调用中。

ajax帖子没有在mvc中工作到新页面

1 个答案: