Авторизуйтесь, используя Jquery и Json

Question

Авторизуйтесь, используя Jquery и Json

0

В настоящее время у меня есть форма входа в систему, которая будет отправлять данные JSON (имя пользователя и пароль) на мой сервер api, и сервер отправит обратно данные JSON (имя пользователя и баланс) обратно на мою веб-страницу.

Мой HTML-код:

<input type="text" name="username" id="username" class="text" maxlength="30" />
<br />
<input type="password" name="password" id="password" class="text" maxlength="30" />
<br />
<input type="submit" name="btnSubmit" id="btnSubmit" />

Мой сценарий jQuery:

    $(document).ready(function () {
    $("#btnSubmit").click(function () {
        //collect userName and password entered by users
        var userName = $("#username").val();
        var password = $("#password").val();

        auth(userName, password);
    });
});

//authenticate function to make ajax call
function auth(userName, password) {
    $.ajax
    ({
        type: "POST",
        //SEND TO MY SERVER URL
        url: "http:myserverlocationurl.com",
        dataType: 'json',
        async: false,
        data: '{"userName": "' + userName + '", "password" : "' + password + '"}',
        success: function () {

            //???????????????????????
        }
    })
}

Мой вопрос связан с '??????????' вышеперечисленное. Как я могу инкапсулировать/отображать данные json, которые отправляются с сервера и на мою веб-страницу (либо в виде всплывающего окна, но НИЧЕГО будет работать, пока я это вижу).

Спасибо, и любая помощь будет очень признательна.

user3196499 21 янв. 2014, в 17:30

Источник

1

Зависит от того, как выглядит ответ. В общих чертах, вы можете предупреждать информацию или создавать элементы DOM, содержащие информацию, и добавлять их на страницу. В качестве примечания, как правило, не рекомендуется создавать строки json путем объединения строк. Создайте объект javascript, затем вызовите JSON.stringify() если вам нужно.
Jason P 21 янв. 2014, в 16:34
0

