Question

我想使用Ajax发布一些数据，我也希望使用Ajax删除一些数据。但问题是输入数据时，数据库中发布的数据。但是我的UI面临一些问题，保存数据后，我的保存按钮总是被点击。但是当我使用Ajax时，它不应该加载或以前的数据应该自动消失。与删除相同，删除数据时删除，但是重定向到另一个页面？

我该如何解决这个问题？

这是我的UserController代码：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Requests;
use Illuminate\Http\Response;
use App\User;
use App\Post;
use Illuminate\Support\Facades\Storage;

class UserController extends Controller {

    public function postSignUp(Request $request) {
        $this->validate($request, [
            'name' => 'required|max:120',
            'email' => 'required|email|unique:users',
            'password' => 'required|min:4'
        ]);

        $user = new User();
        $user->name = $request['name'];
        $user->email = $request['email'];
        $user->password = bcrypt($request['password']);

        $user->save();


        if ($request->ajax()) {
            return response()->json();
        }
    }

    public function delete(Request $request, $id) {

        $user = User::find($id);
        $user->delete($request->all());
    }

}
?>

这是我的帖子数据查看页面：

<!DOCTYPE html>
<html>
    <head>
        <title>Laravel</title>
        <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity = "sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
              crossorigin = "anonymous">
    </head>
    <body>
        <script src = "https://code.jquery.com/jquery-1.12.0.min.js"></script>
        <div class="container">
            <h2>Register Form</h2>
            <div class="row col-lg-5">


                <div class="form-group">
                    <label for="Name">Name</label>
                    <input type="text" class="form-control" id="name" placeholder="Name">
                </div>
                <div class="form-group">
                    <label for="Email">Email</label>
                    <input type="email" class="form-control" id="email" placeholder="Email">
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" class="form-control" id="password" placeholder="Password">
                </div>

                <button type="submit" onclick="send(event)" class="btn btn-default" >Submit</button>

            </div>
        </div>


        <script type="text/javascript">
            function send(event) {
                event.preventDefault();
                $.ajax({
                    type: "POST",
                    url: "{{route('signup')}}",
                    data: {name: $("#name").val(),
                        email: $("#email").val(),
                        password: $("#password").val(),
                        _token: '{!! csrf_token() !!}'
                    }
                });
            }
        </script>
    </body>
</html>

这是我的删除数据视图页面：

<html>
    <head> 
        <title> User Details </title>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> 
    </head>
    <body>
        <div class="container">
            <h3> User Details </h3>
            <table  class="table table-striped table-bordered"  id="example">
                <thead>
                    <tr>
                        <td>Serial No</td>
                        <td>User Name</td>
                        <td>User Email</td>
                        <td>Action</td>
                    </tr>
                </thead>
                <tbody>
                    <?php $i = 1; ?>
                    @foreach($user as $row)

                    <tr>
                        <td>{{$i}}</td>
                        <td>{{$row->name }}</td>
                        <td>{{$row->email}}</td>

                        <td>

                            <a href="#" class="edit">Edit</a> 

                            <div id="deleteTheProduct">

                                {!! Form::open([
                                'method' => 'POST',
                                'action' => ['UserController@delete',$row->id],
                                'style'=>'display:inline'

                                ]) !!}
                                {!! Form::hidden('id',$row->id)!!}
                                {!! Form::submit('Delete',['class'=>'btn btn-danger deleteUser','id' => 'btnDeleteUser', 'data-id' => $row->id]) !!}
                                {!!Form::close()!!}

                            </div>
                        </td>
                    </tr>
                    <?php $i++; ?>
                    @endforeach
                </tbody>
            </table>        
            <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
            <script type="text/javascript">

                $('.deleteUser').on('click', function (e) {
                    var inputData = $('#formDeleteUser').serialize();
                    var dataId = $(this).attr('data-id');

                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $.ajax({
                        url: '{{ url(' / delete') }}'
                        + '/' + dataId,
                        method: 'POST',
                        data: inputData,
                        success: function (data) {
                            console.log(data);
                        }
                    });
                });
            </script>
    </body>
</html>

Answer 1

但是当我使用Ajax时，它不应该加载或以前的数据应该自动消失

您必须自己控制，ajax就像是对Web服务器的请求而不重新加载页面（或导航）但浏览器不知道在ajax请求之后要执行的操作。当您使用ffmpeg -r 1/5 -f lavfi -i "movie='a%d.png':loop=100" -c:v libx264 -r 30 -pix_fmt yuv420p "${outfile}"时，您可以在jQuery回调中的Ajax请求后更新您的UI。

尝试返回已删除对象的success和ajax成功函数。

id

Answer 2

防止重定向问题只需将.delete按钮设为按钮不提交，我认为这样可以解决您的问题，如果没有请通知我，

要删除行，请对您的脚本代码进行以下更改...首先是您的代码

$('.deleteUser').on('click', function(e) {
      var inputData = $('#formDeleteUser').serialize();   
      var dataId = $(this).attr('data-id');

$.ajaxSetup({
  headers: {
'    X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  }
});
$.ajax({
    url:  '{{ url('/delete') }}' + '/' + dataId,
    method: 'POST',
    data: inputData,
      success : function(data){
                console.log(data);
            }
 }); 
});

在上面的代码中有一些更改

$('.deleteUser').on('click', function(e) {
      var inputData = $('#formDeleteUser').serialize();   
      var dataId = $(this).attr('data-id');

      // added code is
      $object=$(this);


$.ajaxSetup({
  headers: {
'    X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  }
});
$.ajax({
    url:  '{{ url('/delete') }}' + '/' + dataId,
    method: 'POST',
    data: inputData,
      success : function(data){
                console.log(data);
                //if success status is successful and below code removes the parent row from the table
                $($object).parents('tr').remove();
            }
 }); 
});

Laravel 5.2：如何使用Ajax发布和删除数据？

2 个答案: