javascript - 在 Laravel 刀片模板上使用 Ajax 表单从 JSON 请求返回响应

Question

好的，所以我有一个基于 Laravel 的 API，我试图用它自己的表单数据在视图中返回它的 JSON 响应。

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>

基本 API 网址：

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

所以我正在尝试编写一个 Ajax 请求来获取带有表单数据的 JSON 响应并将其显示在 DOM 表上，例如：

Translated Message = $json["translated"]

Pronunciation = $json["pronounce"]

谁能帮我？

编辑：

这是我根据评论得到的解决方案：

$("#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();
    }
    });

});

标签： javascriptphpjsonajaxlaravel