Использование JS, чтобы сделать запрос на отдых на HTML OnClick - PullRequest
Новая
       5

Использование JS, чтобы сделать запрос на отдых на HTML OnClick

0 голосов
/ 26 сентября 2019

Я почти всегда работаю с python, так что все это для меня ново.Здесь я на начальной стадии создания веб-приложения с простой страницей входа.Я пытаюсь сделать так, чтобы при нажатии кнопки входа в систему действие onclick в html вызывало функцию login_user, чтобы сделать запрос покоя к API-интерфейсу сервера, который я уже построил.

Вот htmlи функция js: 

<div>
    <label for="username">username:</label>
    <input type="text" id="username" name="username">
</div>

<div>
    <label for="password">password:</label>
    <input type="password" id="password" name="password">
</div>

<button id="loginButton" onclick="login_user()">login</button>


<script type="text/javascript">
    function login_user(path, username, password) {
        'http://127.0.0.1:5000/' = path;
        document.getElementById('username') = username;
        document.getElementById('password') = password;

        let data = {username: username, password: password};

        return fetch(path, {method: "GET", body:                 
            JSON.stringify(data)});
    };
</script>

Однако запрос не будет выполнен.Я не думаю, что проблема в Javascript?Я попытался сделать более простую функцию, которая бы просто перенаправляла меня на домашнюю страницу при нажатии, но это тоже не сработало.Я не слишком уверен, что происходит, и если бы вы могли указать мне правильное направление, это было бы удивительно!

Ответы [ 4 ]

1 голос
/ 26 сентября 2019 
function login_user(path, username, password) {
        'http://127.0.0.1:5000/' = path; // Assigning values is wrong.
...
}

Вы должны переписать функцию как: 

function login_user() {
        let path = 'http://127.0.0.1:5000/';
        let username = document.getElementById('username');
        let password = document.getElementById('password');

        let data = {username: username, password: password};

        return fetch(path, {method: "GET", body:                 
            JSON.stringify(data)});
    };
0 голосов
/ 26 сентября 2019 
<body>
<div>
    <label for="username">username:</label>
    <input type="text" id="username" name="username">
</div>

<div>
    <label for="password">password:</label>
    <input type="password" id="password" name="password" minlength="8" required>
</div>

<button id="loginButton" onclick="login_user()">login</button>


<script type="text/javascript">
function login_user() {
    let path = "http://127.0.0.1:5000/api/resource";
    let username = document.getElementById("username").value;
    let password = document.getElementById("password").value;

    let data = {username: username, password: password};

    fetch(path, {
        headers: {
            "Content-Type": "application/json"},
            method: "POST", 
            body: JSON.stringify(data)}
    );
    fetch("http://127.0.0.1:5000/");
};
</script>

0 голосов
/ 26 сентября 2019

Попробуйте, кажется, вы получаете неопределенные значения для ввода 

function login_user(path, username, password) {
    path = 'http://127.0.0.1:5000/';
    username = document.getElementById('username').value;
    password = document.getElementById('password').value;

    let data = {username: username, password: password};

    return fetch(path, {
        method: "GET", 
        body: JSON.stringify(data)
    });
};
0 голосов
/ 26 сентября 2019

Синтаксическая ошибка!'http://127.0.0.1:5000/' = путь;Функция входа в систему, для безопасности, вы должны использовать метод POST.

Подробнее о fetch api: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...