Не могу понять как сформировать AJAX запросы?
Я написал таблицу под ней кнопка которая в свою очередь вызывает форму :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mine_contract</title> <link href="new.css" rel="stylesheet"/> <script src="script.js" defer></script> </head> <body> <table id="m_info"> <tr> <th>№ п/п</th> <th>Номер</th> <th>Название</th> <th>Адрес</th> <th>ФИО директора</th> <th>Номер телефона директора</th> </tr> <tr> <td><p>1</p></td> <td><p>1</p></td> <td><p>Пример названия</p></td> <td><p>Пример адреса</p></td> <td><p>ФИО директора</p></td> <td><p>+79490000000</p></td> </tr> </table> <div class="popup"> <div class="popup__container"> <div class="popup__wrapper"> <div id="wrapper"> <form action="perem.php" method="POST" class="form"> <button class="exit" class="exit" id="closeButton" onclick="delRow()">х</button> <div class="string"> <label for="id">№ П/П:</label> <input type="number" id="id" name="id" required> </div> <div class="string"> <label for="N_m">Номер :</label> <input type="text" id="N_m" name="n_m" placeholder="Например" required> </div> <div class="string"> <label for="name">Название:</label> <input type="text" id="name" name="name_m" placeholder="Например " required> </div> <div class="string"> <label for="Adr">Адрес:</label> <input type="text" id="Adr" name="Adr_m" placeholder="Например г.Название города, р.Район, ул.Улица"> </div> <div class="string"> <label for="Full_name">ФИО директора :</label> <input type="text" id="Full_name" name="director" placeholder="Например Иванов Иван Иванович" required> </div> <div class="string"> <label for="Phone">Номер телефона :</label> <input type="tel" id="Phone" name="Phone_number" placeholder="Например +00000000000" required> </div> <button type="submit" id="contact" value="Отправить в БД"> </form> </div> </div> </div> </div> <button id="button" class="button" onclick="addRow()">Открыть форму</button> </body> </html> |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mine_contract</title> <link href="new.css" rel="stylesheet"/> <script src="script.js" defer></script> </head> <body> <table id="m_info"> <tr> <th>№ п/п</th> <th>Номер</th> <th>Название</th> <th>Адрес</th> <th>ФИО директора</th> <th>Номер телефона директора</th> </tr> <tr> <td><p>1</p></td> <td><p>1</p></td> <td><p>Пример названия</p></td> <td><p>Пример адреса</p></td> <td><p>ФИО директора</p></td> <td><p>+79490000000</p></td> </tr> </table> <div class="popup"> <div class="popup__container"> <div class="popup__wrapper"> <div id="wrapper"> <form action="perem.php" method="POST" class="form"> <button class="exit" class="exit" id="closeButton" onclick="delRow()">х</button> <div class="string"> <label for="id">№ П/П:</label> <input type="number" id="id" name="id" required> </div> <div class="string"> <label for="N_m">Номер :</label> <input type="text" id="N_m" name="n_m" placeholder="Например" required> </div> <div class="string"> <label for="name">Название:</label> <input type="text" id="name" name="name_m" placeholder="Например " required> </div> <div class="string"> <label for="Adr">Адрес:</label> <input type="text" id="Adr" name="Adr_m" placeholder="Например г.Название города, р.Район, ул.Улица"> </div> <div class="string"> <label for="Full_name">ФИО директора :</label> <input type="text" id="Full_name" name="director" placeholder="Например Иванов Иван Иванович" required> </div> <div class="string"> <label for="Phone">Номер телефона :</label> <input type="tel" id="Phone" name="Phone_number" placeholder="Например +00000000000" required> </div> <button type="submit" id="contact" value="Отправить в БД"> </form> </div> </div> </div> </div> <button id="button" class="button" onclick="addRow()">Открыть форму</button> </body> </html>
Как сделана кнопка вызова формы:
const button = document.querySelector('#button'); const closeButton = document.querySelector('#closeButton'); const form = document.querySelector('.form'); const popup = document.querySelector('.popup'); button.addEventListener('click', () => { form.classList.add('open'); popup.classList.add('popup_open'); }); closeButton.addEventListener('click', () => { form.classList.remove('open'); popup.classList.remove('popup_open'); }); |
const button = document.querySelector('#button'); const closeButton = document.querySelector('#closeButton'); const form = document.querySelector('.form'); const popup = document.querySelector('.popup'); button.addEventListener('click', () => { form.classList.add('open'); popup.classList.add('popup_open'); }); closeButton.addEventListener('click', () => { form.classList.remove('open'); popup.classList.remove('popup_open'); });
Так же есть API(или как это правильно называется) на Node.js
const Pool = require('pg').Pool const pool = new Pool({ user: 'мои данные', host: 'мои данные', database: 'мои данные', password: 'мои данные', port: 5432, }) const getMineinfo = (request, response) => { pool.query('SELECT * FROM mine_info', (error, results) => { if (error) { throw error } response.status(200).json(results.rows) }) } const createRow = (request, response) => { const { n_mine, name_mine, adress, full_name_of_direcor, phone_number } = request.body pool.query('INSERT INTO mine_info (n_mine, name_mine, adress, full_name_of_direcor, phone_number) VALUES ($1, $2, $3, $4, $5) RETURNING *', [n_mine, name_mine, adress, full_name_of_direcor, phone_number], (error, results) => { if (error) { throw error } response.status(201).send(`User added with ID: ${results.rows[0].id}`) }) } module.exports = { getMineinfo, createRow, }//переменные из другого файла |
const Pool = require('pg').Pool const pool = new Pool({ user: 'мои данные', host: 'мои данные', database: 'мои данные', password: 'мои данные', port: 5432, }) const getMineinfo = (request, response) => { pool.query('SELECT * FROM mine_info', (error, results) => { if (error) { throw error } response.status(200).json(results.rows) }) } const createRow = (request, response) => { const { n_mine, name_mine, adress, full_name_of_direcor, phone_number } = request.body pool.query('INSERT INTO mine_info (n_mine, name_mine, adress, full_name_of_direcor, phone_number) VALUES ($1, $2, $3, $4, $5) RETURNING *', [n_mine, name_mine, adress, full_name_of_direcor, phone_number], (error, results) => { if (error) { throw error } response.status(201).send(`User added with ID: ${results.rows[0].id}`) }) } module.exports = { getMineinfo, createRow, }//переменные из другого файла
//другой файл const express = require('express') const bodyParser = require('body-parser') const db = require('./queries') const app = express() const port = 3000 app.use(bodyParser.json()) app.use( bodyParser.urlencoded({ extended: true, }) ) app.get('/mine_info', db.getMineinfo) app.post('/mine_info', db.createRow) app.listen(port, () => { console.log(`App running on port ${port}.` )}) |
//другой файл const express = require('express') const bodyParser = require('body-parser') const db = require('./queries') const app = express() const port = 3000 app.use(bodyParser.json()) app.use( bodyParser.urlencoded({ extended: true, }) ) app.get('/mine_info', db.getMineinfo) app.post('/mine_info', db.createRow) app.listen(port, () => { console.log(`App running on port ${port}.` )})
При помощи Node.js я получаю данные из своей базы данных в виде JSON по ссылке https://мои-данные:3000/mine_info. Я хочу что бы данные из формы брались и записывались в базу данных, после чего выводились в овую строку уже существующей таблицы.
Дополнительно:
В чем именно проблема?
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы сформировать AJAX запросы, необходимо использовать JavaScript. AJAX (Asynchronous JavaScript and XML) позволяет обмениваться данными между браузером и сервером без перезагрузки страницы. Вот пример простого AJAX запроса с использованием jQuery:
$.ajax({ url: "example.php", type: "POST", data: { name: "John", location: "Boston" }, success: function(response) { console.log(response); }, error: function(xhr, status, error) { console.error(error); } });
В данном примере мы отправляем POST запрос на сервер, передавая объект с данными { name: "John", location: "Boston" }. При успешном выполнении запроса, данные, которые вернул сервер, будут выведены в консоль браузера. В случае ошибки, будет выведено сообщение об ошибке.
Если вы хотите отправить GET запрос, вместо "type: 'POST'" используйте "type: 'GET'". Также можно добавить дополнительные параметры, такие как "contentType" для указания типа передаваемых данных, "dataType" для указания ожидаемого типа данных в ответе, и другие.
Не забудьте, что при использовании AJAX запросов важно учитывать безопасность и обработку ошибок. Всегда проверяйте данные, которые приходят с сервера, и не доверяйте им без проверки.