Могу ли я получить пример того, как это сделать? Как использовать stringify ()? Я новичок в JSON. Также я хочу, чтобы мой ответ был просто бдительным. НО я не знаю как это сделать :(
user3196499 21 янв. 2014, в 16:36
1

В таком случае я бы начал здесь .
Jason P 21 янв. 2014, в 16:38
0

хорошо, я обязательно это проверю. Благодарю. Но есть ли у вас предложения о том, как отобразить отвечающие данные json с сервера API?
user3196499 21 янв. 2014, в 16:41
0

Если вас интересует только просмотр данных, вы можете использовать вкладку сети инструментов разработчика вашего браузера или использовать console.log() для регистрации ответа в console.log() success . Во втором разделе ссылки, которую я разместил, есть пример, показывающий, как записать json на страницу. Имейте в виду, однако, что ваша структура JSON почти наверняка будет отличаться от примера. learn.jquery.com/ajax/jquery-ajax-methods
Jason P 21 янв. 2014, в 16:45
0

Проблема в том, что моя форма входа предназначена для других пользователей (не для меня). Так что я не думаю, что могу использовать консольный метод. Идея состоит в том, чтобы другие пользователи вводили свою информацию, и информация будет отправлена в виде объекта JSON на мой сервер, который затем отправит обратно объект JSON, включая информацию об учетной записи пользователя. Мне просто нужен способ показать это для них и позволить им просматривать это.
user3196499 21 янв. 2014, в 16:48

Показать ещё 4 комментария

Теги:

javascript

jquery

json

username

3 ответа

Ещё вопросы

Зависит от того, как выглядит ответ. В общих чертах, вы можете предупреждать информацию или создавать элементы DOM, содержащие информацию, и добавлять их на страницу. В качестве примечания, как правило, не рекомендуется создавать строки json путем объединения строк. Создайте объект javascript, затем вызовите JSON.stringify() если вам нужно.
Могу ли я получить пример того, как это сделать? Как использовать stringify ()? Я новичок в JSON. Также я хочу, чтобы мой ответ был просто бдительным. НО я не знаю как это сделать :(
хорошо, я обязательно это проверю. Благодарю. Но есть ли у вас предложения о том, как отобразить отвечающие данные json с сервера API?
Если вас интересует только просмотр данных, вы можете использовать вкладку сети инструментов разработчика вашего браузера или использовать console.log() для регистрации ответа в console.log() success . Во втором разделе ссылки, которую я разместил, есть пример, показывающий, как записать json на страницу. Имейте в виду, однако, что ваша структура JSON почти наверняка будет отличаться от примера. learn.jquery.com/ajax/jquery-ajax-methods
Проблема в том, что моя форма входа предназначена для других пользователей (не для меня). Так что я не думаю, что могу использовать консольный метод. Идея состоит в том, чтобы другие пользователи вводили свою информацию, и информация будет отправлена в виде объекта JSON на мой сервер, который затем отправит обратно объект JSON, включая информацию об учетной записи пользователя. Мне просто нужен способ показать это для них и позволить им просматривать это.

Gjohn · Answer 1 · 2014-01-21T14-25-00.000Z

$.ajax
({
    type: "POST",
    //SEND TO MY SERVER URL
    url: "http:myserverlocationurl.com",
    dataType: 'json',
    async: false,
    data: '{"userName": "' + userName + '", "password" : "' + password + '"}',
    success: function (jsonResponse) {

        resp = parseJSON(jsonResponse);

        alert(resp);
    }
})

gauravmuk · Answer 2 · 2017-06-18T17-12-00.000Z

function auth(userName, password) {
    $.ajax
    ({
        type: "POST",
        //SEND TO MY SERVER URL
        url: "http:myserverlocationurl.com",
        dataType: 'json',
        async: false,
        data: '{"userName": "' + userName + '", "password" : "' + password + '"}',
        success: function (response) {
          alert(JSON.stringify(response));
        }
    })
}

Вы можете просто предупредить данные для себя, чтобы это увидеть.

rafiki_rafi · Answer 3 · 2014-01-21T14-00-00.000Z

Функция успеха имеет три параметра: data, textStatus и jqXHR которые объясняются на сайте API jQuery:

успех

Тип: Функция (данные PlainObject, String textStatus, jqXHR jqXHR) Функция, вызываемая, если запрос завершается успешно. Функция получает три аргумента: данные, возвращаемые с сервера, отформатированные в соответствии с параметром dataType; строка, описывающая статус; и объект jqXHR (в jQuery 1.4.x, XMLHttpRequest). Начиная с jQuery 1.5, параметр успеха может принимать набор функций. Каждая функция будет вызываться по очереди. Это событие Ajax.

Чтобы просмотреть результаты вызова ajax, вы можете использовать console.log() для просмотра содержимого аргументов:

    success: function (data, textStatus, jqXHR) {
          console.log(data);
          console.log(textStatus);
          console.log(jqXHR);
    }

Чтобы добавить содержимое ответа JSON на ваш сайт, это зависит от того, как он отформатирован. Если ваш ответ возвращает что-то вроде: {"user": "jsmith", "authentication": "success"}, вы можете предупредить пользователя:

    success: function (data, textStatus, jqXHR) {
          alert('User: ' + data.user + ' authenticated:' + data.authentication);
    }

Или добавьте его к некоторому элементу DOM на вашей странице, то есть к div с идентификатором login-status:

    success: function (data, textStatus, jqXHR) {
          $('#login-status').html('User: ' + data.user + ' authenticated:' + data.authentication);
    }

Спасибо за ваш ответ. Поэтому, если я воспользуюсь функцией успеха, о которой вы упомянули выше, будут ли данные отображаться на веб-странице, чтобы пользователь мог их увидеть?
Я не думаю, что Консоль необходима, потому что я на 100% уверен, что сервер отправляет обратно данные JSON. Мне просто нужен способ отобразить ответ данных JSON на страницу входа в систему (через Popup / Alert).
Да, только что обновил ответ несколькими способами сделать это.
Большое спасибо. Я обязательно попробую.
Что если его вложенный объект JSON? Так что-то вроде: {"info": {"user": "", "balance": ""},} Буду ли я использовать: success: function (data, textStatus, jqXHR) {alert ('User:' + data. info.user + 'balance:' + data.info.balance); } Я очень ценю помощь. Я провел почти 5 дней, думая и ища метод.
Да, но если изменить структуру объекта JSON, то data.info.user и data.info.balance приведут к неопределенным переменным, что приведет к ошибке времени выполнения ReferenceError . Я призываю вас прочитать о JSON .
Хорошо. Благодарю. просто интересно ... почему изменится структура объекта json? Мой сервер API отправляет ту же структуру каждый раз.
Просто подумайте над тем, как вы разрабатываете свою программу - как и в любой программе, вы хотите, чтобы ваши переменные были читаемыми и имели разумное имя. В вашем примере, размещение user и balance в info объекте кажется излишним, но с другой стороны, возможно, это может иметь больше смысла в контексте вашего проекта.
Понимаю. Спасибо большое за вашу помощь. Я еще не тестировал дисплей JSON, но, похоже, все имеет смысл.
Другой вопрос. Если мой сервер API отправляет мне объект JSON в этой форме: {"user": "", "balance": ""}, и я хочу отображать только баланс. Если я использую оповещение ('balance:' + data.balance), оно все равно будет работать, и ошибки не будет?
Вы должны поэкспериментировать и проверить это сами :)
И снова здравствуйте. Мне было интересно, как я могу отображать данные без использования оповещения. Скажем, я хочу отобразить data.balance на веб-сайте. Вместо предупреждения (+ data.balance). Что я могу использовать?