$(function() {
$('#form').on('submit', _submit);
});
function _submit(e){
e.preventDefault();
var $text = $('#text');
var message = $text.val();
$('#dummy').focus();
$.ajax({
url:'/echo/json/',
type:'POST',
data:{
json:JSON.stringify({"message":"success"}),
delay: 1
},
beforeSend:function(jqxhr){
jqxhr.setRequestHeader('X-Request','JSON');
$('#result').text('loading...');
}
})
.then(
function(data){
console.log(data);
$('#result').empty().text(data.message);
},
function(){
}
);
};
<form id="form">
<p>
<input type="text" id="text" name="text" placeholder="input message...">
</p>
<button type="submit" id="dummy">submit</button>
</form>
<div id="result"></div>
form,div {
margin:10px;
}