如何重定向到js组件并在单击提交时通过php将信息发送到db？-Java 学习之路

单击 submit 后，我将被重定向到 Home.js ，没有任何问题，但没有信息没有发送到数据库 .

但是，如果我确实摆脱了重定向，那么数据会毫无问题地发送到数据库，但它不会将我重定向到 Home.js . 相反，它将我重定向到 demo.php

Goal ：如何成功重定向到 Home.js （我现在是这样）并同时将数据发送到数据库？

我做错了什么，我该如何解决？

这是 Login.js ：

import React, { Component } from 'react';
import Home from "./Home";

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            redirect: false
        };
        this.nextPage = this.nextPage.bind(this);
    }

    nextPage(e) {
        e.preventDefault();
        this.setState({redirect: true});
    }

    render() {
        const go = this.state.redirect;

        if(go) return <Home/>;

        return (
            <div>
                <form action="http://localhost/demo_react/api/demo.php" onSubmit={(e) => this.nextPage(e)} method={"POST"} encType="multipart/form-data">

                    <div className="form-group">
                        <label htmlFor="username">Email</label>
                        <input className="form-control" type="text" name="username"/>
                    </div>

                    <div className="form-group">
                        <label htmlFor="password">Password</label>
                        <input className="form-control" type="password" name="password"/>
                    </div>

                    <button className="btn btn-primary" value="Login" name={"submit"}>Submit</button>

                </form>
            </div>
        );
    }
}

export default Login;

这是 demo.php ：

$connection = mysqli_connect("localhost", "root", "", "loginapp");
$username = $_POST['username'];
$password = $_POST['password'];

if(isset($_POST['submit'])) {
    $query = "INSERT INTO users(username, password) ";
    $query .= " VALUES('$username', '$password')";

    $result = mysqli_query($connection, $query);

    if (!$result) {
        die("Query failed" . mysqli_error($connection));
    } else {
        echo "Data send successfully to SQL";
    }
}

1 回答

当您调用 e.preventDefault() 时，您正在指示浏览器不自动发送表单数据 . 相反，您必须自己执行该任务 .

在 nextPage(e) 方法中，您应该抓取表单数据并对服务器执行ajax POST请求 . 您可能应该使用组件状态来存储任何用户输入 .

这是你可以做到的一种方式 .

export default class FormComponent extends Component {
  state = {
    name: "",
    surname: ""
  };

  submitForm(e) {
    e.preventDefault();

    const formData = new FormData();
    formData.append("json", JSON.stringify(this.state));

    fetch("http://localhost/demo_react/api/demo.php", {
      method: "POST",
      body: formData
    });
  }

  render() {
    return (
      <form action="post">
        <div>
          <label htmlFor="name">Name</label>
          <input
            name="name"
            type="text"
            value={this.state.name}
            onChange={e => this.setState({ name: e.target.value })}
          />
        </div>

        <div>
          <label htmlFor="surname">Surname</label>
          <input
            name="surname"
            type="text"
            value={this.state.surname}
            onChange={e => this.setState({ surname: e.target.value })}
          />
          <button type="submit" onClick={e => this.submitForm(e)}>
            Submit
          </button>
        </div>
      </form>
    );
  }
}

回复于 2024-04-20T21:50:46+08:00

如何重定向到js组件并在单击提交时通过php将信息发送到db？

1 回答

相关问题