Как отправить таблицу через ajax на сервер

@kristi14 · Регистрация: 05.08.2019

Студворк — интернет-сервис помощи студентам

Здравствуйте, как отправить таблицу через ajax на сервер?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<table class="table_blur">
  <tr>
    <th>Company</th>
    <th>Q1</th>
    <th>Q2</th>
    <th>Q3</th>
    <th>Q4</th>
  </tr>
  <tr>
    <td contenteditable="true" name="a1">Microsoft</td>
    <td contenteditable="true" name="a2">20.3</td>
    <td contenteditable="true" name="a3">30.5</td>
    <td contenteditable="true" name="a4">23.5</td>
    <td contenteditable="true" name="a5" >40.3</td>
    </tr>
  <tr>
    <td contenteditable="true" name="b1">Google</td>
    <td contenteditable="true" name="b2" >50.2</td>
    <td contenteditable="true" name="b3">40.63</td>
    <td contenteditable="true" name="b4">45.23</td>
    <td contenteditable="true" name="b5" >39.3</td>
    </tr>
</table>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$('.table_blur').click(function(){
    var msg = $('.table_blur').serialize();
    $.ajax({
        type: 'POST',
        url: 'Save_Order.php',
        data: msg,
        success: function(data) {
            location.reload();
        },
        error:  function(xhr, str){
            alert('Возникла ошибка: ' + xhr.responseCode);
        }
    })
});

@amr-now · 26.01.2020, 16:08

Здравствуйте.
Пинками отправить. По-хорошему никогда не понимает )))

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    <table class="table_blur">
        <tr>
            <th>Company</th>
            <th>Q1</th>
            <th>Q2</th>
            <th>Q3</th>
            <th>Q4</th>
        </tr>
        <tr>
            <td contenteditable="true">Microsoft</td>
            <td contenteditable="true">20.3</td>
            <td contenteditable="true">30.5</td>
            <td contenteditable="true">23.5</td>
            <td contenteditable="true">40.3</td>
        </tr>
        <tr>
            <td contenteditable="true">Google</td>
            <td contenteditable="true">50.2</td>
            <td contenteditable="true">40.63</td>
            <td contenteditable="true">45.23</td>
            <td contenteditable="true">39.3</td>
        </tr>
    </table>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
        var rows = $(".table_blur tr:gt(0)");
        var array = rows.map(function (i, e) {
            return {
                company: e.cells[0].textContent,
                q1: +e.cells[1].textContent,
                q2: +e.cells[2].textContent,
                q3: +e.cells[3].textContent,
                q4: +e.cells[4].textContent
            };
        }).toArray();
        var msg = JSON.stringify(array);
        console.log(msg);  // Для тестирования выводим в консоль

@kristi14 · 26.01.2020, 21:43 **[ТС]**

amr-now, Да спасибо, в консоль все выводится.

Добавлено через 2 часа 55 минут
amr-now, на сервере вроде бы так должно быть

PHP
1
$msg = $_POST["msg"];

но почему то не получается сохранить в базе

@amr-now · 27.01.2020, 21:15

kristi14, там обычная строка JSON, которую можно распарсить в массив объектов.
Соответственно, у каждого элемента массива есть свойства:
- company - string
- q1, q2, q3, q4 - number

Получается, нам не подходит такой шаблон, который был в вопросе:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
            $.ajax({
                url: url, //url страницы 
                method: "POST", //метод отправки
                dataType: "json", //формат данных ответа
                data: $(ajax_form).serialize(),  // Готовим x-www-form-urlencoded
                success: function (response) { //Данные отправлены успешно
                    alert("OK");
                },
                error: function (response) { // Данные не отправлены
                    alert('Ошибка. Данные не отправлены.');
                }
            });

Нам сейчас не нужен формат data: $(ajax_form).serialize(), // Готовим x-www-form-urlencoded
У нас сейчас строка JSON.
Сервер должен получить строку и распарсить из нее массив.
https://api.jquery.com/jquery.... l-settings

