Как через ajax получить данные из php файла?

Question

[Антон]

Есть js файл с fetch запросом:

...
let full_name = document.querySelector('input[name="name"]').value,
    login = document.querySelector('input[name="login"]').value,
    email = document.querySelector('input[name="email"]').value,
    password = document.querySelector('input[name="password"]').value,
    password_confirm = document.querySelector('input[name="password_confirm"]').value;
  function postData() {
    let formData = new FormData();
    formData.append('name',full_name);
    formData.append('login',login);
    formData.append('email',email);
    formData.append('password',password);
    formData.append('password_confirm',password_confirm);
    formData.append('filename',avatar);
    fetch('vendor/signup.php', {method: 'POST', body: formData})
.then()
.catch()
}
postData();

И фрагмент php кода:

$check_login = $DB->prepare("SELECT * FROM signin.signin WHERE login=?");
$check_login->execute([$login]);
$count = $check_login->rowCount();
if($count>0){
    $responce = [
        "status"=>false,
        "type"=>1,
        "message"=>'Логин занят',
        "fields"=>['login']   
];
echo json_encode($responce);
die();
}

Как мне получить $responce через ajax на чистом js, чтобы с ним уже работать?
Пример jq кода, в котором выделяется input с ошибкой:

$.ajax({
            url: 'vendor/signup.php',
        type: 'POST',
        dataType: 'json',
        processData: false,
        contentType: false,
        cache: false,
        data: formData,
        success (data) {
                if(data.status) {
                    document.location.href = 'index.php';
                    $('.msg').removeClass('none').text(data.message);
                }else {
                    if(data.type === 1){
                        data.fields.forEach(function(field){
                            $(`input[name="${field}"]`).addClass('error');
                        });
                    }
                    $('.msg').removeClass('none').text(data.message);
                }
            }
        });

Или лучше сразу делать валидацию через js?

Comments

[Пашенька]

Для начала в success обработчике убедиться, что пришёл джейсан:

try {
    data = JSON.parse(data);
} catch(e) {
    return console.error(e);
}

console.log(data.message); // for example

[Антон]

Пашенька, всё получилось, спасибо.

fetch('vendor/signup.php', {method: 'POST', body: formData}).then(response => {
      let json = response.json();
      json.then(data => {
        data.fields.forEach(field =>{
          console.log(field);
        })
      })
    })

Answer 1

[Сергей]

Ничего не понял что тебе нужно. У тебя же и так вроде валидация идет, зачем тебе что-то менять?

Comments

[Антон]

То через jq, а я просто хотел сделать на чистом js.Уже разобрался

fetch("vendor/signup.php", { method: "POST", body: formData })
      .then((response) => {
        let json = response.json();
        json.then((data) => {   
            if (data.status) {
              document.location.href = "login.php";
              document.querySelector(".msg").classList.remove("none");
              document.querySelector(".msg").textContent = data.message;
            } else {
              if(data.type){
                console.log(data);
                data.fields.forEach((field) => {
                 document
                .querySelector(`input[name="${field}"]`)
                .classList.add("error");
              });
              }    
            }
            document.querySelector(".msg").classList.remove("none");
            document.querySelector(".msg").textContent = data.message;
        });
      })
      .catch((err) => {
        console.log(err);
      });

Answer 2

[FanatPHP]

Как через ajax получить данные из php файла?

Наверное, их надо послать?