2017-01-15 41 views
-2

我無法弄清楚爲什麼我的ajax表單不起作用,我一直在撓我的腦袋。爲了使它更容易我的JavaScript代碼是在忘記密碼部分。控制檯輸出什麼都沒有,頁面也不刷新,所以我不知道什麼是錯的?結果應該顯示在<p id="msg"><p/>中。我的Ajax表單不起作用

login2.php代碼:

<?php 

$data = array(); 
if(isset($_POST['email'])){ 
$data = $_POST['email'];  
echo json_encode($data); 
die();  
} 
?> 
<!DOCTYPE html> 
<html lang="en"> 
    <!--[if IE 9 ]><html class="ie9"><![endif]--> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>Sign In</title> 

     <!-- Vendors --> 

     <!-- Animate CSS --> 
     <link href="vendors/bower_components/animate.css/animate.min.css" rel="stylesheet"> 

     <!-- Material Design Icons --> 
     <link href="vendors/bower_components/material-design-iconic-font/dist/css/material-design-iconic-font.min.css" rel="stylesheet"> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
     <!-- Site CSS --> 
     <link href="css/app-1.min.css" rel="stylesheet"> 
    <script src='/google_analytics_auto.js'></script></head> 

    <body> 
     <div class="login"> 

      <!-- Login --> 
      <div class="login__block toggled" id="l-login"> 
       <div class="login__block__header"> 
        <i class="zmdi zmdi-account-circle"></i> 
        Hi there! Please Sign in 

        <div class="actions login__block__actions"> 
         <div class="dropdown"> 
          <a href="" data-toggle="dropdown"><i class="zmdi zmdi-more-vert"></i></a> 

          <ul class="dropdown-menu pull-right"> 
           <li><a data-block="#l-register" href="">Create an account</a></li> 
           <li><a data-block="#l-forget-password" href="">Forgot password?</a></li> 
          </ul> 
         </div> 
        </div> 
       </div> 

       <div class="login__block__body"> 
        <div class="form-group form-group--float form-group--centered form-group--centered"> 
         <input type="text" class="form-control"> 
         <label>Email Address</label> 
         <i class="form-group__bar"></i> 
        </div> 

        <div class="form-group form-group--float form-group--centered form-group--centered"> 
         <input type="password" class="form-control"> 
         <label>Password</label> 
         <i class="form-group__bar"></i> 
        </div> 

        <button class="btn btn--light btn--icon m-t-15"><i class="zmdi zmdi-long-arrow-right"></i></button> 
       </div> 
      </div> 


      <!-- Forgot Password --> 
      <div class="login__block" id="l-forget-password"> 
       <div class="login__block__header palette-Purple bg"> 
        <i class="zmdi zmdi-account-circle"></i> 
        Forgot Password? 

        <div class="actions login__block__actions"> 
         <div class="dropdown"> 
          <a href="" data-toggle="dropdown"><i class="zmdi zmdi-more-vert"></i></a> 

          <ul class="dropdown-menu pull-right"> 
           <li><a data-block="#l-login" href="">Already have an account?</a></li> 
           <li><a data-block="#l-register" href="">Create an account</a></li> 
          </ul> 
         </div> 
        </div> 
       </div> 

       <div class="login__block__body"> 
       <form> 
        <p class="m-t-30">Lorem ipsum dolor fringilla enim feugiat commodo sed ac lacus.</p> 

        <div class="form-group form-group--float form-group--centered"> 
         <input type="text" class="form-control" id="emailfield"> 
         <label>Email Address</label> 
         <i class="form-group__bar"></i> 
         </form> 
         <p id="msg"><p/> 
        </div> 
        <button class="btn btn--light btn--icon m-t-15" value="submit" type="submit"><i class="zmdi zmdi-check"></i></button> 
       </div> 
      </div> 
      <script type = "text/javascript"> 

    $("form").on("submit", function(e){ 

     e.preventDefault(); 
     var emailfield = $("#emailfield").val(); 
     var email ='email='+ emailfield; 

     $.ajax({ 
      url: "login2.php", 
      method: "POST", 
      dataType: "json", 
      data: {email: email}, 
      success: function (result) { 
       alert("result: " + result); 
       console.log(result); 
       $("#msg").html(result); 
      } 
     }); 
    }); 

