Ajax jQueryでデータを送信できない理由

Question

Ajax jQueryでポップアップフォームのログインを作成しようとしていますが、データの送信に失敗しています。私は見つけることができますが、何も変わらない、インターネット上の多くの方法を持っています。私を見て助けてください。ありがとう： は、これが私のフォームです：

$("#loginbutton").click(function(event) { 
    event.preventDefault(); 
    var username = $("#username").val(); 
    var password = $("#password").val(); 
    var data ={"email":username, "password":password}; 
    alert(data.email); 
    // alert(data.password); 
    $.ajax(
     { 
      url: '{{url('/')}}/loginHandling', 
      type: 'POST', 
      data: {'email': "ruoitrau95@gmail.com", 'password':"tuyen12345"}, 
      dataType: 'json', 
      success: function(data) 
      { 
       alert(data); 
       alert("done"); 
      } 
     } 
    ) 
    .fail(function(data) { 
     alert("fail"); 
    }); 
}); 

そして、これはコントローラです：：

<form id="loginform" name="loginform" method="POST"> 
    {{ csrf_field() }} 
    <div class='modal-body-left' > 
     <div class="form-group"> 
      <input type="text" id="username" name="username" placeholder="Tên đăng nhập" value="" class="form-control login-field"> 
      <i class="fa fa-user login-field-icon"></i> 
     </div> 
     <div class="form-group"> 
      <input type="password" id="password" name="password" placeholder="Mật khẩu" value="" class="form-control login-field"> 
      <i class="fa fa-lock login-field-icon"></i> 
     </div> 
     <div class="checkbox"> 
      <label> 
       <input type="checkbox" style="margin-top: -8px"> Nhớ mật khẩu 
      </label> 
      <a href="#" style="float: right;">Quên mật khẩu?</a> 
     </div> 
     <button class="btn btn-success modal-login-btn" id="loginbutton" name="loginbutton" style="background-color: #47a49a; background: #fec10f;" type="submit">Đăng nhập</button> 
    </div> 
</form> 

これは私のjsある

public function loginHandling() { 

    $email = Input::get('email'); 
    $password = Input::get('password'); 
    $check $this->pages->checkLogin($email, $password); 
    echo "alert(In loginHandling)"; 
    if ($check) { 
     $name = $this->pages->getNameFromMail($email); 
     Session::put('logined', true); 
     Session::put('email', $email); 
     Session::put('name', $name); 

     die json_encode(array("success"=>"true")); 
    } else { 
     die json_encode(array("success"=>"false")); 
    } 

} 

私のように、私はLaravelフレームワークに取り組んでいますURLは次のように定義されます。

Route::post('/loginHandling',['as'=>'loginHandling','uses'=>'LoginController@loginHandling']); 

お返事ありがとうございます

Answer 1

Laravelがリクエストを処理するには、CSRFトークンを渡す必要があります。これを行うには、いくつかの方法があります - これを試してみてください：

フォーム：

<meta name="_token" content="{{ csrf_token() }}" />    
<form id="loginform" name="loginform" method="POST"> 
    <div class='modal-body-left' > 
     <div class="form-group"> 
      <input type="text" id="username" name="username" placeholder="Tên đăng nhập" value="" class="form-control login-field"> 
      <i class="fa fa-user login-field-icon"></i> 
     </div> 
     <div class="form-group"> 
      <input type="password" id="password" name="password" placeholder="Mật khẩu" value="" class="form-control login-field"> 
      <i class="fa fa-lock login-field-icon"></i> 
     </div> 
     <div class="checkbox"> 
      <label> 
       <input type="checkbox" style="margin-top: -8px"> Nhớ mật khẩu 
      </label> 
      <a href="#" style="float: right;">Quên mật khẩu?</a> 
     </div> 
     <button class="btn btn-success modal-login-btn" id="loginbutton" name="loginbutton" style="background-color: #47a49a; background: #fec10f;" type="submit">Đăng nhập</button> 
    </div> 
</form> 

Javascriptを：

$("#loginbutton").click(function(event) { 
    $.ajaxSetup({ 
     headers: { 
      'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') 
     } 
    }); 
    event.preventDefault(); 
    var username = $("#username").val(); 
    var password = $("#password").val(); 
    $.ajax(
     { 
      url: '{{url('/')}}/loginHandling', 
      type: 'POST', 
      data: {'email': username, 'password': password}, 
      dataType: 'json', 
      success: function(data) 
      { 
       alert(data); 
       alert("done"); 
      } 
     } 
    ) 
    .fail(function(data) { 
     alert("fail"); 
    }); 
}); 

あなたは今$request->all()であなたのコントローラで送信されたデータにアクセスすることができるはずです。