JSFiddle - React, Tailwind, and code Playground

by Denis

HTML

<div id="pjaxcontainer">
    <form method="POST" action="/echo/html/">
        <p>
            <input type="text" name="title" value="" />
        </p>
        <p>
            <textarea name="mess"></textarea>
        </p>
        <p>
            <input type="submit" id="run" value="Поехали!" />
        </p>
    </form>
</div>

CSS

h1 {
    font-size: 1.5em;
    color: #060;
}

JavaScript

$('#pjaxcontainer form').submit(function(e){
    e.preventDefault();
    
    // display loading message
    $('#loading-shade').show();
    
    var handler = $.trim($(this).attr('action'));
    var data = $(this).serialize();
    var method = $(this).attr('method');
    
    var cont = $('#pjaxcontainer');
    if(handler){
        $.ajax({
            type: method,
            url: handler,
            data: data,
            beforeSend : function(xhr) {
                    return xhr.setRequestHeader('X-PJAX','true'); // IMPORTANT
            },
            success: function(msg){
                msg = '<h1>Как бы это ответ...</h1>';
                cont.html(msg);
                $('#loading-shade').hide();
            },
            error: function(a,b,c) {
                $('#loading-shade').hide();
            },
            dataType: 'html'
        });
    } else {
        alert('Вот не понятно, а куда посылочку отправлять?');
    }
});