Question

我有一个工作表单，使用提交给我的Controller的Laravel Collective从HTML表单提交到数据库，并且工作正常。

我想在没有页面重新加载的情况下提交它，所以我用AJAX提交数据。

我已经开始工作了，它正在写入数据库，但是我无法让控制器在成功时将响应返回给页面。

以下是我的剧本：

SCRIPT：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>key1</key>
    <array>
        <string></string>
        <string>title1</string>
        <string>disabled</string>
    </array>
    <key>key2</key>
    <array>
        <string></string>
        <string>title2</string>
        <string>disabled</string>
    </array>
    <key>myKey3</key>
    <array>
        <string></string>
        <string>title3</string>
    </array>
    <key>key4</key>
    <array>
        <string></string>
        <string>title4</string>
        <string>disabled</string>
    </array>
    <key>key5</key>
    <array>
        <string></string>
        <string>title5</string>
        <string>disabled</string>
    </array>
</plist>

HTML：

$(document).ready(function(){
  $("#msg").hide();

  $("#submit").click(function() {
    $("#msg").show();


    var name = $("#recipeName").val();
    var description = $("#recipeDescription").val();
    var token = $("#token").val();

    $.ajax({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
      type: "post",
      data: "name="+name+"&description="+description,
      dataType:'json',
      url: "{{ route('recipes.store') }}",
      success:function(data){
        $("#msg").html("Recipe Saved");
        $("#msg").fadeOut(2000);

      }
    });
  })
})

控制器：

<div class="row">
  <div class="col">
    <p class="alert alert-success" id="msg"></p>
  </div>
</div>
<div class="row">
  <div class="col">

    <!-- Start Form -->
    <input type="hidden" name="csrf" value="{{csrf_token()}}" id="token">
    <div class="form-group">
      <label for="recipeName">Recipe name:</label>
      <input type="text" class="form-control" id="recipeName" aria-describedby="emailHelp" placeholder="Enter recipe name">
      <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>
    <div class="form-group">
      <label for="recipeDescription">Recipe Description:</label>
      <textarea class="form-control" id="recipeDescription" rows="3" placeholder="Enter a recipe description"></textarea>
    </div>
    <button type="submit" class="btn btn-primary btn-block btn-lg" id="submit">Submit</button>
    <!-- End Form -->

  </div>
</div>

我无法锻炼我失踪的东西。

我正在学习AJAX（如果我老实，我正在学习所有这些！），但正如我所说，它正在成功写入数据库，只需要通知用户它

Answer 1

<强> SCRIPT

  $("#submit").click(function() {
        $("#msg").show();
        var name = $("#recipeName").val();
        var description = $("#recipeDescription").val();

        $.ajax({
            type: "post",
            data: {name:name,description:description,'_token':'{{csrf_token()}}'}, 
             dataType:'json',
            url: "{{ route('recipes.store') }}",
            success:function(data){
                $("#msg").html("Recipe Saved");
                $("#msg").fadeOut(2000);

            }
        });
    });

<强> HTML

将提交按钮的类型从提交更改为按钮

 <div class="row">
 <div class="col">
  <p class="alert alert-success" id="msg"></p>
  </div>
 </div>
<div class="row">
 <div class="col">

<!-- Start Form -->
<input type="hidden" name="csrf" value="{{csrf_token()}}" id="token">
<div class="form-group">
  <label for="recipeName">Recipe name:</label>
  <input type="text" class="form-control" id="recipeName" aria-describedby="emailHelp" placeholder="Enter recipe name">
  <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
  <label for="recipeDescription">Recipe Description:</label>
  <textarea class="form-control" id="recipeDescription" rows="3" placeholder="Enter a recipe description"></textarea>
</div>
<button type="button" class="btn btn-primary btn-block btn-lg" id="submit">Submit</button>
<!-- End Form -->

<强>控制器

你必须识别$ data变量

  public function store(Request $request)
  {
   $this->validate($request, [
   'name' => 'required|max:255',
  'description' => 'required'
]);

$data = 'some data';
$recipe = new Recipe;

$recipe->name = $request->name;
$recipe->description = $request->description;
$recipe->user_id = auth()->user()->id;

$recipe->save();

return Response::json(array(
  'success' => true,
  'data'   => $data
)); 
}

Answer 2

在控制器中更改以下内容可正常工作！

...
$recipe->save();
$data = [
  'success' => true,
  'message'=> 'Your AJAX processed correctly'
] ;

return response()->json($data);

显示来自Laravel的Ajax响应的返回消息

2 个答案: