API tools faq
paste
Advertisement
phippsy

JSON API Explorer (HTML, Javascript/jQuery)

phippsy
Dec 2nd, 2016
84
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.32 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta content="IE=edge" http-equiv="X-UA-Compatible">
  6.     <meta content="width=device-width, initial-scale=1" name="viewport">
  7.     <meta content="" name="description">
  8.     <meta content="" name="author">
  9.     <link href="../../favicon.ico" rel="icon">
  10.     <title>JSON API Explorer</title><!-- Latest compiled and minified CSS -->
  11.     <link href=
  12.    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"
  13.    rel="stylesheet">
  14.     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  15.     <!--[if lt IE 9]>
  16.      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  17.      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  18.    <![endif]-->
  19. </head>
  20. <body>
  21.     <div class="container">
  22.         <div class="header">
  23.             <h3>JSON API Explorer</h3>
  24.         </div>
  25.         <div class="row">
  26.             <div class="col-xs-12">
  27.                 <form class="form" id="api_explorer" name="api_explorer">
  28.                     <div class="form-group">
  29.                         <div class="row">
  30.                             <div class="col-xs-3">
  31.                                 <select class="form-control" id="method">
  32.                                     <option value="GET">GET</option>
  33.                                     <option value="POST">POST</option>
  34.                                     <option value="PUT">PUT</option>
  35.                                     <option value="DELETE">DELETE</option>
  36.                                     <option value="OPTIONS">OPTIONS</option>
  37.                                 </select>
  38.                             </div>
  39.                             <div class="col-xs-9">
  40.                                 <input class="form-control" id="url"
  41.                                placeholder="http://" type="text">
  42.                             </div>
  43.                         </div>
  44.                     </div>
  45.                     <div class="form-group">token
  46.                         <textarea class="form-control" id="token" rows=
  47.                        "3"></textarea>
  48.                     </div>
  49.                     <div class="form-group">
  50.                         <textarea class="form-control" id="body" rows=
  51.                        "3"></textarea>
  52.                     </div>
  53.                     <button class="btn btn-primary submit-button pull-right"
  54.                    type="submit">Launch Request</button>
  55.                 </form>
  56.             </div>
  57.         </div>
  58.         <div class="row">
  59.             <div class="col-xs-12">
  60.                 <fieldset>
  61.                     <legend>Result</legend>
  62.                     <pre class="well" id="result" style="overflow-wrap: break-word;">...</pre>
  63.                 </fieldset>
  64.             </div>
  65.         </div>
  66.         <footer class="footer">
  67.             <p>&copy; 2016 Phippsy</p>
  68.         </footer>
  69.     </div><!-- /container -->
  70.     <script src="http://code.jquery.com/jquery-latest.min.js">
  71.     </script>
  72.     <script>
  73.         $(function() {
  74.           $("#api_explorer").on("submit", function(event) {
  75.               event.preventDefault();
  76.               //var data = $("#frm_login").formToJson();
  77.               var endpoint = $("#url").val();
  78.               $("#result").text("");
  79.               $.ajax({
  80.                   dataType: 'JSON',
  81.                   beforeSend: function(xhr) {
  82.                     xhr.setRequestHeader("Authorization", 'Bearer ' + $("#token").val())
  83.                   },
  84.                   method: $("#method").val(),
  85.                   url: endpoint,
  86.                   data: $("#body").val()
  87.               }).done(function(msg) {
  88.                   console.log(msg);
  89.                   $("#result").text(JSON.stringify(msg,
  90.                       null, 2));
  91.               }).fail(function(msg) {
  92.                   console.log(msg);
  93.                   if (msg.responseText) {
  94.                       $("#result").text(JSON.stringify(JSON
  95.                           .parse(msg.responseText),
  96.                           null, 2));
  97.                   } else {
  98.                       $("#result").text(JSON.stringify(msg.responseJSON,
  99.                           null, 2));
  100.                   }
  101.               });
  102.           });
  103.         });
  104.     </script>
  105. </body>
  106. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!