0

const mysql = require("mysql2");

const connection = mysql.createConnection({
  host: "31.31.198.105",
  user: "u0998746_default",
  database: "u0998746_default",
  password: "Alliance2013"
});
connection.connect(function(err) {
  if (err) {
    return console.error("Ошибка: " + err.message);
  } else {
    console.log("Подключение к серверу MySQL успешно установлено");
  }
});
connection.query("SELECT * FROM users",
  function(err, results, fields) {
    console.log(err);
    console.log(results); // собственно данные
    console.log(fields); // мета-данные полей 
  });
connection.end();

Всем привет! Такой вопрос как можно вывести требуемые данные из БД. Есть список чекбоксов, в котором пользователь выбирает необходимые ему, выбранные чекбоксы отображаются в соседнем окне, и нужно на основе полей выбранных чекбоксов вытащить информацию из БД, по подходящим компаниям под эти требования

let checkBoxes = document.getElementsByTagName("input");
let aviableList = document.getElementById("aviable");
let selectedList = document.getElementById("selected");

[...checkBoxes].forEach(item => item.addEventListener("click", function() {
  if (!this.checked) {
    aviableList.appendChild(this.parentElement);
  } else {
    selectedList.appendChild(this.parentElement);
  }
}));
.container {
  display: flex;
  justify-content: center;
}

.Prokrutka,
.Prokrutka_out {
  flex: 0 1 auto;
}

.Prokrutka {
  margin-left: 15px;
  max-width: 35%;
  height: 400px;
  /* высота  блока */
  width: 400px;
  /* ширина  блока */
  background: #fff;
  /* цвет фона, белый */
  border: 1px solid #C1C1C1;
  /* размер и цвет границы блока */
  overflow-x: scroll;
  /* прокрутка по горизонтали */
  overflow-y: scroll;
  /* прокрутка по вертикали */
  padding-left: 15px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.Prokrutka_out {
  margin-left: 15px;
  max-width: 20%;
  height: 400px;
  /* высота  блока */
  width: 35%;
  /* ширина  блока */
  background: #fff;
  /* цвет фона, белый */
  border: 1px solid #C1C1C1;
  /* размер и цвет границы блока */
  overflow-x: scroll;
  /* прокрутка по горизонтали */
  overflow-y: scroll;
  /* прокрутка по вертикали */
  padding-left: 15px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

@media screen and (max-width: 800px) {
  .container {
    flex-flow: column nowrap;
  }
  .Prokrutka,
  .Prokrutka_out {
    align-self: center;
    max-width: 100%;
    width: 85%;
    height: auto;
    padding: 10px;
  }
}

#CompleteButtonOption {
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  cursor: pointer;
  margin-top: 10px;
  background-color: rgb(39, 175, 12);
  max-width: 80%;
  width: 500px;
}

.leadOut {
  text-align: center;
  padding-top: 20px;
  height: 300px;
  width: 610px;
  border: 2px solid #C1C1C1;
  margin: auto;
  margin-top: 20px;
}
<div class="all">
  <p id="choose">Выберите необходимые услуги для перевозки</p>
  <br>
  <div class="container">
    <div class="Prokrutka">
      <div id="aviable">
        <br>
        <div id="checkGroup1"><label class="box-label"><input type="checkbox" id="op1" onchange="Options()" data-num="Сборный груз"> Сборный груз</label></div>

        <!-- begin snippet: js hide: false console: true babel: false -->
        <div id="checkGroup16"><label class="box-label"><input type="checkbox" id="op16" onchange="Options()" data-num="Железнодорожные перевозки"> Железнодорожные перевозки</label></div>
        <div id="checkGroup17"><label class="box-label"><input type="checkbox" id="op17" onchange="Options()" data-num="Автоперевозки по России"> Автоперевозки по России</label></div>
        <div id="checkGroup18"><label class="box-label"><input type="checkbox" id="op18" onchange="Options()" data-num="Таможенное оформление"> Таможенное оформление</label></div>
        <div id="checkGroup19"><label class="box-label"><input type="checkbox" id="op13" onchange="Options()" data-num="Морские перевозки"> Морские перевозки</label></div>
        <div id="checkGroup20"><label class="box-label"><input type="checkbox" id="op14" onchange="Options()" data-num="Рефрижераторные перевозки"> Рефрижераторные перевозки</label></div>
        <div id="checkGroup21"><label class="box-label"><input type="checkbox" id="op15" onchange="Options()" data-num="Экспедирование"> Экспедирование</label></div>
        <div id="checkGroup22"><label class="box-label"><input type="checkbox" id="op16" onchange="Options()" data-num="Региональные перевозки"> Региональные перевозки</label></div>
        <div id="checkGroup23"><label class="box-label"><input type="checkbox" id="op17" onchange="Options()" data-num="Экспресс-доставка почтовыми вагонами"> Экспресс-доставка почтовыми вагонами</label></div>
        <div id="checkGroup24"><label class="box-label"><input type="checkbox" id="op18" onchange="Options()" data-num="От двери до двери"> От двери до двери</label></div>
      </div>
    </div>

    <br>

    <div class="Prokrutka_out">
      <div id="selected"> Вы выбрали:<br>
      </div>
    </div>
  </div>
  <br>

  <button id="CompleteButtonOption" onclick="Complete()">Подтвердить</button>

  <div class="leadOut">
    <p>Подходящие компании</p>
  </div>

1
  • И чего все удалено-то? Уже не нужен ответ?
    – u_mulder
    10 фев 2021 в 16:26

1 ответ 1

1

Как я понял из вопроса, тебе стоит разобраться в ajax-запросах. https://snipp.ru/jquery/ajax-jquery#link-post-zaprosy - я пользовался этой страницей для практических примеров

На самой странице, куда обращаешься ajaxом делаешь запрос к БД и возвращаешь нужный результат.

P.s. для корректной работы функции должна быть подключена jQuery

2
  • а зачем jQuery? Нельзя на JavaScript? 10 фев 2021 в 15:59
  • @МихаилКамахин, можно и на чистом js, но чтобы работал тот пример, который я приложил в ссылке, нужно подключение jQuery
    – Andinevsky
    10 фев 2021 в 16:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.