使用jQuery调用REST服务失败，寻求技术帮助

Hey there! Since this is your first time working with JS and REST services, let's break down why your "test alert" isn't popping up, and fix the issues step by step:

1. Incorrect AJAX Error Handler #

jQuery's $.ajax() doesn't have a failure option — the valid parameter name is error. Because of this, even if your request fails, you won't see the error alert to debug what's wrong.

2. Likely Cross-Origin Resource Sharing (CORS) Issue #

If you're opening your HTML file directly (using the file:// protocol) instead of serving it from the same localhost:8080 server as your REST service, browsers will block the AJAX request due to CORS restrictions. This is a super common beginner gotcha!

To confirm this, check your browser's developer tools (F12 > Console tab) — you'll probably see an error about cross-origin requests being blocked. Fixes for this include:

• Hosting your HTML file on the same Tomcat server as your REST service, so they share the same origin
• Adding a CORS filter to your Java REST service to explicitly allow cross-origin requests

3. Wrong this Reference in Success Callback #

In the success function, this doesn't point to the returned XML data — it refers to the AJAX settings object instead. So $(this).find('username') won't locate anything. You need to use the data parameter passed into the success callback to parse the XML.

4. Duplicate jQuery Imports #

You've included jquery-3.3.1.min.js twice (once in the <head> and once right before your script). This can cause unexpected conflicts — remove one of the imports.

Fixed Code with All Changes Applied #

<!DOCTYPE html>
<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 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");
                    // Use the passed data parameter to parse XML
                    var name = $(data).find('username').text();
                    alert(name);
                },
                // Corrected error handler parameter
                error: function (errorMsg){
                    console.log(errorMsg); // Log full error details to console for debugging
                    alert("Error occurred! Check browser console for details.");
                }
            });
        });
    </script>
</body>
</html>

Pro Debugging Tip: #

Always keep your browser's developer tools (F12) open when working with JS/AJAX. The Console tab will show you exact error messages (like 404 not found, CORS blocks, etc.) that will point you straight to the problem. It's your most valuable debugging tool!

内容的提问来源于stack exchange，提问作者Shox2711