Ajax和php登录

Question

I'm trying to create a login system with Ajax and PHP, however, my page keeps reloading once I click on my <button> and ? shows up my URL.

i.e.

localhost/ethics.php 

becomes

localhost/ethics.php? 

I tried e.preventdefault and it does not work it's really frustrating.

Here is HTML code

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

As you can see, I used a <button> instead of <input="submit">

This is my ajax

$(".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

Answer 1

try this

 $("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; 
    });