-1

This is my first time dealing with REST services and Javascript so excuse any silly mistakes.

I created a REST service using Java (Netbeans) and now I am trying to consume it on a html page using jQuery and AJAX.

I have tested the REST service locally (through test-resbeans.html) and can confirm that when I enter ID of 1, the User object I am looking for is returned in XML 

<?xml version="1.0" encoding="UTF-8"?> 
   <user> 
       <type>student</type> 
       <userID>1</userID> 
       <username>Tom</username> 
   </user>

Here is my single html page that is running the jQuery function / Ajax. 

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Web Services</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
        <script src="jquery-3.3.1.min.js"></script>
        <style>
            .table td {
                border-top: none;
            }
        </style>

    </head>
    <body>
        <div class="row" style="margin-top: 20px;">
            <div class="container">
                <h1>User Finder</h1>
                <div class="form-group" style="margin-top: 20px;">
                    <input type="text" class="form-control" id="id" placeholder="Enter ID" required>
                </div>
                <button id="searchbtn" type="submit" class="btn btn-primary">Search</button>
            </div>
        </div>
        <script src="jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
            $('#searchbtn').click(function () {
                var requestData = $('#id').val();
                $.ajax('http://localhost:8080/RESTfulLITj/webresources/web.user/' + requestData,{
                    dataType: 'xml',
                    type: 'GET',
                    data: {},

                    success: function (data) {
                        alert("test alert")
                        var name = $(this).find('username').text();
                        alert(name);
                    }
                    failure: function (errorMsg){ alert("error") }
                    });
                });
        </script>
    </body>
</html>

The "test alert" is not even appearing so I'm not sure what's going on. Again, apologies if there's something blatantly incorrect, this is my first time writing JS and using Web Services.

Shox2711
  • 139
  • 1
  • 12
  • Have you checked your console for any possible errors? – Praveen Kumar Purushothaman May 22 '18 at 22:35
  • Apologies for the lack of understanding, but which console would this be? How would I find it? – Shox2711 May 22 '18 at 22:36
  • Just checked the browser console, I have an error " No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access." – Shox2711 May 22 '18 at 22:40
  • So you have to set this header in Java: ""Access-Control-Allow-Origin", "*" " look this https://stackoverflow.com/questions/18234366/restful-webservice-how-to-set-headers-in-java-to-accept-xmlhttprequest-allowed/18236195 – Emeeus May 22 '18 at 22:42
  • `$(this).find('username').text();` wat? `this` isn't what you think it is. – Kevin B May 22 '18 at 22:48
  • Man if you're trying using an alert inside the success doesn't will display because are inside anonymous function !! Use console.log of data or see with devtools f12 chrome the tab network – Joel Garcia Nuño May 22 '18 at 22:50

1 Answers1

-1

CORS issue, added Access-Control-Allow-Origin plug-in to chrome.

Shox2711
  • 139
  • 1
  • 12