Ajax button onclick

Trying to learn some simple AJAX and i'm a nOOb at it obviously.

so here we go: simple set up a page with a button I want to on click change the text with an ajax call.

starting page:

extends('layout')

@section('content')
        <div class="container">
            <div class="content">
                <div class="title">Ajax Test</div>
                <button type="button" class="btn btn-default">Lets Go!</button>
            </div>
        </div>

@stop

@section('scripts')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.ajax({url: "posts.test", success: function(result){
            $(".title").html(result);
        }});
    });
});

</script>

@stop

want to on click change it to this page

@extends('layout')

@section('content')
        <div class="container">
            <div class="content">
                <div class="title">Ajax Works!</div>
                <button type="button" class="btn btn-default">Lets Go!</button>
            </div>
        </div>

@stop