Компилятор не определяет ajax, как решить?

Question

[Никита]

Хотел отправить данные с помощью AJAX в PHP, но компилятор ругается: $ajax is not defined
Подскажите, пожалуйста, как исправить?

btnSubmit.addEventListener("click", () => {
   let fullName = itemInputs[0].value,
       phone = itemInputs[1].value,
       street = itemInputs[2].value,
       houseNumber = itemInputs[3].value;
       console.log(fullName,phone,street,houseNumber);
});


$ajax({
  url: "php/data_processing.php",
  type: "POST",
  cache: false,
  data: {"fullName": fullName, "phone": phone, "street": street, "houseNumber": houseNumber },
  dataType: "html",
  success: function () {
    console.log("Вывод чипсов");
  }
});

Query подключил

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="script/external.js"></script>

Answer 1

[Сергей Котов]

оберни код в Ready function

$( document ).ready(function() {
    // ваш скрипт
});

то есть

$(document).ready(function() {
    btnSubmit.addEventListener("click", () => {
   let fullName = itemInputs[0].value,
       phone = itemInputs[1].value,
       street = itemInputs[2].value,
       houseNumber = itemInputs[3].value;
       console.log(fullName,phone,street,houseNumber);
});


$ajax({
  url: "php/data_processing.php",
  type: "POST",
  cache: false,
  data: {"fullName": fullName, "phone": phone, "street": street, "houseNumber": houseNumber },
  dataType: "html",
  success: function () {
    console.log("Вывод чипсов");
  }
});
});

Comments

[Никита]

Сделал, так же, ругается на jqyery min, который на сервере гугл и снова на $ajax


Вот полный JS код:
Может опять где-то ошибся?

const itemInputs = document.querySelectorAll(".item-input"),
      btnSubmit = document.querySelector(".btn-submit");

function formValidator() {

  let correctInputs = 0;

  for (let el = 0; el < itemInputs.length; el++) {

    if ((el == 2 || el == 0) && itemInputs[el].value.match(/[А-я]/)) {
      correctInputs++;
    }
    if (el == 1 && +itemInputs[el].value.match(/\d{11}/)) {
      correctInputs++;
    }
    if (el == 3 && (+itemInputs[el].value < 300 && +itemInputs[el].value > 0)) {
      correctInputs++;
    }
  }
  return correctInputs == 4 ? true : false;
}

document.querySelector(".form").addEventListener("change", () => {
  let correctInputs = 0;
  for (let i = 0; i < itemInputs.length; i++) {
        if (itemInputs[i].value.length != 0) {
          correctInputs++;
        }
  }
  if (correctInputs == 4) {
     if (formValidator() == true) {
      btnSubmit.classList.add("btn-active");
      btnSubmit.removeAttribute("disabled");
     }
  }
});

function resetForm() {

  document.querySelector('.form').reset();
  btnSubmit.classList.remove("btn-active");
  btnSubmit.setAttribute("disabled", "");

}

$(document).ready(function () {
  btnSubmit.addEventListener("click", () => {
    let fullName = itemInputs[0].value,
      phone = itemInputs[1].value,
      street = itemInputs[2].value,
      houseNumber = itemInputs[3].value;
    console.log(fullName, phone, street, houseNumber);
  });

  $ajax({
    url: "php/data_processing.php",
    type: "POST",
    cache: false,
    data: { "fullName": fullName, "phone": phone, "street": street, "houseNumber": houseNumber },
    dataType: "html",
    success: function () {
      console.log("Вывод чипсов");
    }
  });
});

[Сергей Котов]

SonyFan23, весь код код где вызывается функция и отправляется запрос со знаком $ должен быть в $(document).ready(function(){
//ваш весь jq код
});

[Никита]

Сергей Котов, а сейчас разве не так?

[Alex Plotnikov]

SonyFan23, я же 18 часов назад написал в чем дело, $ajax неправильно, правильно $.ajax , через точку!

Нет такого объекта $ajax в принципе, есть объект $ и у него есть функция ajax() , вызывается так $.ajax!

[Сергей Котов]

Alex Plotnikov, ой точна бл

[Никита]

Alex Plotnikov, да, спасибо!
Только теперь ругается на fullName как будто переменная не объявлена:

data: { "fullName": fullName, "phone": phone, "street": street, "houseNumber": houseNumber }

хотя fullName объявлена.
Попробовал перенести

