0

我有一个带有“登录”和“密码”输入以及“登录按钮”提交的基本登录页面。由于我找不到的原因，单击 login_button 时我无法触发 ajax 请求。
我使用 jquery 想出了以下（简单）代码： 

$(document).ready(function(){
  // Perform login
  function log_in(login,password){
    alert("log_in"); // this is never triggered
    $.ajax({
    url : '/api/login',
    type : 'GET',
    dataType : 'json',
    data: 'login=' + login + '&password=' + password,
    success : function(data, status, jqXHR){
      alert("success");
      alert(JSON.stringify(data));
      alert(JSON.stringify(status));
      alert(JSON.stringify(jqXHR));
    },
    error : function(jqXHR, status, err){
      alert("error");
      alert(JSON.stringify(jqXHR));
      alert(JSON.stringify(status));
      alert(JSON.stringify(err));
    },
    complete : function(jqXHR, status){
      alert("complete");
      alert(JSON.stringify(jqXHR));
      alert(JSON.stringify(status));
    }
    });
  }

  // Add event on login button
  $('#login_button').click(function(){
    alert("click"); // this is triggered
    login    = $('#email').val();
    password = $('#password').val();
    log_in(login, password);
  });
});

知道我缺少什么吗？

编辑

该表格是一个简单的引导表格： 

<form class="form-signin">
  <h2 class="form-signin-heading">Please sign in</h2>
  <input id='email' type="text" class="input-block-level" placeholder="Email address">
  <input id='password' type="password" class="input-block-level" placeholder="Password">
  <label class="checkbox">
    <input type="checkbox" value="remember-me"> Remember me
  </label>
  <button id='login_button' class="btn btn-large btn-primary" type="submit">Signin</button>
</form>

编辑 2

添加'return false;' 实际上解决了这个问题：

// Add event on login button
$('#login_button').click(function(){
  alert("click"); // this is triggered
  login    = $('#email').val();
  password = $('#password').val();
  log_in(login, password);
  return false;
});
4

2 回答 2

2

如果您想保留本机行为（没有 JS，但有按钮提交），您必须在表单和命名输入中添加操作

<html>
    <form class="form-signin" action="/api/login" method="GET">
        <input name="email" id='email' type="text" class="input-block-level" placeholder="Email address">
        <input name="password" id='password' type="password" class="input-block-level" placeholder="Password">
        <button id='login_button' class="btn btn-large btn-primary" type="submit">Signin</button>

    </form>
</html>

对于支持 JS 的浏览器，你必须杀死原生提交

$('#login_button').click(function(e){
    e.preventDefault();
    alert("click"); // this is triggered
    login    = $('#email').val();
    password = $('#password').val();
    log_in(login, password);
 });
于 2013-06-17T08:37:31.980 回答
1

您应该在脚本中添加return false;或preventDefault();以防止页面重新加载，因为默认情况下表单提交会这样做。

这两者之间的区别在于，您可以preventDefault();在处理程序的开头添加它肯定会工作，而false;在某些时候解释器可能无法到达最后的 return。

于 2013-06-17T12:19:02.663 回答