我无法使用XAMP发送ajax请求

时间:2016-09-02 22:24:11

标签: php ajax codeigniter xampp

我正在使用ajax登录,它在Wamp Server窗口上完美运行,但是当我在kali linux上传递给Xamp时它不起作用:

 $.ajax({
                    url: baseurl + 'index.php?login/ajax_login',
                    method: 'POST',
                    dataType: 'json',
                    data: {
                        username: $("input#username").val(),
                        password: $("input#password").val(),
                    },
                    error: function () {

                        alert("An error occoured!");
                    },

当我点击登录按钮时,它显示:出现错误! 我不知道问题出在哪里,导致应用程序在wampserver上完美运行。 我希望你能帮助我。 对于我使用codeIgniter的框架。

这是表格:

 <form method="post" role="form" id="form_login">

                    <div class="form-group">

                        <div class="input-group">
                            <div class="input-group-addon">
                                <i class="entypo-user"></i>
                            </div>

                            <input type="text" class="form-control" name="username" id="username" placeholder="nom.prenom" autocomplete="off"  />
                        </div>

                    </div>

                    <div class="form-group">

                        <div class="input-group">
                            <div class="input-group-addon">
                                <i class="entypo-key"></i>
                            </div>

                            <input type="password" class="form-control" name="password" id="password" placeholder="Password" autocomplete="off" />
                        </div>

                    </div>

                    <div class="form-group">
                        <button type="submit" class="btn btn-primary btn-block btn-login">
                            <i class="entypo-login"></i>
                            Login
                        </button>
                    </div>


                </form>

这里是ajax_login.php:

 function ajax_login() {

    $response = array();

    //Recieving post input of email, password from ajax request

    $username = $_POST["username"];

    $password = $_POST["password"];

    $response['submitted_data'] = $_POST;



    //Validating login

    $login_status = $this->validate_login($username, $password);

    $response['login_status'] = $login_status;

    if ($login_status == 'success') {

        $response['redirect_url'] = $this->session->userdata('last_page');
    }

    //Replying ajax request with validation response
    echo json_encode($response);

}

它是名为login的控制器中的一个函数,这是baseurl:

$config['base_url'] = 'http://localhost/elit';

我正在使用codeIgniter框架

1 个答案:

答案 0 :(得分:-1)

Ok找到了HTML表单代码中缺少的一些内容:

编辑:在阅读了Quentin的评论和他提供的信息后,我必须采取我所说的部分:

  

首先,您没有在表单标记中包含操作,即操作   表示要提交此表单数据的位置或   无论在那种形式上发生什么,它会发生什么?

正确的信息是:

  

action属性是可选的。如果省略,表单将提交给   当前的URL。这是无关紧要的,因为形式不存在   提交。 JavaScript正在从中读取数据并制作HTTP   请求。用于更正有关操作的信息   属性。

感谢Quentin提供正确的信息。

我使用新的编辑了代码和AJAX代码,但几乎没有任何更改,这段代码在XAMP上非常适合我:

<form action="" method="post" role="form" id="form_login" onsubmit="return UserSignIn();">
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class="entypo-user"></i>
                        </div>
                        <input type="text" class="form-control" name="username" id="username" placeholder="nom.prenom" autocomplete="off"  />
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class="entypo-key"></i>
                        </div>
                        <input type="password" class="form-control" name="password" id="password" placeholder="Password" autocomplete="off" />
                    </div>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary btn-block btn-login">
                        <i class="entypo-login"></i>
                        Login
                    </button>
                </div>
            </form>

AJAX代码:

<script>
    function UserSignIn()
        {
            var username = document.getElementByI('username').value;
            var password = document.getElementByI('username').value;

            if(username && password )
            {
                $.ajax({
                type: 'POST',
                url: '',
                data: {
                    username,
                    password
                },
                success: function(response) {
                    alert("Code Works");
                },
                    error: function(response){
                    console.log(response);  
                    }
                });
            }
        return false;
        }
</script>

注意:在这部分url: ''中,plz放置了将从AJAX代码接收数据的目标页面。例如,如果php页面与该表单所在的页面位于同一文件夹中,只需键入该名称页面,例如:url: 'login.php',如果login.php exisst在另一个文件夹中,则表示该文件夹名称为登录您将执行此操作:url: 'login/login.php'

现在当你做我要求你做的事情时点击提交,如果它显示警告框说“代码工作”!!这意味着代码工作完美,你可以根据自己的需要编辑它,但如果没有,那么我们必须看看你的PHP代码。

希望能解决您的问题,如果您需要更多解释,请与我们联系。