2

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

        <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>
1
  • "все смешалось в доме Облонских" ©
    – teran
    28 ноя 2017 в 10:18

1 ответ 1

0

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

 <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);
     });
});
7
  • у меня такая проблема что даже console.log(JSON.parse(data.steamid)); не выводит в консоль
    – MegaRoks
    28 ноя 2017 в 11:02
  • ответ то приходит вообще? функция сам по себе выполнется? поставьте там точку остановка да посмотрите что на входе.
    – teran
    28 ноя 2017 в 11:06
  • Вот вкладке network отображаются данные, что я указывал в теме выше
    – MegaRoks
    28 ноя 2017 в 11:17
  • те же самые что и по ссылке project-megaroks931128.codeanyapp.com/users/add/…
    – MegaRoks
    28 ноя 2017 в 11:18
  • а json.parse вы зачем вызываете при выводе в консоль?
    – teran
    28 ноя 2017 в 11:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.