</script> 
     </div> 

     <!-- Older IE Warning --> 
     <!--[if lt IE 9]> 
      <div class="ie-warning"> 
       <h1>Warning!!</h1> 
       <p>You are using an outdated version of Internet Explorer, please upgrade <br/>to any of the following web browsers to access this website.</p> 
       <div class="ie-warning__container"> 
        <ul class="ie-warning__download"> 
         <li> 
          <a href="http://www.google.com/chrome/"> 
           <img src="img/browsers/chrome.png" alt=""> 
           <div>Chrome</div> 
          </a> 
         </li> 
         <li> 
          <a href="https://www.mozilla.org/en-US/firefox/new/"> 
           <img src="img/browsers/firefox.png" alt=""> 
           <div>Firefox</div> 
          </a> 
         </li> 
         <li> 
          <a href="http://www.opera.com"> 
           <img src="img/browsers/opera.png" alt=""> 
           <div>Opera</div> 
          </a> 
         </li> 
         <li> 
          <a href="https://www.apple.com/safari/"> 
           <img src="img/browsers/safari.png" alt=""> 
           <div>Safari</div> 
          </a> 
         </li> 
         <li> 
          <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie"> 
           <img src="img/browsers/ie.png" alt=""> 
           <div>IE (New)</div> 
          </a> 
         </li> 
        </ul> 
       </div> 
       <p>Sorry for the inconvenience!</p> 
      </div> 
     <![endif]--> 


     <!-- Javascript Libraries --> 

     <!-- jQuery --> 
     <script src="vendors/bower_components/jquery/dist/jquery.min.js"></script> 

     <!-- Bootstrap --> 
     <script src="vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 

     <!-- Placeholder for IE9 --> 
     <!--[if IE 9 ]> 
      <script src="vendors/bower_components/jquery-placeholder/jquery.placeholder.min.js"></script> 
     <![endif]--> 

     <!-- Site Functions & Actions --> 
     <script src="js/app.min.js"></script> 
    </body> 
</html> 
+1

你怎麼樣縮小這個問題先下創建一個[MCVE] – Xorifelse

+0

使用JSON.stringify(電子郵件) –

+0

我粘貼示例代碼,請嘗試如果它不起作用,請分享網絡標籤的詳細信息 –

回答

-1

使用一個JSON或正常key = value

因此改變在這裏阿賈克斯

data: email, 

返回類型是JSON所以它應該是Json不是沒有鍵的字符串,它只是在.php中用引號引起來的字符串。

從ajax中刪除dataType: "json",,並返回字符串作爲.php返回值。或包括keyjson_encode

要返回的JSON改變這裏

$data["email"] = $_POST['email']; 
+0

完美工作,我決定將它作爲json返回! – jake

+0

請問爲什麼它將它作爲對象返回? – jake

+0

因爲你早說過ajax,如果你不寫這行,默認是字符串類型,那麼返回值將是'dataType:「json」的Json對象。 – C2486

0
please try this and open Network Tab to see if request is going correctly and your backend is getting hit with this call . 

    $("form").on("submit", function(e){ 

    e.preventDefault(); 
    var emailfield = $("#emailfield").val(); 
    var email ='email='+ emailfield; 


    $.ajax({ 
     url: "login2.php", 
     method: "POST", 
     dataType: "json", 
     data: JSON.stringify(email), 
     success: function (result) { 
      alert("result: " + result); 
      console.log(result); 
      $("#msg").html(result); 
     } 
    }); 
}); 
+0

沒有任何區別。 – jake

+0

好的,你可以看到網絡標籤,如果你發佈實際命中服務器? –

+0

也請試試這個以及JSON.stringify(emailfield)。我打錯了電子郵件在我的回答 –