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

[daimon0482]

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

<table class="tab_blur">
              <tr> 
              <td><b>Ф.И.О.</b></td><td contenteditable="true" name="fio">Иванов И.И</td>
              </tr>
              <tr>
              <td><b>E-mail</b></td><td contenteditable="true" name="mail">ivano@mil.ru</td>
              </tr>
              <tr>
              <td><b>Телефон</b></td><td contenteditable="true" name="phone">+79169999999</td>
              </tr>
              <tr>
              <td><b>Почтовый индекс</b></td><td contenteditable="true" name="index">7070</td>
              </tr>
              <button id="but">Отправить</button>
</table>

[Malleys]

как через ajax отправить

Давайте начнём с того, что никакого AJAX нет и он не может отправлять данные!

отправить данные из таблицы

А почему вы не можете сделать нормальную форму и с ней работать? Сейчас у вас в эту таблицу можно вставить произвольное содержимое (например откройте любой сайт, скопируйте всё и вставьте в таблицу, вы такое ожидаете? Вы даже можете скопировать эту таблицу и вставить её внутрь!)

Вам стоит переделать всё-таки в форму! Форма сама по себе обладает функционалом отправки данных, а если вам нужна более тонкая настройка отправляемых данных, то для этого есть функция fetch.

Вот пример правильно оформленной формы...

<form action="https://example.com/data-collector" method="post">
	<label>
		Ф.И.О.
		<input name="fio" autocomplete="name" required>
	</label>
	<label>
		E-mail
		<input type="email" name="mail" required>
	</label>
	<label>
		Телефон
		<input type="tel" name="phone" required>
	</label>
	<label>
		Почтовый индекс
		<input name="index" required>
	</label>
	<button>Отправить</button>
</form>

<style>
	form label, form label input {
		display: block;
	}
	form label {
		margin: 1em 0 0.5em;
	}
</style>

[laimas]

Давайте начнём с того, что никакого AJAX нет

https://developer.mozilla.org/ru/docs/Web/Guide/AJAX

[daimon0482]

Malleys,
да я бы с радостью применил бы обычную форму, да есть поле например

<td><b>Примечание</b></td><td contenteditable="true"></td>

где может быть много текста, таблица увеличивается в размере по мере содержимого, а в <input> все скрывается.

[Malleys]

laimas, всё это словоблудие и подмена понятии! Работодатель, который требовал знание AJAX, совершенно не был заинтересован в XML и XSLT, и в итоге всё свелось к клиент-серверному взаимодействию путём запросов и получении ответов в виде JSON.

где может быть много текста, таблица увеличивается в размере по мере содержимого, а в <input> все скрывается.

Так значит нужен <textarea> и возможно скрипт от Ли Веру, который подгоняет размер под содержимое текстовых полей...

<form action="https://example.com/data-collector" method="post">
	<label>
		Ф.И.О.
		<input name="fio" required>
	</label>
	<label>
		E-mail
		<input type="email" name="mail" required>
	</label>
	<label>
		Телефон
		<input type="tel" name="phone" required>
	</label>
	<label>
		Почтовый индекс
		<input name="index" required>
	</label>
	<label>
		Описание
		<textarea name="description" required></textarea>
	</label>
	<button>Отправить</button>
</form>

<style>
	form label, form label input, form label textarea {
		display: block;
		min-width: 15em;
	}
	form label {
		margin: 1em 0 0.5em;
	}
</style>

<script src="https://unpkg.com/stretchy@1.0.0/stretchy.min.js"></script>

[laimas]

laimas, всё это словоблудие и подмена понятии!

Просто используют термин, чего и написано там черным по белому, точно такая же беда как и с модальностью. Вот и все, не каждому ваша теория и понятна, да и нужна.

[Malleys]

Вот и все, не каждому ваша теория и понятна, да и нужна.

Какая теория у меня? Почему запрос к серверу нужно называть AJAX? Почему нужны эти пространные объяснения, что это асинхронный JavaScript и XML? Вот первые строки из того учебника «Ajax основан на Асинхронном JavaScript и XML. В основе технологии лежит использование нестандартного объекта XMLHttpRequest для взаимодействия со скриптами на стороне сервера...» Как раз таки у них полно ненужной теории!

AJAX — это обман, теория не несущая никакой практической пользы. AJAX не нужен, чтобы сделать запрос к серверу.

Задумайтесь над тем, что это просто слова, вы никогда в реальности не использовали теорию AJAX, вы не делали AJAX-запросов, и у вас не было единения сервера и клиента при помощи AJAX. Это всё обман!

Всё, что вы делали, так это GET- и POST-запросы.

Просто используют термин, чего и написано там черным по белому

Давайте проясним — этот термин используется непонятся для чего. Что вы хотите подчеркнуть этим термином? В C#, Java и пр. языках такой термин не используется, используется «сеть», «клиент», «сервер», «запрос», «ответ» и люди использующие эти термины совершенно могут объяснить зачем они это делают. А те, кто кричат AJAX про всё подряд, просто не могут отличить «сервер» от «запроса»... Как тут на форуме иногда пишут «ajax отправил ajax-запрос, но не могу получить от сервера ajax». Бред и только! Не зря говорят ведь, что есть веб-макаки. Бритва Оккама всё отсекает!

беда как и с модальностью.

Модальное значит «блокирующее работу пользователя с основным приложением». Я не вижу никакой проблемы с тем, что были «модальные окна» и «модальные диалоги»!

[daimon0482]

Malleys,
спасибо за скрипт для <textarea> все работает отлично.