我无法使用 XAMPP 发送 ajax 请求

Posted 2023-02-25

【中文标题】我无法使用 XAMPP 发送 ajax 请求

【英文标题】：I can't send ajax request using XAMP

【发布时间】：2017-01-11 02:27:25

【问题描述】：

我正在使用一个在 Wamp Server windows 上完美运行的 ajax 登录，但是当我在 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 框架

【问题讨论】：

请给我看看html表单吗

@Laith 当然是的 :)

你能不能把error: function....换成error: function(xhr, ajaxOptions, thrownError) alert(xhr.status); ,

这将向我们显示即将出现的错误。如果您在 Chrome 中，请转到开发者控制台并复制出现的任何错误并编辑您的问题。

@fodilleo — 我们不知道这两种部署有什么不同。我们只能说服务器找不到该 URL。可能你忘记上传 PHP 文件什么的了。

【参考方案1】：

好的，发现 HTML 表单代码中缺少一些东西：

编辑：在阅读了 Quentin cmets 和他提供的正确信息后，我不得不参加我所说的部分：

首先你没有在表单标签中包含动作，动作 表示此表单数据将被提交或 无论该表格上会发生什么，它会去哪里？

正确的信息是这样的：

action 属性是可选的。如果省略，则将表单提交给 当前网址。这无关紧要，因为表格不是 提交。 javascript 正在从中读取数据并生成 HTTP 而是请求。为了更正我关于行动的信息 属性。

感谢昆汀提供正确的信息。

我用新的代码编辑了表单代码和 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: ''请放置将接收来自AJAX代码的数据的目标页面。例如，如果 php 页面与该表单所在的页面位于同一文件夹中，只需键入该页面名称，例如：url: 'login.php'，如果 login.php 存在于另一个文件夹中，则假设该文件夹名称是登录您会这样做：url: 'login/login.php'。

现在，当您执行我要求您执行的操作时，请单击提交，如果它显示“代码有效”的警告框！这意味着代码可以完美运行，您可以根据需要进行编辑，但如果没有，那么我们必须查看您的 php 代码。

希望能解决您的问题，如果您需要更多解释，请告诉我。

【讨论】：

好吧，我已经完成了这些更改，但不幸的是同样的问题，您应该记住，该应用程序在 WampServer 上完美运行，所以我认为我只需要一些配置，无论如何谢谢； )

是的，它不起作用，因为现在我也必须编辑 php 代码，大声笑，如果我编辑了所有的 php 代码，你介意吗？ php 代码应该接受它自己的参数，它不会被函数调用

@fodilleo 我正在输入 php 代码，我将使用 PDO。

“首先你没有在表单标签中包含动作，动作意味着这个表单数据将被提交到哪里，或者在那个表单上发生的任何事情，它去哪里？” — action 属性是可选的。如果省略，则将表单提交到当前 URL。这无关紧要，因为没有提交表单。 JavaScript 正在从中读取数据并发出 HTTP 请求。

"您忘记调用将获取所有表单数据的 Ajax 函数" — 问题是“它显示：发生错误！”，这是您可以在源代码中看到的错误消息JavaScript 的。如果不调用 Ajax 函数，则不会发生这种情况。