无法获取使用 HTML 简单登录到 PHP Web 服务的数据 - Can't Get Data for Simple Login with HTML to PHP Web Service

我尝试使用jquery从某些Web服务访问登录服务以进行用户验证，但是即使我使用浏览器访问Web服务，Web服务也可以正常工作。这是 html 代码：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.2.4/css/ionic.css">
    <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.2.4/css/ionic.min.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.2.min.js"></script>
    <script type="text/javascript">
        $("#login").click(function(){
            var username=$("#username").val();
            var password=$("#password").val();
            var dataString="username="+username+"&password="+password+"&login=";
            if($.trim(email).length>0 & $.trim(password).length>0)
                {
                    $.ajax({
                        type: "POST",
                        url: "some url here",
                        data: dataString,
                        crossDomain: true,
                        cache: false,
                        beforeSend: function(){ $("#login").html('Connecting...');},
                        success: function(data){
                            if(data.success=="true")
                                {
                                    localStorage.login="true";
                                    localStorage.username=username;
                                    window.location.href = "index.html";
                                }
                            else if(data.success="false")
                                {
                                    alert("Login error");
                                    $("#login").html('Login');
                                }
                        }
                    });
                }   return false;
        });
    </script>
</head>
<body>
    <div class="bar bar-header bar-positive" style="margin-bottom:80px;">
        <a href="index.html" class="button button-clear">Home</a>
        <h1 class="title">Login</h1>
    </div>
    <br/><br/>
    <input id="username" type="text" placeholder="username" />
    <input id="password" type="password" placeholder="password" />
    <button id="login">Login</button>
</body>

甚至"beforeSend"代码也不起作用，我的意思是当我单击"登录"按钮时，它上面的文本不会更改为"连接"。我怎样才能让它工作？

替换

$.trim(email).length

自

$.trim(username).length

success function中代码中的另一个问题;

/* Now */
}else if(data.success="false"){
/* should be == because here we are comparing not assigning */
}else if(data.success=="false"){
/* OR we can remove if part completely because we don't need any comparison if not success  */
}else{

还有一件事，如果我们得到true或false的响应，我不认为它会是字符串值，它将是布尔值，因此更新success function的代码如下：

success: function(data){
  if(data.success){
    localStorage.login = "true";
    localStorage.username = username;
    window.location.href = "index.html";
  }else{
    alert("Login error");
    $("#login").html('Login');
  }
}

还有一个问题，您的代码将无法执行，因为在这里您尝试引用未加载的元素login button;

将以下代码与所有修复一起使用;

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.2.4/css/ionic.css">
    <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.2.4/css/ionic.min.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.2.min.js"></script>
    <script type="text/javascript">
      /* code wrapped in $(function(){ to make sure the all elemtents loaded before we make use them  */
      $(function(){
        $("#login").click(function(){
          var username = $("#username").val();
          var password = $("#password").val();
          var dataString = "username=" + username + "&password=" + password + "&login=";
          if($.trim(password).length > 0 & $.trim(password).length > 0){
            $.ajax({
              type: "POST",
              url: "some url here",
              data: dataString,
              crossDomain: true,
              cache: false,
              beforeSend: function(){
                $("#login").html('Connecting...');
              },
              success: function(data){
                if(data.success){
                  localStorage.login = "true";
                  localStorage.username = username;
                  window.location.href = "index.html";
                }else{
                  alert("Login error");
                  $("#login").html('Login');
                }
              }
            });
          }
          return false;
        });
      });
    </script>
  </head>
  <body>
    <div class="bar bar-header bar-positive" style="margin-bottom:80px;">
      <a href="index.html" class="button button-clear">Home</a>
      <h1 class="title">Login</h1>
    </div>
    <br/><br/>
    <input id="username" type="text" placeholder="username" />
    <input id="password" type="password" placeholder="password" />
    <button id="login">Login</button>
  </body>
</html>

电子邮件之前

未定义

$.trim(email)

将其更改为和连接...将出现

$.trim(username)

change $.trim(email).length

自

 $.trim(username).length