Question

首先，我读到某处不应使用XMLHttpRequest。

第二，我是Java语言的新手。

第三，我创建了一个网页来提交电子邮件和密码。

<form method="POST" onsubmit="return check();">{% csrf_token %}
    <p><b>Login</b></p>
    <input type="email" name="email" placeholder="Email" required></input>
    <input type="password" name="password" placeholder="Password" id='new_password' ></input>
    <span id='message'>{{msg}}</span>
    <button type="submit" onclick="check()" name="Submit"><b>Submit</b></button>
</form>

我的检查功能是

function check() {        
    document.getElementById('message').innerHTML = "checking";
    const url = "https://<hostname/login";
    const data = {
        'email' : document.getElementById('email').value,
        'password' : document.getElementById('password').value
    };

    const other_params = {
        headers : { "content-type" : "application/json; charset=UTF-8" },
        body : data,
        method : "POST",
        mode : "cors"
    };

    fetch(url, other_params)
        .then(function(response) {
            if (response.ok) {
                return response.json();
            } else {
                throw new Error("Could not reach the API: " + response.statusText);
            }
        }).then(function(data) {
            document.getElementById("message").innerHTML = data.encoded;
        }).catch(function(error) {
            document.getElementById("message").innerHTML = error.message;
        });
    return true;
}

此代码不起作用，只是一次又一次地将我重定向到同一页面。

请帮助我了解我在做什么错

Answer 1

您的代码存在的问题是您没有“拦截”表单的Submit事件，因此它将执行自身的默认行为POST（因为它没有指示该行为的指令）去哪儿）。除非您有机会停止这种默认行为，否则表单将执行此操作。

要拦截表单的Submit事件，您必须告诉浏览器注意该事件并执行自定义函数，而不是使用事件侦听器，如下所示：

<script>

document.getElementById('whatever-form-id')
  .addEventListener('submit', check);

function check(e) {
  e.preventDefault();
  // and now anything else you want to do.
}

</script>

这将阻止您的表单发布，而将执行您的功能。

Answer 2

1）您的验证功能始终返回 true
2）使用fetch..then时，其promise可以在return语句之后执行

因此，您的表格将一次又一次刷新。您应该返回false，并在收到onSuccess响应时使用JavaScript手动提交表单。

<script>
    function check(event) {
        document.getElementById('message').innerHTML = "checking";

        const url = "https://localhost:8080/login";
        const data = {
            'email' : document.getElementById('email').value,
            'password' : document.getElementById('new_password').value
        };
        const other_params = {
            headers : { "content-type" : "application/json; charset=UTF-8" },
            body : data,
            method : "POST",
            mode : "cors"
        };

        fetch(url, other_params)
            .then(function(response) {
                if (response.ok) {
                    alert(response.json());
                } else {
                    throw new Error("Could not reach the API: " + response.statusText);
                }
            }).then(function(data) {
                document.getElementById("message").innerHTML = data.encoded;
            }).catch(function(error) {
                document.getElementById("message").innerHTML = error.message;
            });
        return false;
    }
</script>

<form method="POST" onsubmit="return check();">{% csrf_token %}
    <p><b>Login</b></p>
    <input type="email" id = "email" name="email" placeholder="Email" required></input>
    <input type="password" name="password" placeholder="Password" id='new_password' ></input>
    <span id='message'>{{msg}}</span>
    <button type="submit" name="Submit"><b>Submit</b></button>
</form>

更新：

页面未刷新，显示错误消息：

Answer 3

我检查过您的代码中存在一些错误，请像这样使用它

<form method="POST" onsubmit="return check();">{% csrf_token %}
    <p><b>Login</b></p>
    <input type="email" id = "email" name="email" placeholder="Email" required>   
    <input type="password" name="password" placeholder="Password" id='new_password' >
    <span id='message'>{{msg}}</span>
    <button type="submit" onclick="check(event)" name="Submit"><b>Submit</b>  </button>
</form>
<script>
    function check(event) {
        event.preventDefault();
        document.getElementById('message').innerHTML = "checking";

        const url = "https://hostname/login";
        const data = {"email" : document.getElementById('email').value,
                    'password' : document.getElementById('new_password').value
                    };
        const other_params = {
            headers : { "content-type" : "application/json; charset=UTF-8"},
            body : data,
            method : "POST",
            mode : "cors"
        };

        fetch(url, other_params)
            .then(function(response) {
            if (response.ok) {
                return response.json();
            } else {
                throw new Error("Could not reach the API: " + response.statusText);
            }
        }).then(function(data) {
            document.getElementById("message").innerHTML = data.encoded;
        }).catch(function(error) {
            document.getElementById("message").innerHTML = error.message;
        });
        return true;
    }
  </script>

然后通过更改帖子URL来进行更正（无论是否可行）进行测试，以进行更多测试，请使用浏览器检查器工具查看您的Ajax请求。

我还把它放在您的实时测试http://jsfiddle.net/rajender07/xpvt214o/903616/

的小提琴上

谢谢

Answer 4

首先，从REST API获取数据后，我想了解您的对象是什么。

第二，HTML代码中也有错误，当表单元素上已经有onclick时，无需在提交按钮上添加onsubmit。

解决方案，更改 onsubmit="check(event);"

function check(e) { e.preventDefault() ... } // you can remove the return true

Answer 5

只是在这里跳了一下，但是您已在标题中将Content-Type设置为application/json，但是您的身体不是JSON字符串

尝试使您的身体与标头匹配

const other_params = {
  headers : { "content-type" : "application/json; charset=UTF-8"},
  body : JSON.stringify(data),
  method : "POST",
  mode : "cors"
};

编辑

因此，在重新阅读您的问题之后，我认为您正在将button设置为submit的类型，并且发生的事情是当您单击按钮时，表格是通过良好的旧表单发布而发布，并且您的页面也从发布回发中刷新。

如果您想使用获取来自己处理表单发布，请将按钮类型更改为button，并且该表单不应再实际发布，则其他所有内容都将由click事件处理程序处理。

ps。在使用它时，也可以从表单标签中删除method和onsubmit属性

所以您的表单应该看起来像这样

<form>
    <p><b>Login</b></p>
    <input type="email" name="email" placeholder="Email" required></input>
    <input type="password" name="password" placeholder="Password" id='new_password' ></input>
    <span id='message'>{{msg}}</span>
    <button type="button" onclick="check()" name="Submit"><b>Submit</b></button>
</form>

通过JavaScript将POST请求发送到REST API

5 个答案: