Как правильно сделать вызов RestApi на JS?

Question

[prrrrrrr]

Впервые сталкиваюсь с Api. Подскажите, как правильно сделать вызов RestApi на JS?

Нашел в гугле простой пример кода RestApi на PHP:

<?php
 
// get the HTTP method, path and body of the request
$method = $_SERVER['REQUEST_METHOD'];
$request = explode('/', trim($_SERVER['PATH_INFO'],'/'));
$input = json_decode(file_get_contents('php://input'),true);
 
// connect to the mysql database
$link = mysqli_connect('localhost', 'user', 'pass', 'dbname');
mysqli_set_charset($link,'utf8');
 
// retrieve the table and key from the path
$table = preg_replace('/[^a-z0-9_]+/i','',array_shift($request));
$key = array_shift($request)+0;
 
// escape the columns and values from the input object
$columns = preg_replace('/[^a-z0-9_]+/i','',array_keys($input));
$values = array_map(function ($value) use ($link) {
  if ($value===null) return null;
  return mysqli_real_escape_string($link,(string)$value);
},array_values($input));
 
// build the SET part of the SQL command
$set = '';
for ($i=0;$i<count($columns);$i++) {
  $set.=($i>0?',':'').'`'.$columns[$i].'`=';
  $set.=($values[$i]===null?'NULL':'"'.$values[$i].'"');
}
 
// create SQL based on HTTP method
switch ($method) {
  case 'GET':
    $sql = "select * from `$table`".($key?" WHERE id=$key":''); break;
  case 'PUT':
    $sql = "update `$table` set $set where id=$key"; break;
  case 'POST':
    $sql = "insert into `$table` set $set"; break;
  case 'DELETE':
    $sql = "delete `$table` where id=$key"; break;
}
 
// excecute SQL statement
$result = mysqli_query($link,$sql);
 
// die if SQL statement failed
if (!$result) {
  http_response_code(404);
  die(mysqli_error());
}
 
// print results, insert id or affected row count
if ($method == 'GET') {
  if (!$key) echo '[';
  for ($i=0;$i<mysqli_num_rows($result);$i++) {
    echo ($i>0?',':'').json_encode(mysqli_fetch_object($result));
  }
  if (!$key) echo ']';
} elseif ($method == 'POST') {
  echo mysqli_insert_id($link);
} else {
  echo mysqli_affected_rows($link);
}
 
// close mysql connection
mysqli_close($link);
?>

Если перехожу вручную по ссылке — site.com/api.php/posts/3 выдает результат типа {"id":"3".....

Теперь сам вопрос: 1.как это сделать с помощью JS?
2.Кириллица выдётся таким образом: \u041b\u0435\u0439\u0442... как сделать нормальную выдачу?
3.И как сделать это в оформленном виде?

Пробовал так, не получилось:

<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
	if (this.readyState == 4 && this.status == 200) {
		console.log(this.responseText);
		jsonObject = JSON.parse(this.responseText);
		document.getElementById('output').innerHTML = JSON.stringify(jsonObject, undefined, 3);
	}
};
xhttp.open("GET", "site.ru/api.php/posts/3", true);
xhttp.send();
</script>

<pre id="output"></pre>

Comments

[di]

jsonObject = JSON.parse(this.responseText);
document.getElementById('output').innerHTML = JSON.stringify(jsonObject, undefined, 3);

Зачем вы сначала достаете парсите JSON, а на следующей же строке загоняете обратно в JSON? Зачем вы на место второго параметра replacer пихаете undefined?
Сделайте console.log(jsonObject);
Почитайте про функции которые используете
https://developer.mozilla.org/ru/docs/Web/JavaScri...
https://developer.mozilla.org/ru/docs/Web/JavaScri...

[prrrrrrr]

Алексей Долгов, вы можете просто написать правильный пример?

[di]

prrrrrrr, а что правильно - есть картошку или макароны? Не бывает правильно, бывают хорошие решения и не очень. Что возвращает REST API, какие данные? Не вижу данных. Что вы хотите с ними сделать, в каком элементе страницы вывести?
Мне самому их придумывать?
Допустим api возвращает JSON
{"title":"article","content":"la la la la"}
Тогда

<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    obj = JSON.parse(this.responseText);
    document.getElementById('title').innerHTML = obj.title;
    document.getElementById('content').innerHTML = obj.content;
  }
};
xhttp.open("GET", "site.ru/api.php/post/3", true);
xhttp.send();
</script>

Answer 1

[msdosx86]

На чистом пхп нет смысла пилить REST, тут лучше фреймворки использовать типа Laravel или Symfony.

Comments

[grinat]

Чувак только php учить начал, все что он сможет сделать с фреймворком это поплакать в углу.

Answer 2

[grinat]

На js
document.getElementById('output').innerHTML = this.responseText
console.log(JSON.parse(this.responseText))

<?php

// get the HTTP method, path and body of the request
$method = $_SERVER['REQUEST_METHOD'];
$request = explode('/', trim($_SERVER['PATH_INFO'],'/'));
$input = json_decode(file_get_contents('php://input'),true);

// connect to the mysql database
$link = mysqli_connect('localhost', 'user', 'pass', 'dbname');
mysqli_set_charset($link,'utf8');

// retrieve the table and key from the path
$table = preg_replace('/[^a-z0-9_]+/i','',array_shift($request));
$key = array_shift($request)+0;

// escape the columns and values from the input object
$columns = preg_replace('/[^a-z0-9_]+/i','',array_keys($input));
$values = array_map(function ($value) use ($link) {
    if ($value===null) return null;
    return mysqli_real_escape_string($link,(string)$value);
},array_values($input));

// build the SET part of the SQL command
$set = '';
for ($i=0;$i<count($columns);$i++) {
    $set.=($i>0?',':'').'`'.$columns[$i].'`=';
    $set.=($values[$i]===null?'NULL':'"'.$values[$i].'"');
}

// create SQL based on HTTP method
switch ($method) {
    case 'GET':
        $sql = "select * from `$table`".($key?" WHERE id=$key":''); break;
    case 'PUT':
        $sql = "update `$table` set $set where id=$key"; break;
    case 'POST':
        $sql = "insert into `$table` set $set"; break;
    case 'DELETE':
        $sql = "delete `$table` where id=$key"; break;
}

// excecute SQL statement
$result = mysqli_query($link,$sql);
// теперь на русском
header('Content-Type: application/json; charset=utf-8')
// die if SQL statement failed
if (!$result) {
    http_response_code(404);
    die(mysqli_error());
}

// print results, insert id or affected row count
if ($method == 'GET') {
    $out = array();
    for ($i=0;$i<mysqli_num_rows($result);$i++) {
        $out[] = mysqli_fetch_object($result);
    }
    // не надо вручную json пытаться сделать как в том примере
    echo json_encode($out);
} elseif ($method == 'POST') {
    echo mysqli_insert_id($link);
} else {
    echo mysqli_affected_rows($link);
}

// close mysql connection
mysqli_close($link);