如何将选定的制表符行数据发布到另一个页面？

Question

我试图从制表器获取选定的行数据，然后将其作为数组发布到单独的页面。 我已经找到了如何将数据打印到控制台，但是如何将此数据添加到数组中，然后将其 POST 到单独的页面？

这就是我现在拥有的

document.getElementById("get-selected").addEventListener("click", function(){
    var selectedData = table.getSelectedData();
    jQuery.map(selectedData, function(value, index) {
        console.log(value.FirstName);
        console.log(value.LastName);
        console.log(value.Age);
    });
});

我已经在谷歌上搜索了几个小时，但我找不到任何我想要做的事情的例子，任何帮助将不胜感激。

Answer 1

如何：将数组发布到单独的页面

您只需执行两个步骤：

1. 为想要的数据创建一个数组
2. 现在使用

   fetch

   或

   ajax

将此数组发布到单独的页面

1。为所选数据创建数组
目前，您正在将各个值

FirstName

、

LastName

和

Age

记录到控制台，但是使用对象数组会更有效。

代码：

document.getElementById("get-selected").addEventListener("click", function() {
    var selectedData = table.getSelectedData();

    // Here the selected data gets mapped into a new format
    var postData = jQuery.map(selectedData, function(value) {
        return {
            FirstName: value.FirstName,
            LastName: value.LastName,
            Age: value.Age
        };
    });
    // To verify that the array looks as expected
    console.log(postData); 
});

2。将数组 POST 到另一页
当您的

postData

数组准备就绪后，您可以将其 POST 到另一个页面。现在，在这种情况下，我将向您展示如何使用

fetch

进行操作，但是也有人更喜欢

jQuery.ajax

；现在此代码示例使用

fetch

。请注意，这是完整的代码并且应该可以工作。

完整代码：

document.getElementById("get-selected").addEventListener("click", function() {
    var selectedData = table.getSelectedData();
    // Creates the Array with your wanted values
    var postData = jQuery.map(selectedData, function(value) {
        return {
            FirstName: value.FirstName,
            LastName: value.LastName,
            Age: value.Age
        };
    });

    // POST the postData Array to your desired endpoint
    fetch('/path-to-your-wanted-endpoint', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(postData)
        })
        .then(response => response.json())
        .then(data => {
            // Handles the response from the server and prints it
            console.log(data);
        })
        .catch((error) => {
            console.error('Error:', error);
        });
});

AJAX 的替代方案

如上所述，您也可以使用

jQuery

和

AJAX

来完成。 为此，您需要

jQuery

。它不适用于普通的

Javascript

。

完整代码：

document.getElementById("get-selected").addEventListener("click", function() {
    var selectedData = table.getSelectedData();

    // Creates the Array with the wanted values
    var postData = jQuery.map(selectedData, function(value) {
        return {
            FirstName: value.FirstName,
            LastName: value.LastName,
            Age: value.Age
        };
    });

    // POST the postData Array using jQuery.ajax
    jQuery.ajax({
        url: '/path-to-your-endpoint',
        type: 'POST',
        data: JSON.stringify(postData),
        contentType: 'application/json',
        success: function(response) {
            // Handle the response from the server and prints it
            console.log(response);
        },
        error: function(error) {
            // If the POST request is not successful it will be logged in the console
            console.error('Error:', error);
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如果您有任何疑问，请随时询问。