如何使用Ajax检索数据而无需发布页面? Laravel 5 [英] How to retrieve data using ajax and without going to post page? Laravel 5
问题描述
我是刚开始使用ajax.例如,在填充字段title
之后,我想在数据库中搜索特定数据并根据该输入返回更多字段.到目前为止,我只能通过按获取数据/发布数据或提交按钮来接收/ajax/post页面中的title
数据.在填充title
时/之后,如何从Route::post
接收我的title
输入和数据?如果删除Form::model
和Form::close()
,我确实会从Route::post
获取虚拟数据,而无需单击Post data
按钮刷新页面,但是没有标题值.
I'm new to using ajax. For example after field title
is filled, I want to search in database for specific data and return more fields based on that input. So far I can only receive my title
data in /ajax/post page by pressing get data/post data or submit button. How do I receive my title
input and data from Route::post
while/after filling title
? If I remove Form::model
and Form::close()
I do get my dummy data from Route::post
without page refresh by clicking Post data
button, but without title value.
我知道检查title
字段涉及一些jQuery/js,但是我不知道如何将title
字段真正放入我的route
中以进行一些数据库搜索并返回一些数据.
I'm aware that checking title
field involves some jQuery/js, but I have no idea how to actually bring that title
field into my route
to do some database searching and return some data with it.
查看:
{!! Form::model($project = new \App\Project, ['url' => 'ajax/post', 'method' => 'post']) !!}
<!-- pass through the CSRF (cross-site request forgery) token -->
<meta name="csrf-token" content="<?php echo csrf_token() ?>" />
<!-- some test buttons -->
<button id="get">Get data</button>
<button id="post">Post data</button>
<div class="form-group padding-top-10">
{!! Form::label('title', 'Title') !!}
{!! Form::text('title', null, ['class' => 'form-control', 'placeholder' => 'Title']) !!}
</div>
{!! Form::submit('Submit Button', ['class' => 'btn btn-primary form-control']) !!}
{!! Form::close() !!}
Ajax脚本:
<script>
$.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });
function onGetClick(event)
{
// we're not passing any data with the get route, though you can if you want
$.get('/ajax/get', onSuccess);
}
function onPostClick(event)
{
// we're passing data with the post route, as this is more normal
$.post('/ajax/post', {payload:'hello'}, onSuccess);
}
function onSuccess(data, status, xhr)
{
console.log(data, status, xhr);
// JSON is deserialised into an object
console.log(String(data.value).toUpperCase())
}
$('button#get').on('click', onGetClick);
$('button#post').on('click', onPostClick);
</script>
在途中:
Route::get('/ajax/view', ['as' => 'home', 'uses' => 'AjaxController@view']);
Route::get('/ajax/get', function () {
$data = array('value' => 'some get');
return Response::json($data);
});
Route::post('/ajax/post', function () {
$data = array('value' => 'some data', 'input' => Request::input());
return Response::json($data);
});
推荐答案
您需要实现jquery keypress函数.
What you need is to implement the jquery keypress function.
这是您的js:
$("input.title").keypress(function(){
var title = $(this).val();
// now do the ajax request and send in the title value
$.get({
url: 'url you want to send the request to',
data: {"title": title},
success: function(response){
// here you can grab the response which would probably be
// the extra fields you want to generate and display it
}
});
});
在Laravel中,除了返回json以外,您几乎可以将其与典型请求相同:
as far as in Laravel you can pretty much treat it the same as a typical request except you will return json:
Route::get('/url-to-handle-request', function({
// lets say what you need to populate is
//authors from the title and return them
$title = Route::get('title'); // we are getting the value we passed in the ajax request
$authors = Author::where('title' ,'=', $title)->get();
return response()->json([
'authors' => $authors->toArray();
]);
}));
现在,我可能会使用控制器,而不仅要完成路线中的所有操作,而且我认为您会了解基本的想法.
Now I would probably use a controller and not just do everything within the route but I think you'll get the basic idea.
这篇关于如何使用Ajax检索数据而无需发布页面? Laravel 5的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!