我正在学习基于Model,View,Controller范例的Laravel PHP框架.我一直试图将AJAX融入我的简单入门应用程序......一个电话呼叫记录器.这是我通常放弃的地方.但是我拒绝了!
所以我有我的Phonecall模型:
class Phonecall extends Eloquent
{
// Creates an instance of the database object
}
这是我的电话呼叫表:
mysql> desc phonecalls;
+------------+------------------+------+-----+---------+----------------+
| Field | Type | Null | Key | Default | Extra |
+------------+------------------+------+-----+---------+----------------+
| id | int(10) unsigned | NO | PRI | NULL | auto_increment |
| who | varchar(200) | NO | | NULL | |
| what | varchar(200) | NO | | NULL | |
| created_at | datetime | NO | | NULL | |
| updated_at | datetime | NO | | NULL | |
| initiator | varchar(200) | NO | | NULL | |
| info | text | NO | | NULL | |
+------------+------------------+------+-----+---------+----------------+
7 rows in set (0.00 sec)
我的视图列出了当前数据库中的所有呼叫(按谁和什么):
<!doctype html>
<html>
<head>
<title>Title</title>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
</script>
</head>
<body>
<h1>Welcome</h1>
<p>Here's a list of recent phonecalls</p>
<ul class="call-list">
@foreach($phonecalls as $call)
<li>{{ $call->who }} - {{ $call->what }} -
<a href="phonecalls/show/{{ $call->id }}">Show</a> |
{{ HTML::link('phonecalls/delete/'.$call->id, 'Delete') }} |
{{ HTML::link('phonecalls/update/'.$call->id, 'Update') }}
</li>
</ul>
{{-- Placeholder for AJAX content --}}
<div id="call-info">
</div>
</body>
</html>
这是我的简单控制器:
class Phonecalls_Controller extends Base_Controller {
// Use $this within a method the same way you
// would use the object name outside of the class
public function get_index()
{
$phonecalls = Phonecall::all();
return View::make('phonecalls.index')->with('phonecalls', $phonecalls);
}
// ************************************
// DISPLAY CALL INFO
public function get_show($call_id)
{
$call = Phonecall::find($call_id);
// WHAT GOES HERE?
}
我希望用户能够在视图中单击"显示"并在...中显示呼叫信息
<div id="call-info">
</div>
视图中的标签.
这是它做了什么......
我的get_show()方法
// ************************************
// SHOW CALL INFO
public function get_show($call_id)
{
$call = Phonecall::find($call_id);
return $call->info;
}
我的Javascript
//************************************
// Phonecall AJAX Example
//************************************
$(document).ready(function() {
$('.call-list > li > a').click(function(e) { // e=event
e.preventDefault();
var id = $(this).attr('id');
$.get(BASE+'/phonecalls/show/'+id, function(data) {
$("#call-info").html(data);
})
});
这可以通过多种方式来完成。
首先，您可以这样做：
public function get_show($call_id)
{
$call = Phonecall::find($call_id);
return View::make('phonecalls.single')->with('phonecal', $call);
}
在这种情况下，您需要为单个电话创建一个模板，并将其放在“电话”文件夹中。
另一个选择是从Laravel应用返回JSON响应：
public function get_show($call_id)
{
$call = Phonecall::find($call_id)->first();
return Response::eloquent($call);
}
另一个选择是使用javascript MVC框架使获取/更新AJAX数据等操作非常容易，例如Backbone JS或Angular JS可以做到这一点。
无论哪种方式，如果要处理AJAX数据，都需要构建一个API，以将常规站点和AJAX数据后端分开。
这是我的博客文章，其中包含有关如何完成此操作的许多详细信息：http : //maxoffsky.com/code-blog/building-restful-api-in-laravel-start-here/
同样，在Laravel中对AJAX的出色介绍是Dayle Rees的Code Happy，即AJAX内容一章：codehappy.daylerees.com/ajax-content
如果您还有其他问题，请告诉我，如果您觉得我有所帮助，请批准此评论。谢谢！
更新：
要从控制器（或Laravel路由）实际加载内容，您需要使用jQuery ajax，GET（加载数据）或POST（发布表单结果），这是一个示例：
$('#get-info').click(function(e) { // e=event
e.preventDefault();
var BASE = "<?php echo URL::base(); ?>";
// attempt to GET the new content
$.get(BASE+'phonecalls/show/2', function(data) {
$('#content').html(data);
});
我花了一段时间来弄清楚,因为webz中的示例有点令人困惑,因为它引用了更改headers为csrf令牌的帐户等等.这是一个例子,我希望它可以帮助别人.
第一:您认为的形式:
{{ Form::open(['id' => 'testForm']) }}
<p>{{ Form::label('title', 'Title') }}
{{ Form::text('title') }}</p>
<p>{{ Form::label('description', 'Description') }}
{{ Form::text('description') }}</p>
<p>{{ Form::submit('Submit') }}</p>
{{ Form::close() }}
第二:写下你的路线route.php:
Route::post('ad', 'AdController@store');
第三:财务主任:
public function store()
{
if(Request::ajax()){
$ad = new ad;
$ad -> title = Input::get('title');
$ad -> description = Input::get('description');
$ad -> save();
$response = array(
'status' => 'success',
'msg' => 'Option created successfully',
);
return Response::json( $response );
}
}
第四:jquery ajax请求:
$('form#testForm').submit(function(e){
e. preventDefault();
var str1 = $('input[name="title"]').val();
var str2 = $('input[name="description"]').val();
var str3 = $('input[name="_token"]').val();
var data = {title:str1,description:str2, token:str3};
//console.log(data);
var request = $.ajax({
url: "ad",
type: "POST",
data: data ,
dataType: "html"
});
request.done(function( msg ) {
var response = JSON.parse(msg);
console.log(response.msg);
});
request.fail(function( jqXHR, textStatus ) {
console.log( "Request failed: " + textStatus );
});
});
而已.为了保护,您可以将Session::token() == Input::get('_token')控制器设置为if检查.这只是一个可以帮助您入门的示例.使用绝对URL可能是必要的(在这种情况下使用http://www.pretty.url/ad)是www.pretty.url是您localhost或本地私人开发网址.
| 归档时间： |
|
| 查看次数： |
17845 次 |
| 最近记录： |