Demo jsfiddle echo

by Adi Jaya

HTML

<div>
    <label> Start
        <input id="start" type="number" value="1"/>
    </label>
     <label>End
        <input id="end" type="number" value="10"/>
    </label>
    <p>
        <button id="button">
        Send
        </button>
    </p>
</div>

<p id="loader-ajax"></p>

<p id="result-foo"></p>
<p id="result-bar"></p>

<pre><code id="preview-response"></code></pre>

<hr>
<hr>
<hr>

<p>
    <button id="check-var-foo">Check value variable foo</button>
    <button id="check-var-bar">Check value variable bar</button>
</p>

CSS

label {
    display: block;
    margin-bottom: 5px;
}

JavaScript

//optional
function print_json_response( response_name ){
	var data = JSON.stringify( response_name, null, 4 );
    return data;
}

/////////////////////// demo
var foo=false, bar=false, baz;

$( document ).on( "click", "#button", function(){
	var val_start = $( "#start" ).val();
    var val_end = $( "#end" ).val();
	$.ajax({
        cache:false,
        type: 'POST',
        url: '/echo/json/',
        dataType: 'json',
        data: {
            json: '{"start": "'+ val_start +'","end": "'+ val_end +'"}'
        },
        beforeSend: function(){
        	$( "#loader-ajax" ).html( "Loading...." );
        },
        success: function(data) {
            console.log( data );
            foo = data.start;
            bar = data.end;
            $( "#loader-ajax" ).empty();
            $( "#preview-response" ).html( print_json_response( data ) );
        },
        error:function(error){
            alert('there was an error');
			foo = "data foo error";
            bar = "data bar error";
            $( "#preview-response" ).html( print_json_response( error ) );
        },
        complete: function(){
        
        	if( typeof foo !== 'undefined' && typeof bar !== 'undefined' ) {
            	if( foo !== false && bar !== false ) {
        			$( "#result-foo" ).html( "Start = " + foo );
            		$( "#result-bar" ).html( "End = " + bar );
                }
            }

        }
    });
});

//next demo for check variable foo and bar
$( document ).on( "click", "#check-var-foo", function(){
	alert( foo );
});
$( document ).on( "click", "#check-var-bar", function(){
	alert( bar );
});