Как запустить ajax, чтобы можно было записать данные в json?

@Katerina1993 · Регистрация: 17.01.2017

Студворк — интернет-сервис помощи студентам

Пытаюсь отправить данные на сервер, в итоге получаю ошибку.

SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data

Как запустить скрипт, чтобы можно было записать данные в json? Уже все перепробовала примеры в интернете не работают, обязательно появляются какие-то ошибки.

Мой код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-1.9.1.js"></script>
<title>Example Json</title>
</head>
 
<body>
 
  <h1> Простая форма для проверки работы JSON </h1>
  <!-- делаем форму с полями ввода -->
  <p>
    <input type="text" id="name" placeholder="Ваше имя">
    <input type="text" id="lastname" placeholder="и фамилия">
    <!-- по нажатию на эту кнопку данные уйдут на сервер -->
    <button onclick="sendJSON()">Проверить JSON</button>
   
<script>
 
 
function sendJSON()
  {
 
var xhr = new XMLHttpRequest(),
    jsonArr,
    method = "GET",
    jsonRequestURL = "./jsonFile.txt";
 
xhr.open(method, jsonRequestURL, true);
xhr.onreadystatechange = function()
{
    
    if(xhr.readyState == 4 && xhr.status == 200)
    {
       xhr.open("POST", '/json.php', true);
        jsonArr = JSON.parse(xhr.responseText);
 
       
        jsonArr.push({"nissan": "sentra", "color": "green"});
 
       
        
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        
        xhr.send("jsonTxt="+JSON.stringify(jsonArr));
       
        
       
    }
};
xhr.send(null);
}
</script>
</body>
</html>

php-код

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
header("Content-Type: application/json");
 
$file = 'jsonFile.txt';
 
if($_SERVER['REQUEST_METHOD'] === 'POST')
 
{
    file_put_contents($file, $_POST["jsonTxt"]);
   
}
else if($_SERVER['REQUEST_METHOD'] === 'GET')
 
{
    echo file_get_contents($file);
    
}

@mr_dramm · 18.08.2022, 23:37

Сообщение от Katerina1993

Как запустить скрипт, чтобы можно было записать данные в json? Уже все перепробовала примеры в интернете не работают, обязательно появляются какие-то ошибки.

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

Сообщение от Katerina1993

jsonArr = JSON.parse(xhr.responseText);

но отправляете результат работы file_get_contents

PHP
1
echo file_get_contents($file);

нужно установить заголовок отправки данных JSON

PHP
1
header('Content-Type: application/json; charset=utf-8');

и закодировать все это в json

PHP/HTML
1
 json_encode([ 'filedata' => file_get_contents($file) ]);

Что то вроде этого должно получиться

PHP
1
2
3
4
5
else if($_SERVER['REQUEST_METHOD'] === 'GET')
{
    header('Content-Type: application/json; charset=utf-8');
    echo json_encode([ 'filedata' => file_get_contents($file) ]);
}

Добавлено через 5 минут
И кстати JSON.parse вернет объект, а ку него нет метода push

Добавлено через 3 минуты
Попробуйте для тачала передать и поработать с чем то более простым чем файлы, например отправьте в браузер строку

PHP
1
2
3
4
5
else if($_SERVER['REQUEST_METHOD'] === 'GET')
{
    header('Content-Type: application/json; charset=utf-8');
    echo json_encode([ 'data' => "hello" ]);
}

и прочитайте data на клиенте, как только будет прогресс переходите к файлам

@Katerina1993 · 19.08.2022, 18:24 **[ТС]**

Написала простой пример, работает.
Код клиента:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
  <title>
    Отправляем JSON-данные на сервер
  </title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
 
<body>
  <script>
 jsontent = {"user":{
    "firstName":"Name1",
    "lastName":"Name2",
    "age":30
  }
  }
  
        const jsonString = JSON.stringify(jsontent);
        console.log(jsonString);
        const xhr = new XMLHttpRequest();
        xhr.open("POST",'action.php');
        xhr.setRequestHeader("Content-Type","application/json");
        xhr.send(jsonString);  
  </script>
</body>
 
</html>

Код сервера:

PHP
1
2
3
4
5
6
<?php
$requestPayload = file_get_contents("php://input");
$object = json_decode($requestPayload,true);
$myFile = "data.json";
file_put_contents($myFile,$requestPayload);
?>

Теперь данные передаются и записываются в файл.

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .