使用jQuery将数据传递到新页面$ _POST

Question

我有两个表和一个或多或少这样的形式内的输入：

表代码（两个表相同，除了调用的表略有不同）：

<table cellpadding="0" cellspacing="0" class="paperTable searchResultContainer">
    <thead>
        <tr>
            <th>Name</th>
            <th>ID</th>
            <th>Company Reg.</th>
            <th>Postcode</th>
        </tr>
    </thead>

    <tbody>
        <?php while ($row = $items->fetch_assoc()) : ?>
            <tr class="row" data-address1="<?php echo $row['address1']; ?>"
                data-address2="<?php echo $row['address2']; ?>" data-address3="<?php echo $row['address3']; ?>"
                data-county="<?php echo $row['address4']; ?>" data-postcode="<?php echo $row['postcode']; ?>"
            >
                <td><?php echo (strlen($row['name'])           > 0 ? $row['name']           : '-'); ?></td>
                <td><?php echo (strlen($row['id'])             > 0 ? $row['id']             : '-'); ?></td>
                <td><?php echo (strlen($row['company_reg_no']) > 0 ? $row['company_reg_no'] : '-'); ?></td>
                <td><?php echo (strlen($row['postcode'])       > 0 ? $row['postcode']       : '-'); ?></td>
            </tr>
        <?php endwhile; ?>
    </tbody>
</table>

我的输入是一个简单的单行复选框，询问上述内容是否与搜索条件都不匹配。

我要执行的操作是，如果用户单击表行，它将<tr>标记的.data（）属性发布到表单（即另一页）的下一步。

我尝试了隐藏输入的想法，但是由于它处于while循环中，而输入具有相同的名称，因此输入的值将是循环中的最后一个，因为它是最后设置的。 我也尝试过ajax：

$.ajax({
    data:    $(this).data(),
    type:    'post',
    url:     'stepDos.php',
    success: function(data)
             {
                 window.location.replace('/path/to/stepDos.php');
             }
});

当我var_dumped $ _POST无效时，它返回空。

我还尝试了$ .post函数：

$.post('/path/to/stepDos.php', {data: data}, function(ev)
{
    window.location.replace('/path/to/stepDos.php');
});

再次无济于事-我缺少什么？

谢谢

Answer 1

正如我在评论中提到的那样，您不必在其中包含所有数据的情况下制作一个单一表单。相反，您可以在循环中每行使用一种表单。

这将为您带来预期的结果！

Answer 2

您正在做的是在后台将数据发布到页面中（这就是jQuery在这种情况下的目的），然后仅重定向到那里而没有发布数据（这就是window.location.replace（...）确实）。 我建议的只是创建一个表单并提交该表单，这样您的浏览器将复制所有发布字段并继续进行。

Answer 3

您可以通过调用.data（）函数来检索数据属性，请参见以下代码段：

 $(".row").click(function(){ console.log($(this).data()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table cellpadding="0" cellspacing="0" class="paperTable searchResultContainer"> <thead> <tr> <th>Name</th> <th>ID</th> <th>Company Reg.</th> <th>Postcode</th> </tr> </thead> <tbody> <tr class="row" data-address1="addr11" data-address2="addr12" data-address3="addr13"> <td>Nome 1</td> <td>ID 1</td> <td>Company 1</td> <td>26027</td> </tr> <tr class="row" data-address1="addr21" data-address2="addr22" data-address3="addr23"> <td>Nome 2</td> <td>ID 2</td> <td>Company 2</td> <td>26900</td> </tr> <tr class="row" data-address1="addr31" data-address2="addr32" data-address3="addr33"> <td>Nome 3</td> <td>ID 3</td> <td>Company 3</td> <td>20151</td> </tr> </tbody> </table> 

Answer 4

您可以尝试使用属性名称具有数组格式的隐藏输入，如下所示，将row ['id']作为键索引。

<input type="hidden" name="data[<?php echo $row['id'] ?>]['id']" value="<?php echo $row['id'] ?>">
<input type="hidden" name="data[<?php echo $row['id'] ?>]['name']" value="<?php echo $row['name'] ?>">
<input type="hidden" name="data[<?php echo $row['id'] ?>]['company_reg_no']" value="<?php echo $row['company_reg_no'] ?>">
<input type="hidden" name="data[<?php echo $row['id'] ?>]['postcode']" value="<?php echo $row['postcode'] ?>">