javascript - 如何使用 Post 发送数据库将动态添加的表行表单值传递给 Javascript

Question

我正在使用 Laravel。

我有动态行，每行都有自己的表单和单独的值。

当我将按钮提交给 Javascript 时，我尝试传递每行表单的值。 要检索服务器中的数据。我不想刷新页面，因为我使用的是 Modal。

这是我的代码

<table id="selectedWagesTable" class="display" cellspacing="0" width="100%">
<thead>
    <tr>
        <th>Worker</th>
        <th>Balance</th>
        <th>Confirm</th>
    </tr>
</thead>
<tbody>
@foreach($items as $item)

   <tr>
        <td class="standartTable2">
            <?php echo $item['worker_id'] ?>
        </td> 

        <td class="standartTable2">
            £ <?php echo $item['balance'] ?>
        </td>

        <td class="standartTable2">

{{ Form::open(['id'=>item['workerId'],'name' => item['workerId']]) }}
                {{ Form::hidden('workerId', $item['workerId'],['id' => $item['workerId'])}}
                {{ Form::hidden('balance', $item['balance'],['id' => $item['balance']])}}
                {{ Form::submit('Click To Confirm', 
                                    array(
                                        'class'=>'btn btn-sm btn-success',
                                        'id'=>'submitButton',
                                        'oncontextmenu'=>'return false',
                                        )) }}
{{ Form::close() }}

        </td>
    </tr>
    @endforeach


</tbody>

脚本

<script type="text/javascript">
$(document).ready(function(){

    $("#submitButton").click(function(e){
        e.preventDefault();
        $.get('hpoAccounts',function(data){
            console.log(data);
        });
    });

    $("#submitButton").click(function(e) {
        e.preventDefault();

        var workerId = $('#workerId').val();
        var balance = $('#balance').val();

        $.post('hpoAccounts',{
            workerId:workerId,
            balance:balance
        },

            function(response,status){
            console.log(response);
        });
    });
});

Answer 1

您想要实现的目标可以使用 jQuery 库来完成

由于您有多个表单，因此需要为所有表单添加一个提交监听器 ( $("form").submit )。

为了防止刷新，我们需要使用 ajax ( $.ajax ) 发送数据并防止默认的 SUBMIT 行为 ( e.preventDefault() )。

另请注意，我们在所有 HTML 文档准备就绪后将监听器添加到表单中 ( $(document).ready )。

在您提供 POST URL 后，下面的代码应该可以工作。

$(document).ready(function() {

    $("form").submit(function(e){

        var formData = $(this).serializeArray();

        $.ajax({

            url : 'your post resource', // put here the URL resoruce where you want POST the data 
            type: "POST",
            data : formData,
            success:function(data, textStatus, jqXHR) 
            {
                alert('Do something after data sent!');
            },
            error: function(jqXHR, textStatus, errorThrown) 
            {
                alert('There was an error!');
            }
        });

        e.preventDefault(); //prevent default action which will prevent also the REFRESH
    });
});