Скрывать div в AJAX

133

17 августа 2018, 07:10

Есть код регистрации с помощью AJAX . По условию должно выводить #div1 если логин и пароль не правильно введены ,а "#result1","#result2" скрывать и наоборот если все правильно введено то "#result1","#result2" показывается ,а #div1 скрывается . И по идее должно выводить через JSON echo "{'ID'='1','name'='Name'}"; 1 и Name

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>титулка</title>
</head>
<script type="text/javascript">  
function myEvent(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function(){ 
if (xmlhttp.readyState==4 && xmlhttp.status==200){ 
var ID   = xmlhttp.responseText; // ID
var Name = xmlhttp.responseText; // Name
if (ID!="0") {
    document.getElementById("result1").innerHTML= ID;
    document.getElementById("result2").innerHTML= Name;
    ("#result1","#result2").hide(); // Скрывает div1.
   ("#div1").show(); // Показывает div2.
}
}
}
var val_x = document.getElementById("n111").value; 
var val_y = document.getElementById("n222").value; 

xmlhttp.open("GET","connect.php?n111="+val_x+"&n222="+val_y,true);
xmlhttp.send();
}
</script>                                                  
</head>
<body>
<div id="div1">
<p id="status"></p>
Ввести текст
<p>login <input id="n111" name="log"></p>
<p>passw <input id="n222" name="pas"></p>
<input type="button" value="Передать данные" onclick="myEvent()" />
<br><br><br>
</div>
<div id="result1">0</div>
<div id="result2">0</div>
</body>
</html>

connect.php

<?php
if($_GET['n111']=="tech_user"){
    if($_GET['n222']=="1234") {
    echo "{'ID'='1','name'='Name'}";
    }
}else{
    echo "{'ID'='0','name'='xxxx'}";
}

?>

Answer 1

Оххх... Я если честно не знаю с чего начать. Первые чувства: как на собеседовании: найдите что не так в этом коде и поправьте. А косяков тут куча, начиная от двух </head>, ("#result1","#result2"), инпуты без формы, var ID = xmlhttp.responseText; и тоже самое с NAME (это вообще как по вашему должно работать?) и заканчивая вашими словами: ...если все правильно введено то "#result1","#result2" показывается ,а #div1 скрывается ... - хотя по коду все иначе.

Даже в connect.php - косяки, echo "{'ID'='1','name'='Name'}" - это не JSON формат. Есть ситуации где connect ничего не вернет - такого не должно быть.

Давайте я просто оставлю в Вашем стиле рабочий пример:

Первый файл:

<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>титулка</title>
        <style type="text/css">
            .hide-block {
                display: none;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript">
            function myEvent() {
                $.ajax({
                    url: "connect.php?n111=" + $('#n111').val() + "&n222=" + $('#n222').val(),
                    success: function (data) {
                        var NEW_JSON = JSON.parse(data);
                        var ID = NEW_JSON.ID;
                        var Name = NEW_JSON.name;
                        if (ID != "0") {
                            $('#result1').html(ID);
                            $('#result2').html(Name);
                            $("#result1, #result2").show();
                            $("#div1").hide();
                        }else{
                            $("#status").show();
                        }
                    }
                });
            }
        </script>
    </head>
<body>
    <div id="div1">
        <p id="status" class="hide-block">Неправильно!</p>
        Ввести текст
        <p>login <input id="n111" name="log"></p>
        <p>passw <input id="n222" name="pas"></p>
        <input type="button" value="Передать данные" onclick="myEvent()" />
        <br><br><br>
    </div>
    <div id="result1" class="hide-block">0</div>
    <div id="result2" class="hide-block">0</div>
</body>
</html>

connect.php

<?php
if (($_GET['n111'] == "tech_user") AND ($_GET['n222'] == "1234")) {
    echo json_encode(array('ID' => '1', 'name' => 'Name'));
} else {
    echo json_encode(array('ID' => '0', 'name' => 'xxxx'));
}