Javascript 使用AJAX向用户显示样式化验证消息_Javascript_Php_Jquery_Ajax

Javascript 使用AJAX向用户显示样式化验证消息

javascript php jquery ajax

Javascript 使用AJAX向用户显示样式化验证消息,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,我不熟悉AJAX和jQuery，只是为了测试，我创建了这个简单的代码。当用户输入他们的名和姓时，会显示一条消息，上面写着感谢您正确输入所有内容蓝色颜色，当用户忘记输入他们的名字和姓氏时，它会显示一个错误，显示你没有在红色颜色或类似颜色中输入任何内容，是的，我知道这听起来很愚蠢，但这只是测试。。。这是我的代码：更改\u name.php： index.php jQuery AJAX .留言{ 字体系列：无衬线；颜色：#00AAE9；字体大小：16px； } .错误{ 字体系列：无衬线；颜

我不熟悉AJAX和jQuery，只是为了测试，我创建了这个简单的代码。当用户输入他们的名和姓时，会显示一条消息，上面写着

感谢您正确输入所有内容蓝色颜色，当用户忘记输入他们的名字和姓氏时，它会显示一个错误，显示你没有在红色颜色或类似颜色中输入任何内容，是的，我知道这听起来很愚蠢，但这只是测试。。。这是我的代码：
更改\u name.php：
index.php

jQuery AJAX
.留言{
字体系列：无衬线；
颜色：#00AAE9；
字体大小：16px；
}
.错误{
字体系列：无衬线；
颜色：#E70000；
字体大小：16px；
}
结果:
名字：


姓氏：



我的问题是：显示
然后向其中添加一个类，这样就可以使用CSS对其进行样式设置，这是一种好的做法吗？有更好的方法吗？您不能返回一个JSON响应并使用JavaScript访问它吗
谢谢
 我正在为每一个需要服务器提供正确/错误结果的案例执行此操作，并附带一些信息：
PHP
// $_POST values are just examples
if ($_SERVER["REQUEST"]=="POST") {
    if (empty($_POST["username"]) || strlen($_POST["username"])<3) {
       echo json_encode(array("result"=>FALSE,"class"=>"fail","message"=>"Your username can't be empty or less than 3 characters"));
       return;
    }
    ...
    echo json_encode(array("result"=>TRUE,"class"=>"success","message"=>"Success");
    return;
}

/$\u POST值只是示例
如果（$_服务器[“请求”]=“发布”）{
如果（空（$_POST[“username”]）| | strlen（$_POST[“username”]）FALSE，“类”=>“失败”，“消息”=>“您的用户名不能为空或少于3个字符”）；
返回；
}
...
echo json_编码（数组（“结果”=>TRUE，“类”=>“成功”，“消息”=>“成功”）；
返回；
}

JS
$.ajax({
   type: 'POST', 
   url: 'ajax/change_name.php',
   data: $(this).serialize(),
   dataType: "JSON",            <----
   success: function(data) {
      $('.result').removeClass().addClass("."+data["class"]).html(data["message"]);
   }                                                 --^            ------^
});

$.ajax({
键入：“POST”，
url:'ajax/change_name.php'，
数据：$（this）.serialize（），
数据类型：“JSON”，在我看来，最好只检索文本和结果（错误或成功），并使用etc.addClass（'success/fail'）更改类
在接收元素时比下载包含类的新元素更有效。谢谢，就像我说的，我对jQuery和JavaScript一般都是新手，你能告诉我如何知道它是成功的还是失败的吗？jQuery有一个完整的插件，可以进行验证，而且它非常容易学习，没有理由重新创建轮子…@Akar，检查我的sim卡ple Approach它工作得很好！我把它清理了一点。而且在数据['class]
前面你并不真的需要
，所以它应该是addClass（'.+data['class']）
，而不是addClass（data['class']），谢谢！
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery AJAX</title>

    <style>
        .message {
            font-family: sans-serif;
            color: #00AAE9;
            font-size: 16px;
        }

        .error {
            font-family: sans-serif;
            color: #E70000;
            font-size: 16px;
        }
    </style>
</head>
<body>

    <form action="ajax/change_name.php" method="POST" id="nameChange">

        Result: <div class="result"></div>


        <label for="first_name">First Name:</label>
        <input type="text" name="first_name" id="first_name">
        <br>

        <label for="last_name">Last Name:</label>
        <input type="text" name="last_name" id="last_name">        
        <br>

        <input type="submit" name="change_name" value="Change" id="change_name">
    </form>


    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="js/init.js"></script>
</body>
</html>

// $_POST values are just examples
if ($_SERVER["REQUEST"]=="POST") {
    if (empty($_POST["username"]) || strlen($_POST["username"])<3) {
       echo json_encode(array("result"=>FALSE,"class"=>"fail","message"=>"Your username can't be empty or less than 3 characters"));
       return;
    }
    ...
    echo json_encode(array("result"=>TRUE,"class"=>"success","message"=>"Success");
    return;
}

$.ajax({
   type: 'POST', 
   url: 'ajax/change_name.php',
   data: $(this).serialize(),
   dataType: "JSON",            <----
   success: function(data) {
      $('.result').removeClass().addClass("."+data["class"]).html(data["message"]);
   }                                                 --^            ------^
});