Result not displaying in localhost Django

Question

The result is not displaying in localhost, but it is displaying in http://127.0.0.1:8000/ Here is my code. I don't know why will that happen, I'm new to Django, so your solution would really help me to solve this. Thanks in advance!

Index.html

<script>
    $(document).ready(() => {
        $("input[id='image']").on('change', function (event) {
            let input = this;
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#banner').css('width', '350px')
                $('#banner').addClass('img-thumbnail')
                $('#banner').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        })

        $('#process').click(() => {
            $('.buttons').hide()
            $('.loader').show()
            $('#title').html("Processing...")
            let image = $('#image').prop('files')[0]
            var data = image['name'];

            console.log(data)
            $.ajax({
                url: "http://127.0.0.1:8000/api/",
                type: "POST",
                enctype: 'multipart/form-data',
                dataType: 'json',
                data: {
                    image: data,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success: function (xhr) {
                    alert("Error while processing")
                },
                error: function (xhr) {
                    $('#title').html("Result")
                    let result = (xhr.responseText).split("-");
                    let disease = result[0];
                    let accuracy = result[1];
                    $('.loader').hide()
                    $('#disease').html("Result: " + disease)

                    $('#graph').attr('src', '{% static "graph.png" %}')
                    $('.result').show()
                }
            })
        })
    })
</script>

Output using localhost

Output using http://127.0.0.1:8000/