Рассмотрим правильные файлы:
index.html

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script src="scripts/app.js"></script>
</head>
<body>
    <table class="table_blur">
        <tr>
            <th>Company</th>
            <th>Q1</th>
            <th>Q2</th>
            <th>Q3</th>
            <th>Q4</th>
        </tr>
        <tr>
            <td contenteditable="true">Microsoft</td>
            <td contenteditable="true">20.3</td>
            <td contenteditable="true">30.5</td>
            <td contenteditable="true">23.5</td>
            <td contenteditable="true">40.3</td>
        </tr>
        <tr>
            <td contenteditable="true">Google</td>
            <td contenteditable="true">50.2</td>
            <td contenteditable="true">40.63</td>
            <td contenteditable="true">45.23</td>
            <td contenteditable="true">39.3</td>
        </tr>
    </table>
    <button type="button" id="btn">Отправить</button>
    <div id="out"></div>
</body>
</html>

scripts/app.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
"use strict";
$(onLoad);
function onLoad() {
    $("#btn").click(btn_click);
}
function btn_click() {
    var rows = $(".table_blur tr:gt(0)");
    var array = rows.map(function (i, e) { return ({
        company: e.cells[0].textContent,
        q1: e.cells[1].textContent,
        q2: +e.cells[2].textContent,
        q3: +e.cells[3].textContent,
        q4: +e.cells[4].textContent
    }); }).toArray();
    var msg = JSON.stringify(array);
    console.log(msg); // Для тестирования выводим в консоль
    $.ajax({
        url: "Save_Order.php",
        method: "POST",
        dataType: "text",
        contentType: "application/json",
        data: msg,
        success: function (response) {
            $("#out").text(response);
        },
        error: function (response) {
            alert('Ошибка. Данные не отправлены.');
        }
    });
}

Как в PHP распарсить JSON из запроса:
http://www.codernotes.ru/artic... cript.html

PHP
1
2
$msg = $_POST["msg"]
$obj = json_decode($msg, true); // получим массив

@kristi14 · 28.01.2020, 00:59 **[ТС]**

большое Спасибо

Добавлено через 28 минут
amr-now, все же где то ошибка, для пробы поставила цифру запись идет норм, а вот массив не хочет записаться в базу :

PHP
1
2
3
4
5
6
7
8
9
10
11
if($_SERVER["REQUEST_METHOD"] == "POST"){
 
//$msg = $_POST["msg"];
//$obj = json_decode($msg, true); // получим массив
 
$obj = "2";
 
    $mysqli->query("UPDATE `orders` SET `tabobj` = '$obj'") or die ("Ошибка " . mysqli_error($mysqli));
 
print $obj;
}

@amr-now · 28.01.2020, 08:32

kristi14, на SO ответили:
Если json передается в теле, то он будет строкой в переменной $_POST – ilyaplot 3 фев '17 в 8:47

Соответственно, нужно было сразу посмотреть всё содержимое переменной $_POST, а не только по одному ключу.
---
В PHP ещё куча способов посмотреть, что пришло в запросе:

PHP
1
$msg =  file_get_contents("php://input")

и содержимое $_REQUEST тоже можно посмотреть.

Добавлено через 8 минут
----
Для file_get_contents('php://input') поподробнее всё разжевали:
Обработка запроса JSON POST :

PHP
1
2
3
4
5
// Takes raw data from the request
$json = file_get_contents('php://input');
 
// Converts it into a PHP object
$data = json_decode($json);  // А для массива второй параметр true

Почему-то все пхпшники обвиняют друг друга во вранье:
"Известно, что все почтовые данные могут быть получены в сценарии PHP с помощью глобальной переменной $ _POST [] . Но это не работает в случае, когда мы хотим получить строку JSON в качестве данных поста."
http://espressocode.top/how-to... -with-php/

Добавлено через 13 минут
----
Ещё один товарищ ввязался в спор:
"Since the POST-Request has the Content-Type application/json, PHP will not parse the HTTP POST data into the superglobal $_POST. Instead you have to read the raw POST data from php://input." - answered Nov 4 '16 at 23:47

Добавлено через 6 минут
----
Вот ещё наглядный пример, как извращаются опытные извращенцы:
сначала отправить данные в x-www-form-urlencoded,
потом знакомым способом вытащить данные по ключу из $_POST,
и в конце декодировать JSON строго из строки

Получить переменную из многомерного JSON переданного пост запросом

Новые блоги и статьи Все статьи Все блоги /
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .

Как отправить таблицу через ajax на сервер

Решение

Решение