PHP Classes
elePHPant
Icontem

File: examples/test-ajax.html

Recommend this page to a friend!
  Classes of Marcel Kohls  >  Very Simple API  >  examples/test-ajax.html  >  Download  
File: examples/test-ajax.html
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Very Simple API
Implement REST APIs using service classes
Author: By
Last change:
Date: 4 months ago
Size: 4,851 bytes
 

Contents

Class file image Download
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">

        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/agate.min.css">
        <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>

        <title>VSAPI Ajax Sample</title>
        <script>
            var apiURL = 'http://localhost/vsapi/api/v1/';
            var method = 'Ping';
            var methodThatDoesNotExist = 'MethodThatDoesNotExist';
            var idSample = '123456';

            function updateViewCode() {
                hljs.initHighlighting.called = false;
                hljs.initHighlighting();
            }

            function postItem() {
                $.ajax({
                    type : 'POST',
                    url : apiURL+method,
                    data : JSON.stringify({
                                "message": "sample message here",
                                "user": "the-best-user-ever",
                                "list": ["first", "second", "third"]
                            }),
                    contentType: "application/json",
                    success : function(data){
                        $('#api-return').html(JSON.stringify(data, null, 4));
                        console.log(data);
                        updateViewCode();
                    }
                });
            }

            function getItem() {
                $.ajax({
                    type : 'GET',
                    url : apiURL+method,
                    data : JSON.stringify({
                                "message": "sample message here",
                                "user": "the-best-user-ever",
                                "list": ["first", "second", "third"]
                            }),
                    contentType: "application/json",
                    success : function(data){
                        $('#api-return').html(JSON.stringify(data, null, 4));
                        console.log(data);
                        updateViewCode();
                    }
                });
            }

            function listOptions() {
                $.ajax({
                    type : 'OPTIONS',
                    url : apiURL+method,
                    contentType: "application/json",
                    success : function(data){
                        $('#api-return').html(JSON.stringify(data, null, 4));
                        console.log(data);
                        updateViewCode();
                    }
                });
            }

            function methodNotExistent () {
                $.ajax({
                    type : 'POST',
                    url : apiURL+methodThatDoesNotExist,
                    contentType: "application/json",
                    success : function(data){
                        $('#api-return').html(JSON.stringify(data, null, 4));
                        console.log(data);
                        updateViewCode();
                    }
                });
            }

            function deleteItem () {
                $.ajax({
                    type : 'DELETE',
                    url : apiURL+method+'/'+idSample,
                    contentType: "application/json",
                    success : function(data){
                        $('#api-return').html(JSON.stringify(data, null, 4));
                        console.log(data);
                        updateViewCode();
                    }
                });
            }

            function methodError () {
                $.ajax({
                    type : 'DELETE',
                    url : apiURL+method,
                    contentType: "application/json",
                    success : function(data){
                        $('#api-return').html(JSON.stringify(data, null, 4));
                        console.log(data);
                        updateViewCode();
                    }
                });
            }
        </script>
    </head>
    <body>
        <h2>VSAPI Ajax Sample</h2>
        <a href="#" onclick="postItem()">POST sample</a> |
        <a href="#" onclick="getItem()">GET sample</a> |
        <a href="#" onclick="listOptions()">List Options</a> |
        <a href="#" onclick="deleteItem()">Delete Sample</a> |
        <a href="#" onclick="methodError()">Method Error</a> |
        <a href="#" onclick="methodNotExistent()">Method that does not exist</a> |

        <div  style="padding-top:20px;">
            <h4>API Answer here:</h4>
            <hr />
            <pre><code id="api-return" class="json">
            </code></pre>
        </div>
    </body>
</html>