const itemInputs = document.querySelectorAll(".item-input"),
      btnSubmit = document.querySelector(".btn-submit");

itemInputs - это все инпуты на странице
внутрь $(document).ready(function () {
Проблема та же

$(document).ready(function () {
  btnSubmit.addEventListener("click", () => {
    let fullName = itemInputs[0].value,
      phone = itemInputs[1].value,
      street = itemInputs[2].value,
      houseNumber = itemInputs[3].value;
    console.log(fullName, phone, street, houseNumber);
  });

  $.ajax({
    url: "php/data_processing.php",
    type: "POST",
    cache: false,
    data: { "fullName": fullName, "phone": phone, "street": street, "houseNumber": houseNumber },
    dataType: "html",
    success: function () {
      console.log("Вывод чипсов");
    }
  });
});

PHP, в который идет отправка:

if($_SERVER['REQUEST_METHOD'] == 'POST') { // была ли отправлены форма 
  $fullName = $_POST['fullName'];
  $phone = $_POST['phone'] ;
  $street = $_POST['street'];
  $houseNumber = $_POST['houseNumber'];

  echo $full_name, $phone,  $street , $house_number;

  }

Подскажи, пожалуйста, что не так

[Сергей Котов]

SonyFan23,
кавычки не нужны при передачи параметров

$.ajax({
    url: "php/data_processing.php",
    type: "POST",
    cache: false,
    data: { fullName: fullName, phone: phone, street: street, houseNumber: houseNumber },
    dataType: "html",
    success: function () {
      console.log("Вывод чипсов");
    }
  });

[Никита]

Сергей Котов, все равно ругается

[Сергей Котов]

SonyFan23, покажи скрин ошибки

[Никита]

Сергей Котов,

[Сергей Котов]

SonyFan23, fullName в консоль выводится? попробуй без camelCase

[Alex Plotnikov]

пользуйся console.log и смотри что в объектах, тебе интерпретатор прямо пишет, что не так.

[Alex Plotnikov]

Сергей Котов, зачем ему пробовать без camelCase если он в camelCase определяет переменные? что за совет из разряда "в бубен постучи" ?

[Alex Plotnikov]

SonyFan23, смотри внимательно свой код, когда происходит отправка?

отправка происходит на ready, а переменные заполняются на click.... ясен перень что на момент ready переменные еще is not defined

[Сергей Котов]

Alex Plotnikov, скорее всего эта и за let и имеет ограниченую область видемости

[Никита]

Alex Plotnikov, то есть надо сделать примерно так?

btnSubmit.addEventListener("click", () => {

  let fullName = itemInputs[0].value,
    phone = itemInputs[1].value,
    street = itemInputs[2].value,
    houseNumber = itemInputs[3].value;

  $(document).ready(function () {

    $.ajax({
      url: "php/data_processing.php",
      type: "POST",
      cache: false,
      data: { fullName: fullName, phone: phone, street: street, houseNumber: houseNumber },
      dataType: "html",
      success: function () {
        console.log("Вывод чипсов");
      }
    });
  });
});

[Сергей Котов]

Никита, нет

$(document).ready(function(){
btnSubmit.addEventListener("click", () => {
   var fullName = itemInputs[0].value,
       phone = itemInputs[1].value,
       street = itemInputs[2].value,
       houseNumber = itemInputs[3].value;
       console.log(fullName,phone,street,houseNumber);
});


$.ajax({
  url: "php/data_processing.php",
  type: "POST",
  cache: false,
  data: {ajax: 'yes',
            fullName: fullName, 
            phone: phone, 
            street: street, 
            houseNumber: houseNumber 
   },
  success: function (data) {
    console.log(data);
  }
});
});

if(isset($_POST['ajax'])) {
 echo $_POST['fullName'], $_POST['phone'] , $_POST['street'], $_POST['houseNumber'];
 echo 'все норм!';
  }

[Никита]

Сергей Котов, сыпятся ошибки: что с var, что с let.
А если так:

btnSubmit.addEventListener("click", () => {
  $(document).ready(function () {
    let fullName = itemInputs[0].value,
      phone = itemInputs[1].value,
      street = itemInputs[2].value,
      houseNumber = itemInputs[3].value;
    console.log(fullName, phone, street, houseNumber);

    $.ajax({
      url: "php/data_processing.php",
      type: "POST",
      cache: false,
      data: {
        ajax: 'yes',
        fullName: fullName,
        phone: phone,
        street: street,
        houseNumber: houseNumber
      },
      success: function (data) {
        console.log(data);
      }
    });
  });
});

То AJAX частично работает:

53 строка - это console.log(fullName, phone, street, houseNumber);
67 строка - это
console.log(data);

[Сергей Котов]

Никита,

$(document).ready(function(){
btnSubmit.addEventListener("click", () => {
   var fullName = itemInputs[0].value,
       phone = itemInputs[1].value,
       street = itemInputs[2].value,
       houseNumber = itemInputs[3].value;
       console.log(fullName,phone,street,houseNumber);
});


$.ajax({
  url: "php/data_processing.php",
  type: "POST",
  cache: false,
  data: {ajax: 'yes',
            name: fullName, 
            phone: phone, 
            street: street, 
            hnumber: houseNumber 
   },
  success: function (data) {
    console.log(data);
  }
});
});

if(isset($_POST['ajax'])) {
 echo $_POST['name'], $_POST['phone'] , $_POST['street'], $_POST['hnumber'];
  }

[Сергей Котов]

Никита, закономерность лога в том где CamelCase там не работает написал все в нижнем регистре

[Никита]

Сергей Котов, сомневаюсь, что с camelCase, что без него ошибки:
Вот твой вариант:

$(document).ready(function () {
  btnSubmit.addEventListener("click", () => {
    var fullname = itemInputs[0].value,
      phone = itemInputs[1].value,
      street = itemInputs[2].value,
      housenumber = itemInputs[3].value;
    console.log(fullname, phone, street, housenumber);
  });


  $.ajax({
    url: "php/data_processing.php",
    type: "POST",
    cache: false,
    data: {
      ajax: 'yes',
      fullname: fullname,
      phone: phone,
      street: street,
      housenumber: housenumber
    },
    success: function (data) {
      console.log(data);
    }
  });
});

И что выдает:


А вот мой вариант:

btnSubmit.addEventListener("click", () => {
  $(document).ready(function () {
    let fullname = itemInputs[0].value,
      phone = itemInputs[1].value,
      street = itemInputs[2].value,
      housenumber = itemInputs[3].value;
    console.log(fullname, phone, street, housenumber);

    $.ajax({
      url: "php/data_processing.php",
      type: "POST",
      cache: false,
      data: {
        ajax: 'yes',
        fullname: fullname,
        phone: phone,
        street: street,
        housenumber: housenumber
      },
      success: function (data) {
        console.log(data);
      }
    });
  });
});

И уже без camelCase и результат такой же как и с ним:

[Никита]

Alex Plotnikov, у вас случайно нет никаких мыслей на этот счет?

[Сергей Котов]

Никита, странно по каким то причинам сервер не выплевыевает fullname и housenumber. Нужно покапаться в post

btnSubmit.addEventListener("click", () => {
  $(document).ready(function () {
    let fullname = itemInputs[0].value,
      phone = itemInputs[1].value,
      street = itemInputs[2].value,
      housenumber = itemInputs[3].value;
    console.log(fullname, phone, street, housenumber);

    $.ajax({
      url: "php/data_processing.php",
      type: "POST",
      cache: false,
      data: {
        ajax: 'yes',
        fullname: fullname,
        phone: phone,
        street: street,
        housenumber: housenumber
      },
      success: function (data) {
         document.write(data);
      }
    });
  });
});

if(isset($_POST['ajax'])) {
 print_r($_POST);
//или вардамп 
  }

[Никита]

Сергей Котов, все-таки, вы оказались правы, дело в camelCase. Я просто забыл PHP сохранить. И работает этот вариант:

btnSubmit.addEventListener("click", () => {
  $(document).ready(function () {
    let fullname = itemInputs[0].value,
      phone = itemInputs[1].value,
      street = itemInputs[2].value,
      housenumber = itemInputs[3].value;
    console.log(fullname, phone, street, housenumber);

    $.ajax({
      url: "php/data_processing.php",
      type: "POST",
      cache: false,
      data: {
        ajax: 'yes',
        fullname: fullname,
        phone: phone,
        street: street,
        housenumber: housenumber
      },
      success: function (data) {
        console.log(data);
      }
    });
  });
});

Большое спасибо за помощь!

[Alex Plotnikov]

Никита, уже лучше

[Alex Plotnikov]

Сергей Котов, вот скажи, когда сработает ajax в твоем коде?

[Alex Plotnikov]

Сергей Котов,

btnSubmit.addEventListener("click", () => {
  $(document).ready(function () {

что это? вы вообще понимаете что тут происходит?

[Alex Plotnikov]

Никита, мысли одни, вы городите то, что не понимаете, что вы, что Котов не понимает, читайте документацию, готовый вариант писать на такие простые задачи, комильфо....

[Сергей Котов]

Alex Plotnikov, я не знаю никогда так не делал. но автор вопроса говорит что так работает. ready function отвечает за выполнения скриптов после того как весь DOM загрузится. так что я хз лично ему jQuery нужен был для ajax который и находится в контейнере ready.

[Alex Plotnikov]

Сергей Котов, просто $_post выведите, без условий

[Alex Plotnikov]

Никита, этот вариант неправильный, вы ждете клика, а потом еще ready , неужели так сложно понять что происходит в простейшем коде?

[Сергей Котов]

Alex Plotnikov, лол проверка не обходима

[Сергей Котов]

Alex Plotnikov, да я не понимаю может покажите как надо?

[Alex Plotnikov]

Сергей Котов, ready это не проверка!!!! это СОБЫТИЕ ! учите мат часть

[Alex Plotnikov]

Сергей Котов, сначала ready, по этому событию вешаем других слушателей, но никак не наоборот)))

[Alex Plotnikov]

ajax нужно вызывать по событию click, а у вас там в ваших простынях он вызывается после ready

[Сергей Котов]

Alex Plotnikov, блин я не хочу сдесь срач разводит я помог как смог. Скиньте более корректный код и дело с концом.

[Alex Plotnikov]

Сергей Котов, корректный код вам мамка в рот положит, разжеванным, останется только скопипастить, так не интересно)

[Сергей Котов]

Alex Plotnikov, в общем если весь код в Ready поместить то у него переменные not defined, я хз думал и за let, потому что у него ограниченая область видемости. пробовал var. тоже самое но имено и за такой говно конструкции все заработало

[Никита]

Alex Plotnikov, понятно, только вот как перестроить код - я не знаю, код Сергея не работает нормально

[Alex Plotnikov]

Сергей Котов, еще раз, помещаем весь код в ready, но !!! когда происходит вызов ajax? неужели не видно? не стоит ли его (вызов ajax) перенести внутрь обработки события click?

сначала ready, по нему вешаем событие на click, по click парсим значения и отправляем ajax! У вас же по ready было вешание события на click и далее, даже без тригера события клик была отправка ajax!, естественно там не будет переменных, т.к. события click еще не наступило, а ready наступило!

как вы так делаете, вы не видите очередность выполнения кода?

[Сергей Котов]

Alex Plotnikov, ааааааааа блииин вот точна я дурак сори

[Сергей Котов]

Alex Plotnikov, щя

[Alex Plotnikov]

$(document).ready(function () {
 //ready event fired, document ready

  btnSubmit.addEventListener("click", () => {
   //event listener on btnSubmit fires click event
  

   // Set Variables 
    var fullname = itemInputs[0].value,
      phone = itemInputs[1].value,
      street = itemInputs[2].value,
      housenumber = itemInputs[3].value;
    console.log(fullname, phone, street, housenumber);
    
    //Send aajax
    $.ajax({
    url: "php/data_processing.php",
    type: "POST",
    cache: false,
    data: {
      ajax: 'yes',
      fullname: fullname,
      phone: phone,
      street: street,
      housenumber: housenumber
    },
    success: function (data) {
      console.log(data);
    }
  }); 

   
  });

//previous place of ajax
  console.log('print imediately after ready events fired')

});

надеюсь у всех вопросы отпали теперь)

[Сергей Котов]

Alex Plotnikov,

$(document).ready(function () {
  btnSubmit.addEventListener("click", () => {
    let fullname = itemInputs[0].value,
      phone = itemInputs[1].value,
      street = itemInputs[2].value,
      housenumber = itemInputs[3].value;
      $.ajax({
           url: "php/data_processing.php",
           type: "POST",
           cache: false,
           data: {
              ajax: 'yes',
              fullname: fullname,
              phone: phone,
              street: street,
              housenumber: housenumber
           },
           success: function (data) {
              console.log(data);
           }
       });
  });
});

[Alex Plotnikov]

Сергей Котов, ну конечно!

Answer 2

[Alex Plotnikov]

$.ajax

p.s. и это не компилятор, интерпретатор