javascript – 如何使用ajax在laravel 5中发布表单?

前端之家收集整理的这篇文章主要介绍了javascript – 如何使用ajax在laravel 5中发布表单?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在学习如何在laravel中制作一个ajax帖子时遇到了很多麻烦.我希望能够在验证后使用 jquery显示错误但我不知道如何访问发送到我的控制器的对象;所以我甚至不知道控制器中的“返回”是什么.有人可以带我走过这个吗?

这是我观点的一部分

<Meta name="_token" content="{{ csrf_token() }}" />            
<div class='row'>
        {!! Form::open(['url'=>'register','id'=>'sign-up','class'=>'col-md-6 col-md-push-4 form-horizontal'])!!}

            <div class='form-group'>
                {!! Form::label('first_name','First Name:',['class'=>'col-xs-12 col-md-3']) !!}
                <div class= 'col-xs-12 col-md-6'>
                    {!! Form::text('first_name',null,['class' => 'form-control'])!!}
                </div>
            </div>
            <div class='form-group'>
                {!! Form::label('last_name','Last Name:',['class'=>'col-xs-12 col-md-3']) !!}
                <div class= 'col-xs-12 col-md-6'>
                    {!! Form::text('last_name',['class' => 'form-control'])!!}
                </div>
            </div>
            <div class='form-group'>
                {!! Form::label('email','Email Address:',['class'=>'col-xs-12 col-md-3']) !!}
                <div class= 'col-xs-12 col-md-6 '>
                    {!! Form::text('email',['class' => 'form-control'])!!}
    <div class='form-group'>
            {!! Form::label('password','Password:',['class'=>'col-xs-12 col-md-3']) !!}
                <div class= 'col-xs-12 col-md-6'>
                    {!! Form::password('password',['class' => 'form-control'])!!}
                </div>
            </div>

                    <div class='form-group'>
            {!! Form::label('password_confirmation','Confirm Password:',['class'=>'col-xs-12 col-md-3']) !!}
                <div class= 'col-xs-12 col-md-6'>
                    {!! Form::password('password_confirmation',['class' => 'form-control'])!!}
                </div>
            </div>
                    </div>  <div class='btn btn-small'>
                {!! Form::submit('Join Us!',['class'=>'btn btn-success btn-sm form-control'])!!}
            </div>

        {!! Form::close() !!}
        </div>

.js文件

$(function(){

$('#sign-up').on('submit',function(e){
    $.ajaxSetup({
        header:$('Meta[name="_token"]').attr('content')
    })
    e.preventDefault(e);

        $.ajax({

        type:"POST",url:'/register',data:$(this).serialize(),dataType: 'json',success: function(data){
            console.log(data);
        },error: function(data){

        }
    })
    });
});

控制器:

<?PHP 

namespace App\Http\Controllers;

use App\Http\Requests\CreateRegisterRequest;
use App\Http\Controllers\Controller;
use App\User;
use Illuminate\HttpResponse;
use Input;
class UserController extends Controller
{

    public function create(CreateRegisterRequest $request)
    {

    }

    public function show()
    {
        return view('user.profile');
    }

}

表格要求:

<?PHP

namespace App\Http\Requests;

use App\Http\Requests\Request;

class CreateRegisterRequest extends Request
{
    public function authorize()
    {
        return true;
    }
public function rules()
    {
        return [
            'first_name' =>'required','last_name'=>'required','url'=>'url','description','email'=>'unique:users,email|email','password'=>'min:6|confirmed','password_confirmation'=>'min:6'


        ];
    }
}

解决方法

在不查看任何代码的情况下,我可以告诉您执行此任务的方法.可能还有其他方法,但这一般是我开始使用Laravel后我接近它的方式.

I want to be able to show errors using jquery after validation but I have no idea how to access the object sent to my controller; so I dont even know what to ‘return’ in the controller.

让我们首先将其分解为3个更简单的问题.

1.如何访问发送到控制器的对象?

那么,在您的AJAX中,您可以选择发送GET或POST请求.约定规定您应该使用POST来更新模型,并使用GET从模型中检索.如果您正在使用REST,那么您可以使用其他方法(PUT,PATCH,DELETE等).您可以自己了解有关这些内容的更多信息,但为了这个答案,我将通过GET和POST保持简单.

在您的示例中,您使用POST,所以让我们继续.您已经调用了JQuery序列化方法,因此您只需要这样做.在Laravel控制器中,只需获取方法的Request $request参数,Laravel方法$request-> input()将为您提供请求中发送的所有参数的键/值数组.然后,您可以相应地处理它们.

2.我应该在控制器中返回什么?

通常,您返回AJAX请求的JSON数据.它很容易解析,JavaScript和JQuery都有很好的对象可以为你解析JSON.

在Laravel控制器中,您可以在方法末尾添加以下行以返回一些JSON:

return response()->json($data);

在此示例中,$data是一个包含要返回的JSON的数组.在PHP中,我们可以将JSON字符串表示为键/值对的数组,如下所示:

$data = [
    'success': true,'message': 'Your AJAX processed correctly'
];

通常,如果这是一个普通的旧PHP脚本,我们必须调用PHPjson_encode函数,但是Laravel为我们处理这个,所以我们需要做的就是传递数组.出于调试目的,您可能希望使用JSON_PRETTY_PRINT常量,如果直接访问URL,它将在屏幕上很好地输出JSON:

return response()->json($data,200,[],JSON_PRETTY_PRINT);

3.如何访问从控制器发送的对象?

好了,既然你的响应是一个简单的JSON字符串,你可以使用任何内置的JavaScript方法来解析JSON.我通常使用JSON.parse(json),其中json是控制器返回的JSON字符串.有关详细信息,请参见here.

那么,我该如何获得这些数据?

好吧,看起来你可能已经想到了这一点,但只是为了确保我会澄清.您需要注册到控制器的路由.然后,您可以使用JQuery AJAX对象简单地调用该URI,然后注入的变量数据将是从控制器返回的任何内容,在本例中为JSON字符串.

猜你在找的Ajax相关文章