Returning response from JSON request using Ajax form on Laravel blade template

Question

Ok, so i have a API based on Laravel, i'm trying to return its JSON response in a view with it's own form data.

HTML:

<form id="translate" action="translate" method="GET">
    <div class="form-group"><label for="from" name="from">Translate from</label><select class="form-control" id="from"><option value="latin" selected="selected">Latin alphabet</option><option value="deepling">Jekhr</option></select></div>
    <div class="form-group"><label for="message" name="message">Message</label><textarea class="form-control" id="message"></textarea></div>
    <div class="form-group"><div class="form-row"></div></div>
    <button class="btn btn-primary btn-block" type="submit">Translate!</button>
</form>

Base API URL:

http://localhost/translate?text=Hello World&method=Latin&pronunciation

So i'm trying to write a Ajax request to get JSON response with form data and display it on DOM table, like:

Translated Message = $json["translated"]

Pronunciation = $json["pronounce"]

Can anyone help me?

Edit:

Here's a solution that I got based on comment:

$("#translate").submit(function(e) {

e.preventDefault();

var form = $(this);
var url = form.attr('action');

$.ajax({
    type: "GET",
    url: url,
    data: form.serialize(),

    success: function(data)
    {
        $('#translateTable tbody tr').remove();
        $('#translateTable tbody').append("<tr><td>Request</td><td>" + data.requested + "</td></tr><tr><td>Translation</td><td>" + data.translated + "</td></tr><tr><td>Pronounce</td><td>" + data.pronounce + "</td></tr>");
        $('#translateTable').show();
    }
    });

});