如何在Laravel中返回Ajax请求的视图

时间:2017-05-30 16:57:37

标签: ajax laravel laravel-5

首先让我说Laravel / JQuery是一个温和的人,所以请忍受我的问题。

当用户使用ajax单击按钮时,我想返回一个视图。每当我点击按钮,我都没有收到任何错误但也没有得到任何HTML。任何帮助表示赞赏。

我将我的路线web.php定义为:

Route::get('ajax', function() {
    return view('test');
});

Route::post('/getmsg', function() {
     $msg = "<strong>This is a simple message.</strong>";
     $returnHTML=view('form1_sections/section2_form')->render();
     return response()->json(array('html'=>$returnHTML, 'msg'=>$msg));
});

我的test.blade.php看起来像是:

<html>
<head>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Ajax Example</title>

    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    </script>

    <script>
        function getMessage() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: 'POST',
                url: '/getmsg',
                data: '_token = <?php echo csrf_token() ?>',
                success: function (data) {

                    $("#msg").html(data.html);
                }
            });
        }
    </script>
</head>

<body>
    <div id = 'msg'>This message will be replaced using Ajax. 
        Click the button to replace the message.</div>
    <form>
        <button onclick="getMessage()">Replace Message</button>
    </form>
</body>

我的section2_form视图如下所示:

<div class="well">
<div class="row">
    <div class="col-xs-12">

        <h4>Date of Previous Research Leave</h4>
        <br>
        <label>Start Date:</label>
        <label>
            <input class="form-control" name="startDate" id="startDate" placeholder="Start Date" type="date">
        </label>
        <br><br>
        <label>End Date:</label>
        <label>
            <input class="form-control" name="endDate" id="endDate" placeholder="End Date" type="date">
        </label>
    </div>
</div>

1 个答案:

答案 0 :(得分:1)

将您的请求的dataType设置为json。你的token的构建也是如此,但这不是错误的,但是有更好的方法,请完整回答以下内容:

$.ajax({
    type: 'POST',
    url: '/getmsg',
    data: {
        token: $('meta[name="csrf-token"]').content()
    },
    dataType: 'json',
    success: function (data) {
        $("#msg").html(data.html);
    }
});

它需要json的原因是否则请求假定响应为text/html。这意味着它不会在返回的数据上调用JSON.parse(),因此您不会拥有可以访问属性的对象。