$(function() { $('#form').on('submit', _submit); }); function _submit(e){ e.preventDefault(); var $text = $('#text'); var message = $text.val(); $text.blur(); $.ajax({ url:'/echo/json/', type:'POST', dataType:'json', 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> </form> <div id="result"></div>
form,div { margin:10px; }