weixin_33725722 2016-02-24 12:23 采纳率: 0%
浏览 29

Ajax和php登录

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
  • 写回答

2条回答 默认 最新

  • weixin_33719619 2016-02-24 12:50
    关注

    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; 
        });
    
    评论

报告相同问题?

悬赏问题

  • ¥50 手写签名不能上传的问题
  • ¥30 linux odbc怎么添加gbase数据库
  • ¥20 电脑开机黑屏,只有一个鼠标,联想zj者y7000
  • ¥20 DXSDK_jun10
  • ¥20 请问这种量表怎么用spss量化分析(作为中介模型的因变量
  • ¥55 AD844 howland电流源如何驱动大额负载
  • ¥15 C++ /QT 内存权限的判断函数列举
  • ¥15 深度学习GFnet理解问题
  • ¥15 单细胞小提琴堆叠图代码
  • ¥50 升级strust2版本到2.3.15.1后使用ognl3.0.6.jar windows环境中没有问题,但部署到linux环境报错