有没有更合适的方法来处理使用AJAX的错误?

时间:2017-05-18 20:22:14

标签: javascript php jquery ajax

我从来没有在这里问过什么,但是有些东西让我烦恼。

你看,我用PHP玩弄了大约一年。在学习PHP,JQuery,MySQL等时,我已经做了一个非常大的项目 - 它远非完美,甚至没有完成,但它有效,我不断尝试在添加新功能的同时改进现有代码。这是一个基于文本的浏览器MMORPG游戏(它还在开发中),如果你想要一个链接,我会提供它,但我没有来这里推广它。

问题是,我觉得在程序PHP中没问题(虽然我仍然有重复代码的问题),所以我决定是时候转移到OOP了。我在理论上理解它,了解基础知识,并且我在实践中慢慢推进,但在移动太远之前我想要你的建议。

在我使用程序代码的原始游戏中,我经常在这些方面做一些事情:

  • 用户访问一个页面,比如shop.php。在打开网站时,shop.php从数据库中检索可购买的商品。网站上有空白#success-message #错误消息段落。
  • 用户然后可以从他想要购买的商店中选择一个项目 - 点击该项触发javascript,并且对 buy-item.php 进行AJAX调用,期望返回一个json < / LI>
  • in buy-item.php我正在创建一个数组,比如说, $ result(“success”=&gt; 0,“message”=&gt;“”)
  • buy-item.php检查玩家是否能买得起物品,背包里有空间等等,如果有一个条件没有达到,那么$ result [“message”]设置为,比方说,“你需要更多的黄金“。如果满足所有条件,则结果[“success”]设置为1,$ result [“message”]设置为“Purchase successful”。最后,它将 json_encode($ result)回传给AJAX。
  • 在AJAX中成功:我检查 if(result.success),并采取相应行动 - 如果购买成功,我会做 $(“#错误消息“)。html(result.message),如果成功,我将result.message改为”#success-message“(我可以同时显示错误和成功消息)我想这段,但是对我来说这样做比较简单,因为这些消息的风格不同,比如说成功是绿色的,而且是错误的。)

现在,这是处理错误的正确方法吗?或者我应该完全不同地编码它?这种方法在OOP中仍然有效吗?

让我告诉你我对这个例子的意思,我现在正在玩弄(为了简单起见,请忘记代码的安全性甚至有用性):

的index.php

<!DOCTYPE html>
<html lang="pl-PL">
    <head>
        <meta charset="UTF-8">
        <script
            src="https://code.jquery.com/jquery-3.2.1.min.js"
            integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
            crossorigin="anonymous">
        </script>
        <script src="script.js"></script>
    </head>
    <body>
        <div id="wrapper">
            <p id="error-message"></p>
            <p id="success-message"></p>
            <form id="registration-form" method="post">
                <input type="text" placeholder="Account Name" name="nickname"></input>
                <input type="text" placeholder="Password" name="password"></input>
                <input type="text" placeholder="E-mail" name="email"></input>
                <button type="submit">Register</button>
            </form>
        </div>
    </body>
</html>

user.php的

<?php

class User{        
    //register method
    public function register($nickname, $password, $email){
        $result = array("success" => 0, "message" => "");
        //example validation
        if($nickname==123){
            $result["message"] = "Could not register.";
        }
        else{
            //add user to the database
            //sql code here
            $result["success"] = 1;
            $result["message"] = "Registration successful.";
        }
        return $result;
    }
}

?>

registerProcessing.php

<?php
    require_once 'User.php';

    $user = new User();

    echo json_encode($user->register($_POST["nickname"], $_POST["password"], $_POST["email"]));
?>

的script.js

$(function() {

    $("#wrapper").on("submit", "#registration-form", function(e){
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "registerProcessing.php",
            data: $("#registration-form").serialize(),
            dataType: "json",
            success: function(result){
                if(result.success){
                    $("#success-message").html(result.message);
                }
                else{
                    $("#error-message").html(result.message);
                }
            }
        });
    });

});

2 个答案:

答案 0 :(得分:1)

正确的方法是研究ajax回调和已经制作成javascript / jQuery的状态并与它们一起玩。如果您需要更高级的功能,则需要send by backend某些标头强制某些状态可由正确的回调或自定义的回调处理。

您可以使用主要使用主要js库/框架处理的HTTP status codes(甚至是XMLHttpRequest pure itself that follow the HTTP pattern of codes, see MDN)。

直接回答你的问题,不,不对。您的ajax使用主回调(成功)并按返回值处理。它起作用,但缺乏关于回调的最佳实践,就像我上面提到的那样。

您可以做的一个例子:

$("#wrapper").on("submit", "#registration-form", function(e){
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "registerProcessing.php",
            data: $("#registration-form").serialize(),
            dataType: "json",
            success: function(result){
                $("#success-message").html(result.message);
            },
            error: function(result){
               $("#error-message").html(result.message);
            }
        });
    });

$("#wrapper").on("submit", "#registration-form", function(e){
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "registerProcessing.php",
            data: $("#registration-form").serialize(),
            dataType: "json",
            statusCode: {
              404: function() {
                 $("#error-message").html('NOT FOUND');
              },
             200: function(result) {
                $("#success-message").html(result.message);
             },
             500: function(result) {
                $("#error-message").html(result.message);
             }
           }
        });
    });

或者使用XMLHTTPREQUEST示例:

var request;
if(window.XMLHttpRequest)
    request = new XMLHttpRequest();
else
    request = new ActiveXObject("Microsoft.XMLHTTP");
request.open('GET', 'http://www.mozilla.org', false);
request.send(); // there will be a 'pause' here until the response to come.
// the object request will be actually modified
switch (request.status){
   case 404:
    break;
   case 500:
    break;
   case 200;
   break
}

答案 1 :(得分:1)

要添加@ CarlosAlexandre关于使用HTTP状态代码处理错误的答案:为了转换到OOP编程,您应该意识到使用异常处理来传递错误条件正成为最佳实践。这可能是这样的:

<强> user.php的

class User{        
    //register method
    public function register($nickname, $password, $email){
        //example validation
        if($nickname==123){
            throw new InvalidArgumentException('Invalid username');
        }

        //add user to the database
        //sql code here
    }
}

<强> registerProcessing.php

require_once 'User.php';

$user = new User();
$response = array(
    'success' => 0,
    'message' => 'Unknown error',
);

try {
    $user->register($_POST["nickname"], $_POST["password"], $_POST["email"]);

    $response['success'] = 1;
    $response['message'] = 'Registration successful.';
} catch (Exception $exception) {
    $response['message'] = $exception->getMessage();
}

echo json_encode($response);