PHP, React, MySQL ошибка контактной формы базы данных - PullRequest
Новая
       8

PHP, React, MySQL ошибка контактной формы базы данных

0 голосов
/ 25 мая 2020

Я делаю простую целевую страницу, используя react и php mysql. Я хочу разместить запросы в базе данных php. Я могу отобразить объект ответа на передней консоли; У меня возникла ошибка при попытке отправить контактную информацию в базу данных. Мой интерфейс написан с использованием реакции, и в настоящее время консоль регистрирует объект состояния, который я хочу опубликовать в своей базе данных MySQL. Мои столбцы базы данных:

КОД ПЕРЕДНЕГО КОНЦА:

Здесь я консоль регистрирую результаты; У меня возникла ошибка в сети: «Не удалось загрузить данные ответа» 

import React, { Component } from "react";
import axios from "axios";

const url = "https://localhost:8080/react-php/insert.php";

class Form extends Component {
  constructor() {
    super();
    this.state = {
      name: "",
      email: "",
      message: "",
      formError: false,
      error: null
    };
  }

  handleFormSubmit = e => {
    e.preventDefault();

    if (
      this.state.name === "" ||
      this.state.email === "" ||
      this.state.message === ""
    ) {
      this.setState({
        formError: true
      });
      return false;
    } else {
      this.setState({
        formError: false
      });
      const obj = {
        name: this.state.name,
        email: this.state.email,
        message: this.state.message
      };
      console.log(obj);
      axios
        .post(url, obj)
        .then(res => console.log(res.data))
        .catch(error => this.setState({ error: error.message }));

      this.setState({
        name: "",
        email: "",
        message: ""
      });
    }
  };

  // Functions to  get the input values
  getName = e => {
    let name = e.target.value;
    this.setState({
      name: name
    });
    console.log(this.state.name);
  };

  getEmail = e => {
    let email = e.target.value;
    // eslint-disable-next-line no-useless-escape
    if (
      email.match(
        /^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/
      )
    ) {
      this.setState({
        email: email
      });
    } else {
      this.setState({
        email: ""
      });
      console.log("Incorrect e-mail, must match expression");
    }

    console.log(this.state.email);
  };

  getMessage = e => {
    let message = e.target.value;
    this.setState({
      message: message
    });
    console.log(this.state.message);
  };

  render() {
    return (
      <form id="contact">
        {/* I am just sending a basic error message */}
        {this.state.formError && (
          <p className="error">Fill all the input fields please.</p>
        )}
        {/* <p>Fill in the next form to send us a message</p> */}
        <div>
          <label htmlFor="name">Name</label>
          <input
            type="text"
            name="name"
            placeholder=""
            onChange={this.getName}
            value={this.state.name}
          />
        </div>
        <div>
          <label htmlFor="email">Email</label>
          <input
            type="email"
            name="email"
            placeholder=""
            onChange={this.getEmail}
            value={this.state.email}
          />
        </div>
        <div>
          <label htmlFor="name">Message</label>
          <textarea
            onChange={this.getMessage}
            maxLength="450"
            value={this.state.message}
          ></textarea>
        </div>
        <div>
          <p>We will answer as soon as possible</p>
          <input
            type="submit"
            name="submit"
            value="Send"
            onClick={this.handleFormSubmit}
          />
        </div>
      </form>
    );
  }
}

export default Form;

КОД ЗАВЕРШЕНИЯ: Я импортировал соединение, которое подключается к моему локальному хосту через порт 8080. 

<?php
require 'connect.php';


header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
$postdata = file_get_contents("php://input");

if(isset($postdata) && !empty($postdata)){

    $request = json_decode($postdata);


    $name=$request->name;
    $email=$request->email;
    $message=$request->message;

}

$query = mysqli_query($con, "INSERT INTO `users` (`id`, `name`, `email`, `message`) VALUES (NULL, '{$name}', '{$email}', '{$message}')");
echo "Error: " . mysqli_error($con);


if(mysqli_query($con, $query)){
    http_response_code(201);
}else{
    http_response_code(422);

}

1 Ответ

0 голосов
/ 25 мая 2020

изменить 

const url = "https://localhost:8080/react-php/insert.php"

на 

const url = "http://localhost:8080/react-php/insert.php"

Вероятно, вы получаете ошибку сертификата SSL, потому что у вас нет сертификата SSL

...