Как мне успешно перенаправить мой файл .js (actjs) вместо моего файла php при отправке информации?

Question

На данный момент я успешно вставляю информацию в базу данных (SQL, phpMyAdmin) через Home.js, но проблема в том, что каждый раз, когда пользователь вводит информацию и нажимает submit, она перенаправляется на мой demo.phpфайл вместо Next.js.

Другими словами, как я могу сделать так, чтобы после получения пользователем информации успешно входил в базу данных и переходил на следующую страницу?(Next.js)?

Я знаю, <form action="http://localhost/demo_react/api/demo.php" method={"POST"} encType="multipart/form-data"> неизбежно приведет меня к demo.php, но если я не буду использовать это, то ничто не будет отправлено на мою базу данных.

Что я делаю не так и как могуЯ это исправлю?

Вот Home.js:

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

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            show: false
        };
        this.getPHP = this.getPHP.bind(this);
    }

    getPHP(e) {
        this.setState({show: true});
        let formData = new FormData();
        fetch(`http://localhost/demo_react/api/demo.php`, {
            method: 'POST',
            body: formData
        }).then(res => res.json())
            .then(response => {
                console.log('response');
                console.log(response);
                e.preventDefault();
            });
    }

    render() {
        const goNext = this.state.show;
        if(goNext) {
            return <Next/>;
        }
        return (
            <div>
                <form action="http://localhost/demo_react/api/demo.php" 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>
                    <input className="btn btn-primary" type="submit" value="Login" onSubmit={e => this.getPHP(e)} name={"submit"}/>
                </form>
            </div>
        );
    }
}

export default Home;

Вот 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 "check database";
    }
}

Answer 1

Не используйте кнопку type = "submit".Используйте type = "button" или .Если в вашей форме не было отправки, проблема решена.

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

    var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
    var user = (document.getElementById(form).username) ? encodeURIComponent(document.getElementById(form).username.value) : '';
    var pass = (document.getElementById(form).password) ? encodeURIComponent(document.getElementById(form).password.value) : '';
    var data = 'username=' + user + '&password=' + pass;
    request.open('POST', document.getElementById(form).action, false);
    request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset:UTF-8");
    request.setRequestHeader("Content-length", data.length);
    request.send(data);
    if (request.status == 200) {
            alert('Send OK.');
    } else {
            alert('Send error.');
    }

Включенный фрагмент получает URL-адрес для отправки информации из самого действия формы.Вы можете оптимизировать код, вероятно, много, но это отправная точка.В этом коде используется обычный JS, например, вы можете изменить его на jQuery (например, версия jQuery короче).

Кроме того, если вам в конечном итоге потребуется выполнить перенаправление, используйте вместо этого перенаправление JS.