使用 fetch 在 POST 请求上重新加载页面答案

【问题标题】：Page reloading on POST request using fetch使用 fetch 在 POST 请求上重新加载页面
【发布时间】：2020-06-19 12:26:12
【问题描述】：

我正在尝试向 node.js 服务器发出发布请求，以使用 Fetch API 向服务器提交一些数据。现在我想根据服务器发回的响应显示一条成功消息，但我无法这样做，因为每次尝试时页面都会自行刷新这样做。我尝试了许多不同的方法来阻止这种情况（例如，e.preventDefault()，将按钮更改为 div，将按钮的类型更改为按钮而不是提交），但似乎没有任何效果。请有人帮助我。在此处发布我的 HTML 和 Javascript 代码。另外我对网络开发很陌生（只有2个月的经验），所以请你也告诉我我遵循的方法是对还是错。谢谢！

我在 css 部分使用语义 UI

HTML 代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
    <link rel="stylesheet" href="./styles/styles.css">
</head>

<body>
    <div class="ui fixed inverted menu">
        <div class="ui container">
            <a href="#" class="header item">
                  My Project
            </a>
        </div>
    </div>
    <div class="ui main text container">
        <form class="ui loading form" id="main_form">
            <div class="field">
                <textarea name="message" id="otp_message" cols="30" rows="10"></textarea>
            </div>
            <div class="ui success message">
                <div class="header">OTP Sent</div>
                <p>You've successfully sent the OTP on Mobile Number</p>
            </div>
            <div class="ui center aligned grid container">
                <div class="ui row">
                    <button type="submit" class="ui green button" id="btn_validate">Send</button>
                </div>
            </div>
        </form>
    </div>
</body>
<!-- <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script> -->

<script src="./scripts/send_message.js"></script>

</html>

Javascript：

let id;
let otp;
function processUser() {
    const parameters = location.search.substring(1);
    id = (parameters.split("=")[1]);
    let url = 'http://localhost:3030/ShowContacts?id=';
    url += id;
    let data;
    fetch(url, {method:"GET"})
    .then(response => {
        if (response.status === 404) throw new Error('User not found');
        return response.text();
    })
    .then(response => {
        data = JSON.parse(response);
        // document.getElementById('name').innerText += ' ' + jsonDATA.first_name + ' ' + jsonDATA.last_name;
        // document.getElementById('phone_number').innerText += ' ' + jsonDATA.mobile_number;
        generateOTP();
    })
    .catch(e => {
        console.log(e.message);
    });
}
processUser();
async function generateOTP() {
    let url = 'http://localhost:3030/getOTP';
    fetch(url, { method: "GET" })
    .then(response => {
        if (response.status === 404) throw new Error('Unable to generate otp');
        return response.text();
    })
    .then(response => {
        const jsonDATA = JSON.parse(response);
        otp = jsonDATA.otp;
        document.getElementById('main_form').classList.remove('loading');
        document.getElementById('otp_message').value = `Hi. Your OTP is: ${otp} . Please do not share it with anybody else.`;
    })
    .catch(e => {
        console.log(e.message);
    })
}

const myForm = document.getElementById('main_form');
// const btn = document.getElementById('btn_validate');

document.forms['main_form'].addEventListener('submit', (event) => {
    event.preventDefault();
    let otpSent = false;
    const message = document.getElementById('otp_message').value;
    const raw = JSON.stringify({
        id: id,
        message: message,
        otp: otp
    });
    const requestOptions = {
        method: 'POST',
        body: raw
    };
    const url = "http://localhost:3030/otpSent";
    fetch(url, requestOptions)
    .then(response => response.json())
    .then(response => {
        otpSent =  response.success;
        if (otpSent) {
            let prevClassValue = myForm.getAttribute('class');
            prevClassValue += " success";
            myForm.setAttribute('class', prevClassValue);
        }
    })
    .catch(error => console.log(error));
})

【问题讨论】：

因为它是一个带有按钮类型提交的表单
@RahulPadalkar 我也尝试使用 div 代替那个，没有好处
你能发一个 jsfiddle 链接吗？
把return false放在事件处理函数的最后。
@Thevs 谢谢老兄！那行得通，但是为什么'.t event.preventDefault() 事情不起作用？像这样返回 false 是一个好习惯吗？

标签： javascript html post fetch

【解决方案1】：

我有下一个代码：

    const loginHandler = async (event) => {
        event.preventDefault();
        const data = await login({...form})
    }

login 是我的自定义钩子中的一个函数，但更简单，它只是通过 fetch 在确切的 url 上发送信息。顺便说一句，我理解，页面刷新，这只是表单与按钮的常见行为。所以我在 fetch 之前添加 event.preventDefault() （这很重要）。

在您的情况下，您也有 from with 按钮，并且刷新会相应地进行。

 1. Add onClickHandler

    const submitHandler = async(event) => {
        event.preventDefault()
       ...logic
    }

 2. Connect this handler to button

 <button type="submit" onClick={submitHandler} class="ui green button" id="btn_validate">Send</button>

【讨论】：