use Mojolicious::Lite;

helper get_contents => sub {
  my $c = shift;
  if ($c->req->method eq 'GET' or $c->req->method eq 'HEAD') {
    return $c->req->url->query;
  } else {
    return $c->req->body;
  }
};

any '/' => sub {
  my $c = shift;
  my $contents = $c->get_contents;
  my $input = $c->param('text');
  $c->stash(input => $input, output => $contents);
}, 'index';

any '/test' => sub {
  my $c = shift;
  my $contents = $c->get_contents;
  $c->res->headers->content_type('text/plain');
  $c->render(text => $contents);
};

app->start;
__DATA__


@@ index.html.ep
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<form id="test" action="/">
  <input id="text" name="text" value="<%= $input %>"></input>
  <input type="submit" value="GET jquery"/>
  <input type="submit" value="POST jquery"/>
  <input type="submit" value="GET form" formmethod="get"/>
  <input type="submit" value="POST form" formmethod="post"/>
</form>
<div id="output"><%= $output %></div>
<script type="text/javascript">
  $("#test").submit(function(event) {
    var submitted = $("input[type=submit]:focus").val();
    var text = $("#text").val();
    if (submitted === "GET jquery") {
      $.get('/test', { 'text': text }, function(data) {
        $("#output").text(data);
      });
      return false;
    } else if (submitted === "POST jquery") {
      $.post('/test', { 'text': text }, function(data) {
        $("#output").text(data);
      });
      return false;
    }
    return true;
  });
</script>