Ajax and php login

本文关键字：login php and Ajax | 更新日期: 2023-09-27

我正在尝试使用Ajax和PHP创建一个登录系统，但是，一旦我单击<button>并且?显示我的URL，我的页面就会不断重新加载。

即

localhost/ethics.php

成为

localhost/ethics.php?

我试过e.preventdefault但它不起作用，这真的很令人沮丧。

这是 HTML 代码

<form class="form-horizontal">
        <h4 class="text-center panel-heading">
         Login
        </h4>
        <hr>
        <div class="alert alert-danger user-empty" style="display:none">
            <a href="#" class="close" data-dismiss="alert">&times;</a>
            <strong>Warning!</strong> Username field is empty.
        </div>
        <div class="row">
            <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-8 col-xs-offset-2 " >
                        <div class="input-group form-group">
                            <!--<div class="input-group">-->
                                <span class="input-group-addon"><span class="glyphicon glyphicon-user "></span></span>
                                <input type="text" class="form-control username" id="username" placeholder="Username">
                            <!--</div>-->
                        </div>
                    </div>
                    <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-8 col-xs-offset-2  ">
                            <div class="input-group form-group ">
                            <!--<div class="form-group">-->
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input type="password" class="form-control password" id="password" placeholder="Password">
                            <!--</div>-->
                        </div>
                    </div>

                    <div class="form-group form-group-sm">
                        <button class="btn btn-primary col-md-offset-4 col-md-4 col-sm-offset-4 col-sm-4 col-xs-4 col-xs-offset-4 sign-in " type="submit">Sign In <i class="glyphicon glyphicon-log-in"></i></button>
                    </div>
               </div><!-- End of row -->        
            </form>

如您所见，我使用了<button>而不是<input="submit">

这是我的阿贾克斯

$(".sign-in").click(function(){

        //Login Variables
        var username = $(".username").val();
        var password = $(".password").val();
        //Setup login data structure
        var login_Data=
        {
            'key':"Login",
            'username': username,
            'password': password        
        }
    //If the Input isnt empty, make the Ajax call
    if(input_Check(username,password) == true)
        {
            var a1= $.ajax({
             data:login_Data,
             type:"POST",
             url: './php/test.php',
             dataType: 'json',
             cache:true,
             beforeSend: function()
                {
                        $(".sign-in").text("connecting...");
                },
         });
    /**a2 = a1.then(function() {
             // .then() returns a new promise
             /**return $.ajax({
                 url: './php/insSession.php',
                 type:"POST",
                 //dataType: 'json',
                 data: {'user_Id':data.user_Id,
                            }
             });**/
             //return    $.getJSON('./php/insSession.php');
         //});//end of a2

    //after the promise is returned, check the personcode to determine the user's status and redirect them accordingly
    /**a2.done(function(jd,textStatus,xhr) {
    );
    a2.fail(function(){
                $("hr").append("<p class='"text-danger text-center'">Problem with Ajax Call </p>");;
                });**/
        }// end of input_Check if statement
    });//end of click method

试试这个

 $("button#mybutton").click(function(event) {
                                event.preventDefault(); 
    jQuery.ajax({
                                type: "POST",
                                url: "<your url>",
                               data:{data1:data1},
                                dataType: 'json',                                   
                                success: function(resp) {
                                    if (resp)
                                    {
                                        //success   
                                    }}                                      
                            });
    //return false; 
    });

尝试为表单提供一个 ID。

所以这个

<form  class="form-horizontal" >

变成这个

<form  id="myId" class="form-horizontal" >

.JS：

jQuery.ajax({
          type: "POST",
          url: "<your url>",
          data:{data1:data1},
          dataType: 'json',                                   
          success: function(resp) {
              if (resp)
              {
                  //success   
              }}                                      
      });