Question

我已经收到ajax中的数据，然后使用该jquery将数据添加到刀片模板中。

 <table class="table table-hover">
                        <thead>
                        </thead>
                        <tbody id="transRecords">

                        </tbody>
                    </table>


  $.ajax({
            url: '{{route('translation.recodes')}}',
            type: 'post',
            data: {
                _token: "{{ csrf_token() }}"
            },
            success: function (data) {
                data.forEach((rec) => {
                    document.querySelector('#transRecords').innerHTML +=
                        `
            <tr">
                <td id="recodeValue-${rec.id}" style="display:none">${rec.id}</td>
                <td>${rec.korean}</td>
                <td>${rec.japanese}</td>
                <td><button id="recodeRemoveBtn-${rec.id}" type="button" class="btn btn-danger float-right">삭제</button></td>
            </tr>

            `
                })

            },
            error: function () {
                alert("error!!!!");
            }
        });

在这里，我单击此按钮，然后要删除选择的元素。

 <td><button id="recodeRemoveBtn-${rec.id}" type="button" class="btn btn-danger float-right">삭제</button></td>

id="recodeRemoveBtn-${rec.id}单击按钮以将${rec.id}的值发送到控制器。

这是我的路由器。

Route::post('translation/delete', 'Home\TranslationController@recodeDelete')->name('translation.recode.delete')->middleware('auth');

Answer 1

您好，请在按钮中使用onclick功能。


<td><button id="recodeRemoveBtn-${rec.id}" onclick="sendData(rec.id)" type="button" class="btn btn-danger float-right">삭제</button></td>
<script>
function sendData(id) {
    // you got current id
    // and run ajax
}
</script>

希望有帮助

Answer 2

$(function() { 
   $.ajax({
        url: '{{route('translation.recodes')}}',
        type: 'post',
        data: {
            _token: "{{ csrf_token() }}"
        },
        success: function (data) {
            $.each(data,function(index, el) {
                var row = `<tr>
                    <td>`+el.korean+`</td>
                    <td>`+el.japanese+`</td>
                    <td><button onclick="removeTd(this,"`+el.id+`")" type="button" class="btn btn-danger float-right">삭제</button></td>
                </tr>`;
                $('#transRecords').append(row);
            });
        },
        error: function () {
            alert("error!!!!");
        }
    });
 });
    function removeTd(ele,id){
        var cnf = confirm('Are you sure to delete this entry..?');
        if(cnf){
            $.ajax({
                url: "{!! route('translation.recode.delete') !!}",
                type: "POST",
                data: {id:id},
                success: function(response){
                    if(response=="true")
                        alert('Delete Successfully');
                }
            });
            var m_id = $(ele).closest('tr').children().first().find('input:hidden').val();
            $(ele).closest('tr').remove();
        }
    }

Answer 3

您可以通过两种方式执行此操作；首先使用模式，其次使用javascript警报。第一个选项-使用模式示例

<!-- modal to get record id store it in hidden field-->
<div id="getID" class="modal fade" >
        <div class="modal-dialog box box-default" role="document" style="color:black;font-size:12.5px;">
          <div class="modal-content">
            <div class="modal-header">
              <p class="modal-title">Delete record?</p>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <form class="form-horizontal" action="{{ url('/delete/') }}" method="post"  role="form">
                    {{ csrf_field() }}
            <div class="modal-body">  

                <div class="form-group" style="margin: 0 10px;">
                    Do you want to delete?
                <input type="hidden" class="form-control" id="recordid" name="record" value="">

                </div>
            </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary btn-xs">Yes</button>
                    <button type="button" class="btn btn-danger btn-xs" data-dismiss="modal">No</button>
                </div>

                </form>
            </div>

          </div>
        </div>

<!-- your button click code-->
<button onclick="deletefunc('{{ $rec->id}}')" type="button" class="btn btn-danger float-right"></button></td>


<!-- javascript to get recordid when click on button-->
<script type="text/javascript">

function deletefunc(r)
    {
        document.getElementById('recordid').value = r;

        $("#getID").modal('show')
    }

</script>

//controller to delete record store in database
public function deleteRecord(Request $request){

                  $this->validate($request, [

                  'record' => 'required|string',

                ]);

                $recordid=$request->input('record');

                $delete=DB::table('your-table')->where('id',$recordid)->delete();

                return redirect('url')->with('message','Record deleted!');


   }



//route

    Route::post('/delete','your-controller@deleteRecord');

Answer 4

您仍然可以通过javascript警报来做到这一点

<!-- your button click code-->
<button onclick="deletefunc('{{ $rec->id}}')" type="button" class="btn btn-danger float-right"></button></td>


<!-- javascript to get recordid when click on button-->
<script type="text/javascript">

function deletefunc(r)
    {
        document.href="https://www.example.com/delete"+r;
    }

</script>


//controller to delete record store in database
public function deleteRecord(){
                $recordid=$request->input('record');

                $delete=DB::table('your-table')->where('id',$recordid)->delete();

                return redirect('url')->with('message','Record deleted!');
   }

//route this time uses get with id parameter
Route::get('/delete/{id}','your-controller@deleteRecord');

如何将ajax请求的数据发送回控制器？

4 个答案: