时间戳

首页 > 解决方案 > 提交信息后，我如何成功地重定向到我的 .js 文件（reactjs）而不是我的 php 文件？

javascript - 提交信息后，我如何成功地重定向到我的 .js 文件（reactjs）而不是我的 php 文件？

问题描述

截至目前，我已通过成功将信息插入数据库（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";
    }
}

标签： javascriptphphtmlreactjsdebugging

解决方案

不要使用 type="submit" 按钮。使用 type="button" 或 <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 重定向。

推荐阅读