<!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" data-semver="2.1.1" data-require="jquery@*"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" data-semver="3.1.1" data-require="bootstrap@3.1.1"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.3/jquery.mockjax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.0.2/js/bootstrap-switch.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" data-semver="3.1.1" data-require="bootstrap-css@3.1.1" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.0.2/css/bootstrap2/bootstrap-switch.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="container">
<h1>Mockjax examples</h1>
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1" data-toggle="tab">Simple ajax request</a>
</li>
<li>
<a href="#tab2" data-toggle="tab">Ajax json response</a>
</li>
<li>
<a href="#tab3" data-toggle="tab">Complex ajax fake</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<br>
<div class="well col-xs-12 col-md-6 col-md-offset-3">
<div class="form-group col-xs-12">
<div class="btn-group btn-input col-xs-4">
<button type="button" id="typeRequest" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown">
<span data-bind="label">Request type</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">POST</a>
</li>
<li><a href="#">GET</a>
</li>
<li><a href="#">*PUT</a>
</li>
<li><a href="#">*DELETE</a>
</li>
</ul>
</div>
<div class="col-xs-8">
<label style="font-size:12px; color: #A0A0A0;">Mock request is expecting 'POST' method</label>
</div>
</div>
<div class="col-xs-12">
<div class="form-group">
<input type="checkbox" id="timeout">
<label for="timeout" style="font-size:12px; color: #A0A0A0;">Force server time out</label>
</div>
<div class="pull-right form-group">
<div class="btn-group">
<button type="button" class="btn btn-primary" id="sendSimpleAjax">Send simple ajax</button>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab2">
<br>
<div class="well col-xs-12 col-md-6 col-md-offset-3">
<div class="btn-group form-group col-xs-12">
<button type="button" class="btn btn-primary" id="sendJsonResponse">Send json data</button>
<button type="button" class="btn btn-primary" id="sendJsonProxy">Send json proxy</button>
</div>
</div>
</div>
<div class="tab-pane" id="tab3">
<br>
<div class="well col-xs-12 col-md-6 col-md-offset-3">
<div class="col-xs-12 form-group">
<label for="paramData" class="control-label" style="color: #B0B0B0">Json param data:</label>
<input type="text" class="form-control" id="paramData" placeholder="{firstname: 'miguel', lastname: 'maquieira'}" />
</div>
<div class="pull-right form-group">
<div class="btn-group">
<button type="button" class="btn btn-primary" id="sendComplexAjax">Complex ajax fake</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container well">
<div class="col-xs-12 col-md-8 col-md-offset-2">
<div class="form-group col-xs-6">
<label for="results" class="control-label" style="color: #B0B0B0">Output is placed here:</label>
<textarea class="form-control" style="height: 250px;" readonly id="results">here: data sent...</textarea>
</div>
<div class="form-group col-xs-6">
<label for="error" class="control-label" style="color: #B0B0B0">Errors are placed here:</label>
<textarea class="form-control" readonly id="error" style="color: #FF0000">here: error data...</textarea>
</div>
</div>
</div>
</div>
</body>
</html>
// Code goes here
$(document).ready(function() {
$(".dropdown-menu li a").click(function() {
var selText = $(this).text();
$('#typeRequest').html(selText + ' <span class="caret"></span>');
});
$("#timeout").bootstrapSwitch();
$('#sendSimpleAjax').click(function(event) {
$('#results').val('here: data sent...');
$('#error').val('here: error data...');
var requestTypeText = $('#typeRequest').text().trim();
var requestType = requestTypeText;
if (requestTypeText.match('^Request')) {
requestType = 'GET';
}
var timeout = $('#timeout').bootstrapSwitch('state');
var f_url = '/simpleajax/';
if (timeout) {
f_url = f_url + 'timeout/';
}
$.ajax({
url: f_url,
type: requestType,
success: function(data) {
$("#results").val(data);
},
error: function(jqXHR, textStatus, errorThrown) {
var errorText = 'errorThrown: ' + errorThrown + '\n'
+ 'errorCode: ' + jqXHR.status;
$('#error').val(errorText);
}
});
});
$.mockjax({
url: '/simpleajax/',
type: 'POST',
responseTime: 500,
responseText: 'The response for a simple ajax request'
});
$.mockjax({
url: '/simpleajax/timeout/',
type: 'POST',
isTimeout: true
});
function callAjaxJson(f_url) {
$('#results').val('here: data sent...');
$('#error').val('here: error data...');
$.ajax({
url: f_url,
type: 'POST',
dataType: 'json',
success: function(data) {
$("#results").val(JSON.stringify(data, null, 2));
},
error: function(jqXHR, textStatus, errorThrown) {
var errorText = 'errorThrown: ' + errorThrown + '\n'
+ 'error code: ' + jqXHR.status;
$('#error').val(errorText);
}
});
}
$('#sendJsonProxy').click(function(event) {
callAjaxJson('/jsonproxyajax/');
});
$.mockjax({
url: '/jsonproxyajax/',
type: 'POST',
contentType: 'text/json',
responseTime: 500,
proxy: 'data.json'
});
$('#sendJsonResponse').click(function(event) {
callAjaxJson('/jsondataajax/');
});
$.mockjax({
url: '/jsondataajax/',
type: 'POST',
contentType: 'text/json',
responseTime: 500,
responseText: {employees: [{firstname: 'mark', lastname: 'twain'}, {firstname: 'sara', lastname: 'oconnor'}]}
});
$('#sendComplexAjax').click(function(event) {
var params = $('#paramData').val();
$.post('/complexajax/', params, function(data) {
$("#results").val(JSON.stringify(data, null, 2));
});
});
$.mockjax({
url: '/complexajax*',
type: 'POST',
contentType: 'text/json',
responseTime: 500,
response: function (settings) {
alert(settings.data);
this.responseText = settings.data;
}
});
});
.tabbable {
margin: 10px;
height: 250px;
overflow: hidden;
border-bottom: 1px solid #ccc;
}
.nav-tabs {
margin: 0;
}
.tab-content {
height: 100%;
border-left: 1px solid #ccc ;
border-right: 1px solid #ccc;
padding: 0px 10px;
}
### Response Ajax fake using mockjax
+ Simple ajax request receiving plain text
+ Ajax request dealing with JSON data
+ Ajax request receiving JSON data and faking query string
Copyright (c) 2014, Miguel Maquieira
All rights reserved.
Redistribution and use in source and binary forms, with or without modification,
are permitted provided that the following conditions are met:
- Redistributions of source code must retain the above copyright notice, this
list of conditions and the following disclaimer.
- Redistributions in binary form must reproduce the above copyright notice, this
list of conditions and the following disclaimer in the documentation and/or
other materials provided with the distribution.
- The names of its contributors will not be used to endorse or promote products
derived from this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE
{
"employees": [
{
"firstName": "Mike",
"lastName": "Bellon"
},
{
"firstName": "Pierce",
"lastName": "Cranon"
},
{
"firstName": "Alan",
"lastName": "Menon"
}
]
}