Случайный вопрос

Как отображать данные SQL в HTML в виде таблицы с помощью AJAX JQuery?

0

У меня есть некоторые данные, хранящиеся в файле SQL, и я хочу отображать данные в HTML в виде таблицы с AJAX JQuery. Когда я их проверяю, данные получаются нормально, но я не понимаю, как я могу отображать данные в HTML. Для меня все является новой концепцией, и мне трудно найти правильный способ сделать это. Вот мой код:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/style.css">
    <title>MySQL Employees </title>
</head>
<body>
    <div>
        <p id = "data"></p>
    </div>
    <div id = "employee">
        <i>RECORDS PLACED HERE</i>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    
</body>
</html>

AJAX JQuery

$(document).ready(function() {

    $.ajax({
        url: "/ajax-GET-Employee",
        dataType: "json",
        type: "GET",
        success: function(data) {

            console.log("Returning MySQL data", data);
            // YOUR CODE GOES HERE

            for(let i = 0; i < data.rows.length; i++) {
                let employee = data.rows[i];
                console.log(employee.first_name, employee.last_name, employee.employee_id, employee.phone_number, employee.workstation, employee.security_level, employee.work_experience, employee.sales_record, employee.work_hour, employee.gender);
            }
            var div = $("data");
            div.html(data);
        },
        
        error: function(jqXHR, textStatus, errorThrown) {
            $("#data").text(textStatus + " " + errorThrown
                + jqXHR.responseText);
        }
    });

});

SQL

create table employee (
  ID int NOT NULL AUTO_INCREMENT,
  first_name varchar(100),
  last_name varchar(100),
  employee_id varchar(100),
  phone_number varchar(100),
  workstation varchar(100),
  security_level varchar(100),
  work_experience varchar(100),
  sales_record varchar(100),
  work_hour varchar(100),
  gender varchar(100),

  PRIMARY KEY (ID)
);

insert into employee (first_name, last_name, employee_id, phone_number, workstation, security_level, work_experience, sales_record, work_hour, gender) values ('michael',  'jackson', '12321', '778223123', 'West Wing','Level 3', '5 years', '240 sales/month', '8AM-5PM', 'male');
insert into employee (first_name, last_name, employee_id, phone_number, workstation, security_level, work_experience, sales_record, work_hour, gender) values ('jason',  'ahn', '32183', '2364382954', 'North-South Wing','Level 1', '2 years', '80 sales/month', '8AM-4PM', 'male');

Бэкэнд JS

// REQUIRES
const express = require('express');
// as of Express 4, you need this:
const app = express();
// https://www.npmjs.com/package/jsdom
const { JSDOM } = require('jsdom');
const fs = require("fs");
// npm install mysql
const mysql = require('mysql');

app.use('/js', express.static('static/js'));
app.use('/css', express.static('static/css'));

app.get('/', function (req, res) {
    let doc = fs.readFileSync('./static/html/main.html', "utf8");


    // leaving this in there so that you can see the opportunity to
    // change the document via jQuery - on the server side!
    //console.log(JSDOM);
    let dom = new JSDOM(doc);
    //let $ = require("jquery")(dom.window);
    //$("#p1").html("hello world!");

    res.send(dom.serialize());
});

app.get('/ajax-GET-Employee', function (req, res) {
    //set header to JSON type
    res.setHeader('Content-Type', 'application/json');

    let connection = mysql.createConnection({
      host     : 'localhost',
      user     : 'root',
      password : '',
      database : 'test'
    });
    connection.connect();

    connection.query('SELECT * FROM employee', function (error, results, fields) {
      if (error) {
        throw error;
      }
      console.log('Rows returned are: ', results);
      res.send({ msg: "success", rows: results });

    });
    connection.end();

    // set the type of response:
    //res.send({ msg: "No data!" });

});


// for page not found (i.e., 404)
app.use(function (req, res, next) {
    res.status(404).send("<html><head><title>Page cannot be found.</title></head><body><p>Nothing goes here.</p></body></html>");
})

// RUN SERVER
let port = 8000;
app.listen(port, function () {
    console.log('Example app listening on port ' + port + '!');
})
  • 0
    вам не хватает внутреннего кода, в котором вы в основном выполняете SQL-вызовы, создаете объекты из результатов и отправляете их как JSON обратно клиенту. Другими словами, код между запросом AJAX и базой данных
  • 0
    @FCR Не понимаю, почему это важно, когда OP заявила, что данные поступают нормально. Вопрос в том, как разобрать его на элементы DOM. Не нужно запрашивать код, не имеющий отношения к ситуации
Теги:
mysql
jquery
html
ajax
CodeFix

1 ответ

