javascript - 如何使用javascript调用路由并发送数据

Question

我正在使用 Laravel 5，并且有以下代码

HTML

<div id="row">
  <textarea class="form-control" rows="3" id="comment" placeholder="Update your Post"></textarea>
</div>

<a href="#" id="btn-post" dusk="postButton" class="btn btn-primary" role="button" data-toggle="modal" data-target="#addPost">
  <span class="ion-plus-circled"> Post</span>
</a>

JS

$(document).ready(function(){

$("#btn-post").click(function(){
    $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    var comment = $('textarea#comment').val();
    var postData = {
        post_content: comment.val();
        groupId: window.location.href.split("/")[4] // hack to get group id
    }

    console.log(postData);

    $.ajax({
        type: "POST",
        url: "/post",
        data: JSON.stringify(postData),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(data, status){
        $("#addPost").modal('toggle');
            //window.location.href = data.redirectTo;                  
        }
    });
  });
});

web.php

Route::post('post', 'GroupController@post');

GroupController.php

public function post(Request $request){
    $post_content = $request->input('post_content');
    $userId = Auth::user()->id;
    $groupId = $request->input('groupId');

    $post = PostGroup::firstOrNew(['group_id' => $groupId, 'post_content' => $post_content]);
    $post->user_id = $userId;

    $post->save();

    $redirectPath = '/groups/' . $groupId;
    return response()->json(['message' => 'Your post have been published! Take a look at',
        'redirectTo' => $redirectPath]);
}

我想要做的是在点击链接按钮Post时调用javascript函数btn-post。此函数获取 textarea 的内容(我不知道我写得是否正确)，并使用相同的 javascript 函数将其发送到 GroupController 到路由“/post”，调用函数post(如web.php中定义的)，但由于某种原因它不起作用，我不知道我错在哪里(我认为问题是在 javascript 函数中，就好像它没有被调用一样)。

Answer 1

您的 Javascript 存在语法和逻辑错误:

var comment = $('textarea#comment').val();
var postData = {
    post_content: comment.val(); 
    groupId: window.location.href.split("/")[4] // hack to get group id
}

逻辑错误:您将 textarea 值分配给 var comment。然后在 2 行之后，您对其调用 comment.val() ，尽管此时它是一个字符串。无需再次调用.val()。

语法错误:您不应在 postData JSON 定义中使用 ;。您可以使用逗号分隔 JSON 字段。

这是对上述两个问题的修复:

var postData = {
    post_content: comment, // <----
    groupId: window.location.href.split("/")[4] // hack to get group id
}

我建议你开始使用开发者工具来调试你的Javascript