0

Добрый вечер, подскажите пожалуйста как в js (можно с использованием jQuery) через ajax передать данные массива структуры из php файла в json формате и поместить эти данные в таблицу?

В условии при loadTasks должны выгружаться все данные из php, там будет предусмотрена еще сортировка, но пока хотелось бы понять как просто получить данные можно какой-то пример?

index.html

  <div class="container">
    <div class="table-responsive">
      <table class="table">
        <thead>
        <tr>
            <th>Name:</th>
            <th>Type:</th>
            <th>Date:</th>
            <th>Status:</th>
        </tr>
        </thead>
        <tbody>

        </tbody>
      </table>
    </div>
  </div>

func.php

<?php
$tasks = [
    [
        'id' => '4',
        'name' => 'Task 4',
        'type' => 'frontend',
        'date' => '1512403290',
        'status' => '0',
    ],
    [
        'id' => '5',
        'name' => 'Task 5',
        'type' => 'frontend',
        'date' => '1512403320',
        'status' => '0',
    ],
    [
        'id' => '6',
        'name' => 'Task 6',
        'type' => 'backend',
        'date' => '1512403350',
        'status' => '1',
    ],
    [
        'id' => '2',
        'name' => 'Task 2',
        'type' => 'frontend',
        'date' => '1512403200',
        'status' => '0',
    ],
    [
        'id' => '3',
        'name' => 'Task 3',
        'type' => 'frontend',
        'date' => '1512403230',
        'status' => '0',
    ],
    [
        'id' => '1',
        'name' => 'Task 1',
        'type' => 'backend',
        'date' => '1512403260',
        'status' => '1',
    ],
];

switch($_REQUEST['function'])
{
    case 'loadTasks':
        $result = [];
        if($_REQUEST['type'] == '' || $_REQUEST['type'] == 'all'){
            echo json_encode($tasks);
            die();
        }
        foreach($tasks as $task){
            if($task['type'] == $_REQUEST['type']){
                $result[] = $task;
            }
        }
        echo json_encode($result);
        break;
    case 'deleteTask':
        if(empty($_REQUEST['id'])){
            echo 0;
            die();
        }
        // code delete task
        echo 1;
        break;
    case 'editTask':
        if(empty($_REQUEST['id']) || empty($_REQUEST['type']) || empty($_REQUEST['name'])){
            echo 0;
            die();
        }
        // code edit task
        echo 1;
        break;
}?>

3 ответа 3

1

Так, php у тебя выводит json-строку. Ты обращаешься к нему и принимаешь на стороне js с помощью jquery:

$.ajax({
  type: 'POST',
  url: 'func.php',
  dataType: 'json',
  success: function(res) {
    // Дальше делай с res-ом, что хочешь. Это будет как раз твоим массивом, который ты выводил в php
  },
});
3
  • Понял, в поле url: ссылку на php файл который находится на локальном сервере и у меня теперь появляется ошибка Failed to load test/fnc.php: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. 6 дек 2017 в 15:20
  • Попробуй прописать "Access-Control-Allow-Credentials: true" в файле .htaccess
    – DakEnviy
    6 дек 2017 в 15:30
  • прописал это в самом верху файла, но не помогло 6 дек 2017 в 16:03
0

В файле где вызывается функция в самом начале пропишите этот код:

header('Access-Control-Allow-Origin: *');
3
  • Ошибка та пропала, но теперь пишет: ReferenceError: header is not defined 6 дек 2017 в 16:05
  • А вы делаете запрос с http на http? или с http на https?
    – Bykuznec
    6 дек 2017 в 18:12
  • Тут нужно перед echo дать понять клиенту какой тип данных уйдёт в ответе - в вашем случае это должен быть вызов header(‘application/json’); а ещё лучше сделать это в самом начале файла по возможности. Да, и это должно быть в PHP файле, а не в JavaScriptовском. 6 дек 2017 в 19:48
0

Протоколы должны совпадать) а также попробуйте обновить ваш Jquery до последней версии

1
  • Так, в качестве локального сервера я использую openserver где находится этот func.php. В js файле для получения json в url пишу url: 'test/fnc.php' вверху файла этого js файла добавляю то что вы мне выше писали, протокол вроде http но в настройках openserver точной инфы не нашел, jquery обновил. Я понимаю что походу сильно туплю сейчас, за что заранее извиняюсь) 6 дек 2017 в 19:04

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.