0

Сначала вам нужно написать код серверной части, это может быть PHP, Nodejs, python и т. Д.

Предполагая, что он у вас есть, вы можете вернуть свои данные в формате JSON.

Вот очень простой пример, который может помочь вам начать:

  const jsonData = [
  {
    first_name: "michael",
    last_name: "jackson"
  },
  {
    first_name: "jason",
    last_name: "ahn"
  }
];

var list = "<table border='1'>";

$.each(jsonData, function (index, value) {
  list += "<tr >";
  list += "<td>" + value.first_name + "</td>";
  list += "<td>" + value.last_name + "</td>";
  list += "</tr>";
});

list += "</table>";

$("#app").html(list);

Изображение результата

Поделиться
Источник
  • 0
    Есть ли способ напрямую получить данные из файла sql вместо того, чтобы писать const jsonData? Я отредактировал свой вопрос, добавив внутренний JS-код.
  • 0
    да, просто замените jsonData из ваших возвращаемых данных API, если вы поместите и пример ваших возвращаемых данных API, я могу показать вам и пример

Другие вопросы

  • ajax дважды загружает данные из базы данных с помощью laravel php1 ответ

    привет, я пытаюсь загрузить данные из базы данных с помощью ajax. но данные загружаются дважды на страницу html.<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $('button').click(function(){ $.ajax({ ...

  • отображать другие входы на основе значения другого входа с помощью laravel, ajax1 ответ

    Я новичок в laravel, и я пытаюсь создать форму и отправить ее в базу данных. Мне удалось сохранить данные в базе данных, используя следующий код. Мой клинок: <form id="castingform" method="post" action="castingss" enctype="multipart/form-data"> ...

  • Как добавить проверку ввода в React?2 ответ

    У меня простая форма, в которойfirstName а такжеlastName . <label htmlFor="firstName">First Name: </label> <input type="text" className="form-control" id="firstName" name="firstName" value={basicDet...

  • Фильтровать видео YouTube по категории1 ответ

    В настоящее время я работаю над проектом, который отображает множество популярных видео YouTube из нескольких регионов. В настоящее время я работаю над функцией, которая позволяет пользователям фильтровать результаты по категориям и не имею честного представления о том, с чего начать реализацию. Вот...

  • Избегайте неестественных разрывов слов4 ответ

    у меня есть<h1> название с длинным словом, например следующее. Ширина браузера, конечно, зависит от устройства, но я заметил, что на одном из моих устройств это выглядит так: [IMG_OUR_ID=69.png] что не очень хорошо разбирается в словах. Как вместо этого попросить браузер делать "более при...

  • Текстовое поле и Datagridview объединяются, а затем отправляются в код Mysql C # VisualStudio1 ответ

    Может ли кто-нибудь помочь мне, я понятия не имею, как объединить текстовое поле и сетку данных в С # У меня есть текстовое поле Пример № транзакции 123456 Имя Джонджон Кандаре Раздел ИТ-персонал DateNeeded 2021-04-21 тогда у меня есть datagridview КОЛИЧЕСТВО ПУНКТ ОПИСАНИЕ КОЛИЧЕСТВО 1 CD 3 доллара...

  • Подключение к базе данных Laravel 8 не работает3 ответ

    Попытка подключить приложение laravel 8 в производстве к базе данных mysql. Пытался следовать документации, но она не работает. .env файл следующим образомDB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=domain_laravelapp DB_USERNAME=domain_admin DB_PASSWORD=password config / database...

  • Остановить воспроизведение видео YouTube при закрытии CUSTOM модального окна1 ответ

    Привет, классные Overflowers. Мне удалось реализовать красивый, простой модальный файл, который отображает видео на YouTube при нажатии на эскиз img. Моя проблема в том, что я не могу заставить видео останавливаться после закрытия модального окна. Я пробовал здесь много идей и скриптов, но многие из...

  • Оператор if в jQuery и HTML?2 ответ

    Я успешно запускаю следующий скрипт: он обновляет текст каждые 3 секунды.<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script> $(function() { window.setInterval(function() { loadNewText() }, 3000) function loadNewText...

  • MYSQL вставляет строки с пропущенными датами2 ответ

    Закрыто . Этот вопрос требует подробностей или ясности . В настоящее время он не принимает ответы. Хотите улучшить этот вопрос? Добавьте подробности и проясните проблему, отредактировав этот пост . Закрыт 3 дня назад . Уточните этот вопрос У меня есть таблица с двумя столбцами: название Дата AA 20...

CodeFix
Для будущих программистов
Цитата дня

"Завидую тестировщикам: все хотят с ними дружить."

Эндрю Таненбаум