在 laravel 中使用 ajax 发布数据时的问题答案

【问题标题】：issue when post data using ajax in laravel在 laravel 中使用 ajax 发布数据时的问题
【发布时间】：2017-12-19 03:34:43
【问题描述】：

我正在尝试使用 ajax 和 jquery 发布数据，但是当我使用 post 方法时出现问题，我在 url 中得到的结果与 get 方法相同，为什么会这样。并且在点击控制器方法后，一个对象应该返回 aon cansole 但它不是

查看

 <div class="box-body">
                <form role="form">

                    <!-- select -->
                    <div class="form-group">
                        <label>Select</label>
                        <select class="form-control">
                            <option>option 1</option>
                            <option>option 2</option>
                            <option>option 3</option>
                            <option>option 4</option>
                            <option>option 5</option>
                        </select>
                    </div>
                    <!-- input states -->
                    <div class="form-group has-success">
                        <label class="control-label" for="inputSuccess"><i class="fa fa-check"></i> Input with
                            success</label>
                        <input type="text" class="form-control" id="name" name="name" placeholder="Enter ...">
                        <span class="help-block">Help block with success</span>
                    </div>

                    <div class="box-footer">
                        <button type="submit" class="btn btn-info pull-right" id="addMenu">Add Menu</button>
                    </div>
                </form>
            </div>

脚本

 <script>
        $(document).ready(function () {

            $('.ourItem').each(function () {
                $(this).click(function (event) {

                    var text = $(this).text();
                    $('#inputSuccess').val(text);
                    $('#delete').show(400);
                    $('#saveChanges').show(400);

                    // console.log(text);
                });

            });

            $('#addMenu').click(function (event) {

              var text = $('#name').val();
              $.post("menu.store", {'text':text}, function(data) {

                   console.log(data);
            });
                });

        });
    </script>

路线

Route::resource('/menu','NavegationController');

控制器

   public function store(Request $request)
    {

        return $values = $request->input();

    }

它应该返回对象，但它在浏览器的console window 中返回url

返回什么

Navigated to http://localhost:8080/beautyproductswebapp/Public/?name=rgerge

rgerge 是我输入的值，name 是输入字段的name

【问题讨论】：

我认为$.post("menu.store" 无效
我删除了.store 但仍然是同样的问题
试试$.post('menu/store'
还是同样的问题，没有任何改变

标签： javascript php jquery laravel

【解决方案1】：

您在控制台中看到的内容几乎肯定不是来自您的 ajax 请求。

您的“addMenu”按钮是一个“提交”类型的按钮（根据您的 HTML）。当您单击此按钮时，它将使用正常的整页刷新自动提交您的表单。这很可能会在您的 ajax 请求开始之前发生，而且肯定会在它完成之前发生。即使完成了，结果也会立即被表单提交引起的页面刷新所抹杀。

控制台中显示的行是使用 GET 提交标准表单的结果（当您没有在 <form> 标记中指定“action”或“method”参数时会发生这种情况） - 它请求相同再次使用基本 URL，您的表单变量将成为附加到 URL 的查询字符串参数。

为了防止这种情况，您可以

a) 将您的按钮更改为具有 type="button" 属性（而不是 type="submit"

或

b) 将event.preventDefault(); 作为$('#addMenu').click(function (event) { 事件处理函数中的第一行。这会运行一个 JS 方法，该方法会阻止元素的默认“单击”操作（在本例中为回发）。

这是您的直接问题的原因。如 cmets 中所述，您使用 ajax 请求的方式可能会遇到一些进一步的问题。

【讨论】：

【解决方案2】：

好吧，你的 ajax 调用它有点奇怪，url 显然是错误的：

$.post('/menu', function(data) {

       console.log(data);
});

然后响应也是错误的，您可能希望将对象转换为 json，因为它是一个 ajax 调用，因此类似于以下内容：

public function store(Request $request)
{

    .... perform the queries or operations that you want to perform.

    if($request->wantsJson(){

        //Laravel automatically will cast the response to json 

      return response(['status'=>'ok'], 200);
    }   
   return ..view 
}

【讨论】：