Question

我正在使用laravel，使用ajax加载表格问题是当我发送GET到/删除时，请求是空的

   http://localhost:3000/remove?

如果我不调用renderTable（）并且只是包含表视图请求，则执行ok

http://localhost:3000/remove?iddel=98

所以问题是为什么加载ajax的表单不会发送正确的请求

表格加载的js

function renderTable() {
  var $request = $.get('/table'); // make request
  var $container = $('.table-row');

  $container.addClass('loading'); // add loading class (optional)

  $request.done(function(data) { // success
    $container.html(data.html);
  });
  $request.always(function() {
    $container.removeClass('loading');
  });
}
renderTable();

路由

 Route::get('table', 'HomeController@table');
 Route::get('remove', "RemoveEntryController@store");

RemoveEntryController

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;

class RemoveEntryController extends Controller
{
 public function store(Request $request){
    $r_id = $request->input('iddel');
    DB::table('users')->where('id', '=', $r_id)->delete();
 }
}

表格视图

<span class="overlay"><span class="loader-img"></span></span>
<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col" width="5%">#</th>
      <th scope="col" width="25%">First</th>
      <th scope="col" width="25%">Last</th>
      <th scope="col" width="25%">Handle</th>
      <th scope="col" width="20%">Action</th>
    </tr>
  </thead>
  <tbody>
    @foreach ($users as $user)
    <form action="/remove" method="GET" id="rem_form_{{ $loop->index }}">
        <input type="hidden" value="{{ $user->id }}" name="iddel">
        <tr>
            <th scope="row">{{ $user->id }}</th>
            <td>{{ $user->name }}</td>
            <td>{{ $user->last_name }}</td>
            <td>{{ $user->login }}</td>
            <td>
                <div class="container">
                    <div class="row">
                        <button type="button" class="btn btn-info col-6">Edit</button>
                        <button type="submit" class="btn btn-danger col-4 offset-2" form="rem_form_{{ $loop->index }}">X</button>
                    </div>
                </div>
            </td>
        </tr>
    </form>
    @endforeach

  </tbody>
</table>

主页

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <link rel="stylesheet" href="css/app.css">
        <title>Laravel</title>

        <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css"> 
    </head>
    <body>
        <section class="main-container">
            <div class="container logo-container">
                <div class="row">
                    <div class="logo"></div>
                </div>
            </div>
        <div class="container form-container">
            <div class="row form-row">
                <form action="/add" method="POST" id="add_form" class="add-input">
                    <div class="container">
                        <div class="row">
                    <div class="col-4">
                        <input type="text" class="form-control" placeholder="First name" name="name">
                    </div>
                    <div class="col-3">
                        <input type="text" class="form-control" placeholder="Last name" name="last_name">
                    </div>
                    <div class="col-3">
                        <input type="text" class="form-control" placeholder="login" name="login">
                    </div>
                    <button type="submit" form="add_form" class="btn btn-success col-2">ADD</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="container">
            <div class="row table-row loadingg">
               @include('table')
            </div>
        </div>
        </section>
        <script src="js/app.js"></script>
    </body>
</html>

Answer 1

可能是非常糟糕的答案，但这是我能让它发挥作用的唯一方法我在表格下方的主页底部放置了一个隐藏的表格

<div class="container">
        <div class="row table-row loadingg">
           @include('table')
        </div>
        <form action="/remove" id="hidden" name="real_rem">
            <input type="hidden" value="" name="iddel" id="real_input">
        </form>
    </div>

将加载表中的按钮类型从提交更改为按钮
并使点击监听器看起来像这样

  jQuery(document).on('click', ".btn-danger",function(e){
     //e.preventDefault();
    //e.stopImmediatePropagation();
    var fakeForm = jQuery('#'+jQuery(this).attr('form'))
    var realForm = jQuery('#hidden');
    var realInput = jQuery('#real_input');
    var fakeInput = jQuery('#fake_input');
    realInput.attr('value',fakeInput.attr('value'));
    console.log(realInput.attr('value'));

   jQuery.ajax({
        type     : "GET",
        cache    : false,
        url      : fakeForm.attr('action'),
        data     : realForm.serialize(),
        success  : function(data) {
            jQuery('html').trigger( "form:removed" );
        }
    });
});

所以基本上我从ajax加载的输入中获取值并将其插入到通常加载的输入并提交它 我很确定有更好的方法可以做到这一点，如果你在这里分享，我将非常感激

Ajax加载表单发送空get请求

1 个答案: