在Laravel中使用AJAX与数据库进行交互

时间:2013-03-25 20:24:54

标签: jquery laravel

我正在学习基于模型,视图,控制器范例的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>
视图中的

标签。


UPDATE:

这就是它的作用......

我的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);
  })
});

3 个答案:

答案 0 :(得分:5)

我花了一段时间才弄清楚,因为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 check。 这只是一个可以帮助您入门的示例。使用绝对URL可能是必要的(在这种情况下使用http://www.pretty.url/ad)www.pretty.url是您的localhost或本地私人开发网址。

答案 1 :(得分:4)

这可以通过多种方式完成。

首先,你可以这样做:

public function get_show($call_id)
{
    $call = Phonecall::find($call_id);

    return View::make('phonecalls.single')->with('phonecal', $call);

}

在这种情况下,您需要为单个电话呼叫创建模板并将其放入phonecalls文件夹中。

另一个选择是从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);
        });

答案 2 :(得分:0)

您必须能够拦截“显示”链接上的点击次数。如果您制作控制器restful,则应该很容易向控制器发出ajax请求。

您必须在显示链接上的用户ajax request发送clicks

我建议您将结果输出为JSON,以便以后使用js输出结果非常容易。