Блог

Главная - Вопросы по программированию - Создание POST и ПОЛУЧЕНИЕ запроса на сервер JSON

Создание POST и ПОЛУЧЕНИЕ запроса на сервер JSON

#javascript #jquery #json #json-server

#javascript #jquery #json #json-сервер

Вопрос:

У меня есть локальный файл json, из которого я получаю доступ к данным. У меня есть текстовое поле и кнопка, которые заполняются случайными записями из файла. Требование простое — при нажатии кнопки, если я изменю значение текстового поля, те же данные также должны быть обновлены в файле json. Как это сделать?

Я использую json-server для установления соединения сервер-клиент, но он выдает ошибку ниже —

ПОЛУЧИТЬ http://localhost:3000/__rules 404 (не найден) (я не знаю, что здесь за __rules)

Я просто выполнил приведенные ниже команды из терминала vscode-

  1. установка npm -g json-serevr
  2. json-server —watch —api.json . (Файл json и файл html находятся в одной папке)
 <html>
<body>
 <form>
    <label>Name:</label>
    <input type="text" id="name" >
    <input type="submit" value="Submit" id="fetch">  
  </form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

$( document ).ready(function(){
  
  $.getJSON('api.json', function(data) {
            albums = data['Albums']
            var num = Math.floor(Math.random() * 3)  ;
            $("#name").val(albums[num].Name);
            })
})

$('#fetch').click(function(e){
        //e.preventDefault();
        var strname = $("#name").val();
        $.getJSON('api.json', function(data) {
          albums = data['Albums']
        $.post('api.json', function(data){
         albums[num].Name = strname 
        })
        })
        });
 
</script>
</body>
</html>
  
 {
    "Albums": [
    {
        "Name": "Desire"
       
    },
    {
        "Name": "Essentials",
        
    },
    {
        "Name": "Hard Rain",
        
    },
    {
        "Name": "Blackstar",
        
    }
    ]
}

Кто-нибудь может сказать мне, как заставить это работать? Я не очень осведомлен о node.js или любая другая технология на стороне сервера. Я попробовал вышеупомянутый метод и несколько других, но ничего не работает. Что я могу делать неправильно?

Комментарии:

1. не должен ли ваш маршрут быть чем-то вроде "http://localhost:3000/Albums/" вместо "api.json"

2. В этой строке num не определено из-за области видимости albums[num].Name

3. Здесь есть еще проблемы, но они кажутся базовыми, которые нужно исправить

4. @MarkSchultheiss Точно. Я не понял, что это за маршрут! И другие базовые вещи, которые я исправлю. num должен быть объявлен глобально. Моим приоритетом было запустить эти вызовы GET и POST первыми. Запрос GET работает, если я запускаю http-сервер 8080, но POST завершается с ошибкой. Я просто не могу понять, как обновить эти данные!

5. Только вы знаете, какой у вас порт, похоже, что у этого компонента по умолчанию 3000, но я никогда им не пользовался