doumao1917
2016-03-21 06:08
浏览 38

无法获取用于使用HTML进行简单登录的数据到PHP Web服务

I try to access login service from some web service for user validation directly to html page using jquery, but it seems not working, even when I access the web service with browser the web service work perfectly. Here is the html code:

<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>

Even the "beforeSend" code is not working, I mean when I click on Login button the text on it doesn't change to Connecting. How can I make it work?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • dongzong2017 2016-03-21 06:31
    已采纳

    Replace

    $.trim(email).length
    

    To

    $.trim(username).length
    

    One more problem in code in 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{
    

    One more thing if we are getting the response as true or false i don't thing it would be string value, it would be Boolean so update code for success function like following:

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

    And one more problem your code won't execute because here you are trying to reference element that not loaded that is login button;

    Use following code with all fixes;

    <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>
    
    点赞 打赏 评论
  • douqian8238 2016-03-21 06:27

    email is not defined before

    $.trim(email)
    

    Change it to and the connecting... will appear

    $.trim(username)
    
    点赞 打赏 评论
  • dongyan1974 2016-03-21 06:47
    change $.trim(email).length 
    

    To

     $.trim(username).length
    
    点赞 打赏 评论

相关推荐 更多相似问题