Ajax-вызов из React на PHP-файл

Я пытаюсь сделать ajax вызов из моего компонента react к файлу php, в котором я ожидаю, что файл php вернет определенный вывод, но вместо этого я получаю весь исходный код. Может кто-нибудь помочь?

Это то, что у меня есть на моем компоненте react.

import React from 'react';
import {Link} from 'react-router';


export default class BikePage extends React.Component {
    onFormSubmitSuccess(e) {
      e.preventDefault();
    $.ajax({
      url: 'php/new_user.php',
      type: "GET",
      success: function(data) {
        console.log('success')
        console.log(data);
      }.bind(this),
      error: function(xhr, status, err) {
        console.log('error')
      }.bind(this)
    });
  }

  render(){
    return (
      <button onClick={this.onFormSubmitSuccess.bind(this)} >click here</button>
    )
  }
}

Это то, что на моем файле php.

<?php
//Function to check if the request is an AJAX request
$return = 'hello'
echo json_encode($return);
?>

Все, что я пытаюсь проверить, это получить «Hello» на моей консоли. но вместо этого я получаю весь php файл.

3 ответа

  1. Прежде всего, ‘hello’не является кодируемым json, который необходимо использовать, например, array (‘result’ = > ‘hello’).

    Если вы получаете содержимое файла php, кажется, что вы не используете рабочий локальный сервер.

  2. Вы должны установить headerв вашемPHP, чтобы отправить результаты JSON

    Попробовать это

    <?PHP
    $data = 'hello'
    header('Content-Type: application/json');
    echo json_encode($data);
    ?>
    
  3. В вашем случае, вы используете json_encode()в PHP для получения ответа, а не используя DataType:json, вам просто нужно использовать тип данных как JSON, как:

    dataType: "json",
    

    Вывод json должен выглядеть следующим образом: "message"

    Модифицированный Ajax:

    $.ajax({
    url: 'php/new_user.php',
    type: "GET",
    dataType: "json",
    success: function(data) {
        console.log('success');
        console.log(data); // will print "message"
    }.bind(this),
    error: function(xhr, status, err) {
        console.log('error');
    }.bind(this)
    });