Ajax加载的表单发送空的获取请求

Question

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

   http://localhost:3000/remove?

如果我不要求renderTable（）而只包含表视图请求，则执行正常

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加载的表单发送空的获取请求

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-02-10 21:07:02

Ajax加载的表单发送空的获取请求

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-02-10 21:07:02

解决方案1
0 已采纳 2018-02-10 21:07:02