'How to POST data to a webpage using ajax and a Local JSON file?

I'm trying to update a list by entering information into the input fields of the html webpage using ajax alongside a local JSON file which already has existing information, all the files are in the same directory as the .html file.

The object has 3 attributes: 1. Name, 2. Species, 3. Favorite Food.

The information I enter should display in the "Existing Pets" heading.

this is the html doc:

<!DOCTYPE html>
<html lang="en" class="loading">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="description"
        content="Convex admin is super flexible, powerful, clean &amp; modern responsive bootstrap 4 admin template with unlimited possibilities.">
    <meta name="keywords"
        content="admin template, Convex admin template, dashboard template, flat admin template, responsive admin template, web app">
    <meta name="author" content="PIXINVENT">
    <title>AJAX & JSON</title>
    <link rel="shortcut icon" type="image/x-icon" href="/3025033.png">
    <link rel="shortcut icon" type="image/png" href="/3025033.png">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <link
        href="https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900%7CMontserrat:300,400,500,600,700,800,900"
        rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="app-assets/fonts/feather/style.min.css">
    <link rel="stylesheet" type="text/css" href="app-assets/fonts/simple-line-icons/style.css">
    <link rel="stylesheet" type="text/css" href="app-assets/fonts/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="app-assets/css/app.css">
</head>

<body style="display:flex; flex-direction:row; justify-content:center;
min-height:100vh;">
    
    <header>
        <h1><br><br><a class="font-weight-bold">JSON and AJAX</a></h1>

        <h4><a class="font-weight-bold">Existing Pets</a></h4>
        <ul id="orders">
        </ul>
        <h4>
            <a class="font-weight-bold">Add Pets</a>
        </h4>
        <p>Name: <input type="text" id="name"></p>
        <p>Species: <input type="text" id="species"></p>
        <p>Fav food: <input type="text" id="favfood"></p>

        <button id="addpets">Add!</button>

        <script src="app-assets/vendors/js/core/jquery-3.3.1.min.js"></script>
        <script src="app-assets/vendors/js/core/popper.min.js"></script>
        <script src="app-assets/vendors/js/core/bootstrap.min.js"></script>
        <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

        <script src="/main.js"></script>

</body>

</html>

This is the .js file:

$(function () {
    var $data = $('#pets');
    var $name = $('#name');
    var $species = $('#species');
    var $favfood = $('#favfood');
    $.ajax({
        type: 'GET',
        url: '/animals-1.json',
        success: function (data) {
            $.each(data, function (i, newOrder) {
                $data.append('<li><a class="font-weight-bold">Name: </a>' + newOrder.name + ', <a class="font-weight-bold">Species: </a>' + newOrder.species + ', <a class="font-weight-bold">Favorite Food: </a>' + newOrder.favfood + "</li>");
            });
        },
        error: function () {
            Swal.fire({
                title: 'Error!',
                text: 'Your request could not be processed',
                icon: 'error',
                confirmButtonText: 'Ok'
            })
        }
    });
    $("#addpets").click(function(){

        var newp = {
            name: $name.val(),
            species: $species.val(),
            $favfood: $favfood.val(),
        };
        $.ajax({
            type: 'POST',
            url: '/animals-1.json',
            data: newp,
            success: function(newpts){
                $data.append('<li><a class="font-weight-bold">Name: </a>' + newpts.name + ', <a class="font-weight-bold">Species: </a>' + newpts.species + ', <a class="font-weight-bold">Favorite Food: </a>' + newpts.favfood + "</li>");
            },
            error: function(){
                Swal.fire({
                    title: 'Error!',
                    text: 'Your request could not be processed',
                    icon: 'error',
                    confirmButtonText: 'Ok'
                })  
            }
        });
    });
});

moveover, data in the JSON file:

[
  {
    "name": "Meowsy",
    "species" : "cat",
    "favfood": "tuna"
  },
  {
    "name": "Barky",
    "species" : "dog",
    "favfood": "carrots"
  },
  {
    "name": "Purrpaws",
    "species" : "cat",
    "favfood": "mice"
  }
]

I've double checked the name directory etc of the JSON file.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How to POST data to a webpage using ajax and a Local JSON file?

Sources

Related Questions