每當我提交表單時，我都會在我的URL中獲取表單資料，而不是將其發布到我的后端

我在提交表單時遇到問題，它會將所有表單資料放入我的 URL，而不是將其發送到我的后端。我不確定是什么問題，起初我以為是因為我在表單標簽中沒有 method="post" 但這并沒有解決我的問題，因為它試圖將表單資料發送到本地主機： 3000/register 而不是 localhost:5000/register。任何幫助，將不勝感激。

Bellow 是我當前的前端代碼。

import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom'
import '../css/register.css';
import {IoMdArrowRoundBack} from 'react-icons/io'
import { useState } from 'react'
import axios, { Axios } from 'axios';


const Register = () => {

    const [emailReg, setEmailReg] = useState("");
    const [usernameReg, setUsernameReg] = useState("");
    const [passwordReg, setPasswordReg] = useState("");

    const register = () => {
        Axios.post('http://localhost:5000/register', {
            email: emailReg,
            username: usernameReg, 
            password: passwordReg, 
        }).catch(function (error) {
            console.log(error);
        });
    };

    return (
        <div className='background-image'>

            <div className='back-button'>
                <Link to='/'>
                    <IoMdArrowRoundBack id='back-arrow' />
                    <h3>Home</h3>
                </Link>
            </div>

        <div className="container-wrapper">
            <div className="container">

            <h1>Create Account</h1>

                <div className="wrapper">
                    <form>
                        <div className="textarea" id="email">
                         <input 
                            type="email" 
                            onChange={(e) => {
                                setEmailReg(e.target.value);
                            }} 
                            name="email" 
                            id="authentactor-email" 
                            placeholder="Email" 
                            defaultValue="" 
                            required 
                          />
                        </div>

                        <div className="textarea" id="username">
                          <input 
                            type="text" 
                            onChange={(e) => {
                                setUsernameReg(e.target.value);
                            }}
                            name="name" 
                            id="authentactor-text" 
                            placeholder="Username" 
                            defaultValue="" 
                            required 
                          />
                        </div>

                        <div className="textarea" id="password">
                          <input 
                            type="password" 
                            onChange={(e) => {
                                setPasswordReg(e.target.value);
                            }}
                            name="password" 
                            id="authentactor-password" 
                            placeholder="Password" 
                            defaultValue="" 
                            required 
                          />
                        </div>

                        <div id="button-wrapper">
                            <button id="button" onClick={register}>Create Account</button>
                        </div>
                    </form>


                    <div className='bottom-text-wrapper'>
                        <h4>Already have an account?   <Link to='/login'>Login Here</Link></h4>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
    )
}

export default Register

uj5u.com熱心網友回復：

根據HTML 生活標準

缺失值默認值和無效值默認值是提交按鈕狀態。

您可以找到有關此問題的更多資訊，但基本上添加type="button"到您的Create Account按鈕應該可以完成這項作業。

（所以像<button id="button" type="button" onClick={register}>Create Account</button>）

uj5u.com熱心網友回復：

由于某種原因，我發現我的輸入欄位中不能有“名稱”標簽，如下所示。

  <div className="textarea" id="password">
      <input 
        type="password" 
        onChange={(e) => {
            setPasswordReg(e.target.value);
        }}
        name="password" 
        id="authentactor-password" 
        placeholder="Password" 
        defaultValue="" 
        required 
      />
    </div>

一旦我洗掉了“名稱”標簽，我就能夠將我的表單發布到后端，我現在只在我的 url 中得到一個問號，而不是所有的表單資料。

下面的正確代碼。

  <div className="textarea" id="password">
      <input 
        type="password" 
        onChange={(e) => {
            setPasswordReg(e.target.value);
        }} 
        id="authentactor-password" 
        placeholder="Password" 
        defaultValue="" 
        required 
      />
    </div>

標籤：

上一篇：Ajax呼叫不會將字串傳遞給控制器

下一篇：three.js-如何在網格之前渲染scene.background？