Вывод в таблицу

278

30 ноября 2017, 00:47

У меня есть форма, в которую ввожу ид.

        <form onsubmit="return false" action="" method="GET">
            <fieldset class="intrigue">
                <legend>
                    <h3>Укажите steamID</h3>
                </legend>
                <input placeholder='Введите steamID' id="SteamId" name="SteamId" type="text" value="">
                <input placeholder='Отправить' type='submit'>
            </fieldset>
        </form>

Затем ajax, который посылает на сервер запрос(ссылка + ид).

$(document).on('submit', 'form', function () {
    var UserId = $('input[name=SteamId]').val();
    if (UserId.length > 0) {
        alert('Всё норм!');
        SubmitForm(UserId);
    } else {
        alert("Вы забыли указать имя");
    }
});
function SubmitForm(UserId) {
    $.ajax({
        method: "GET",
        url: "http://project-megaroks931128.codeanyapp.com/users/add/?usersid=" + UserId,
        dataType: "jsonp";
    })
}

Приходит массив данных в json

{
    "steamid": "76561198049827777",
    "communityvisibilitystate": 3,
    "profilestate": 1,
    "personaname": "tlmcmerty",
    "lastlogoff": 1503799076,
    "profileurl": "http://steamcommunity.com/profiles/76561198049827777/",
    "avatar": "https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/fe/fef49e7fa7e1997310d705b2a6158ff8dc1cdfeb.jpg",
    "avatarmedium": "https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/fe/fef49e7fa7e1997310d705b2a6158ff8dc1cdfeb_medium.jpg",
    "avatarfull": "https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/fe/fef49e7fa7e1997310d705b2a6158ff8dc1cdfeb_full.jpg",
    "personastate": 0,
    "realname": "joshua tree",
    "primaryclanid": "103582791429521408",
    "timecreated": 1317492330,
    "personastateflags": 0,

Как мне вывести в мою таблицу содержимою таблицу например поле steamid?

   <table>
      <tr>
         <th>SteamID</th>
         <td>Что сюда писать?</td>
      </tr>
    </table>

Answer 1

Если кратко, то добавить к ячейке идентификатор а-ля

 <td id="steam-id">Что сюда писать?</td>

а ajax-вызов замените на что-то вроде

$.getJSON("http://project-megaroks931128.codeanyapp.com/users/add/?usersid=" + UserId,
          function(data){
             console.log(data.steamid);
             $("td#steam-id").text(data.steamid);
          }
    });

либо подобный обратный вызов прикрутить к исходному $.ajax-запросу.

А вообще, заметьте, что посути вам вообще не нужна <form> в принципе, еще и с перекрытием onsubmit ибо данные вы отправляете все равно аяксом независимо от формы. input поле можно разместит и вне формы.
А в результирующей таблице у вас странным образом соседствуют th и td.

Итого, у вас должен быть инпут для ввода, кнопка для отправки, и еще поле для вставки значения.

<input type="text" id="steamId"/>
<a href="#" id="check">Отправить</a>
<span id="steam-id-result"></span>

а также код наподобие следующего

$("#check").click(function(e){
     e.preventDefault();
     var sid = $("#steamId").val().trim();
     if(!sid){
         alert(....);
         return;
     }
     $.getJSON("...", function(data){
         $("#steam-id-result").text(data.steamid);
     });
});

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

change() работает только 2 раза, а дальше не работает

Висит обработчик на select Он срабатывает только 2 раза, а за тем остается старое значение, из-за чего это может быть

248

HTML

Проблема с добавлением новой вкладки в HTML

Есть готовый кодПростой и понятный

295

HTML

JS проверка на пустое значение input

Пытаюсь проверить input, на значение value, при наличии в нем строки и безСтрока (Путь до файла), сразу же подгружается через callback или нажатием кнопки,...

423

HTML

Как выводить элемент только у одного чекбокса?

Нужно, чтобы при нажатии на чекбокс все остальные кнопки убирались, а кнопка "применить" должна быть только у того чекбокса, который нажат...

314