JSFiddle - React, Tailwind, and code Playground

JSONP angular

by Andrew Pougher

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-resource.min.js"></script>
<div ng-controller="myCtrl">
    <fieldset ng-view>
        <legend>JSONP Example using jsfiddle echo</legend>
        <label for="foo">foo:</label>
        <input type="text" ng-model="foo" />
        <br />
        <button ng-click="getData()">GET Request</button>
        <button disabled="disabled" title="POST Requests are unavailble with JSONP">POST Request</button>
    </fieldset>
    <br />
    <label for="echo">Echo'd Response</label>
    <textarea name="echo" ng-model="response" disabled="disabled"></textarea>
</div>

CSS

textarea {
    height:50px;
    width:100%;
}

JavaScript

angular.module('myApp', ['ngResource'])
.controller('myCtrl', function ($scope, $http) {
    $scope.foo = "bar";
    $scope.response = [];
    
    $scope.getData = function() {
        var params = JSON.stringify({foo: $scope.foo});
        
        $http.jsonp("/echo/jsonp/?callback=JSON_CALLBACK&data=" + params)
        .then(function(json) {
            $scope.response = json.data.data;
        });
    };
    
});