.getJSON won't succeed even though URL works

Question

.getJSON won't succeed even though URL works

87 Views Asked by Kyle Pryor At 13 April 2025 at 20:17

HTML

<body>
    <header>
        <div class="container-fluid">
            <h1>Wikipedia Viewer</h1>
            <form id="userInput">
                <input id="query" type="text" name="userInput" value="" placeholder="Search">
                <input id="submitBtn" type="submit" name="send" value="Click!">
            </form>
            <a id="randomArticle" href="https://en.wikipedia.org/wiki/Special:Random"><i class="fa fa-random fa-2x" aria-hidden="true"></i></a>
        </div>
    </header>
    <div class="results">
         </div>
</body>

</html>

Javascript

 var url = "https://en.wikipedia.org/w/api.php?action=opensearch&datatype=json&callback=?&search=";
    var userQuery = "";
    var html = "";
    $(document).ready(function () {
        $("#userInput").submit(function (e) {
            userQuery = document.getElementById("query").value;
            $.getJSON(url + userQuery, function (data) {
                for (var i = 0; i < data[1].length; i++) {
                    html = '<article><a href="' + data[3][i] + '"target="_blank"><h3>' + data[1][i] + '</h3><p>' + data[2][i] + '</p></a></article>';
                    $(".results").append(html);
                }
            });
        });
    });

When I get to the .getJSON it just won’t succeed, I have tested the URL and the JSON comes up in browser but the request using Jquery just won’t work.

Original Q&A

There are 2 best solutions below

Hassaan On 21 December 2016 at 18:14

Can you log the success and fail method. Possibly, there can be Cross Origin issue, if that so then you need to add cors at server level.

You can log the success and failure as mentioned http://api.jquery.com/jquery.getjson/

// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.getJSON( "example.json", function() {
  console.log( "success" );
})
  .done(function() {
    console.log( "second success" );
  })
  .fail(function() {
    console.log( "error" );
  })
  .always(function() {
    console.log( "complete" );
  });

// Perform other work here ...

// Set another completion function for the request above
jqxhr.complete(function() {
  console.log( "second complete" );
});

**nyedidikeke** · Accepted Answer

All you need to do is to add a jQuery preventDefault() Method to your button click event as in:

$(document).ready(function () {
    $("#userInput").submit(function (e) {
        e.preventDefault();
        userQuery = document.getElementById("query").value;
        $.getJSON(url + userQuery, function (data) {
            for (var i = 0; i < data[1].length; i++) {
                html = '<article><a href="' + data[3][i] + '" target="_blank"><h3>' + data[1][i] + '</h3><p>' + data[2][i] + '</p></a></article>';
                $(".results").append(html);
            }
        });
    });
});

.getJSON won't succeed even though URL works

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in GETJSON

Trending Questions

Popular # Hahtags

Popular Questions