Question

我有这样的表单模板

@(list: List[Item])

@main("test form") {
<form id="testForm" action="@routes.Application.accept()" method="post">
    <table align="center">
        <thead>
            <tr>
                <td>name</td>
                <td>mark</td>
            </tr>
        </thead>
        <tbody>
            @for(item <- list) {
                <tr>
                <td>@item.name</td>
                <td><input type="text" title="@item.name" id="@item.id" value="@item.mark"></td>
                </tr>
            }
        </tbody>
    </table>
    <button onClick="sendJSON('@routes.Application.accept()')">Send</button>
</form>
}

在服务器端 - 类似这样的

public static Result getForm() {
    List<Item> items = new ArrayList<>();
    for (int i = 0; i < 5; i++) {
        Item item = new Item(i + 1, "person " + (i + 1), (i % 5) + 1);
        items.add(item);
    }
    return ok(form.render(items));
}

public static Result accept() {
    DynamicForm form = Form.form().bindFromRequest();
    String json = form.get("json");
    if (null == json) {
        json = "Nothing received!";
    }
    Logger.info(json);      
    return ok(result.render(json));
}

Javascript函数sendJSON（）是

function sendJSON(serverUrl) {
// making JSON
        jsonObj = [];
        $("input[type=text]").each(function() {

            var id = $(this).attr("id");
            var title = $(this).attr("title");
            var mark = $(this).val();

            item = {}
            item ["id"] = id;
            item ["title"] = title;
            item ["mark"] = mark;

            jsonObj.push(item);
        });
        var jsonString = 'json=' + JSON.stringify(jsonObj);
        alert(jsonString);
// sending
        $.ajax({
            url: serverUrl,
            type: 'POST',
            data: jsonString,
            success: function(res){
                $('html').html(res);
                alert("done!");
            },
            failure: function(res){
                alert("failure!");
            }
        });
        return false;
};

记录器中的

我看到一个AJAX请求的两个记录。一个是JSON数据，另一个是“什么都没收到！”。发送一个POST查询的最佳方法是什么？为何警告“完成！”和“失败！”没出现？

感谢您浪费时间陪伴我。最好的祝福。

Answer 1

我找到了在表单提交上执行$.ajax POST请求的其他方法。我写了一个ajax.js，其中我放置了这段代码

// this function makes JSON data and send to the server POST request
function sendPost(requestUrl) {
// make JSON
        jsonObj = [];
        $("input:text").each(function() {

            var id = $(this).attr("id");
            var title = $(this).attr("title");
            var mark = $(this).val();

            item = {}
            item ["id"] = id;
            item ["title"] = title;
            item ["mark"] = mark;

            jsonObj.push(item);
        });
        var jsonString = JSON.stringify(jsonObj);
        alert(jsonString);
// send to server
        $.ajax({
            url : requestUrl,
            type : 'POST',
            data : { marks : jsonString },
            success : function(res) {
                $('html').fadeOut(function() {
                    $(this).html(res).fadeIn();
                });
            },
            error : function(jqXHR, textStatus, errorThrown) {
                console.log(jqXHR.statusText + " (" + jqXHR.status + ") " + textStatus + ": " + errorThrown);
                alert("Load error!");
            }
        });
}

// And this one - select form with id='testForm' 
// and runs sendPost function on the submit event.
// to prevent regular form POST request - e.preventDefault is used.
$('#testForm').submit(function(e) {
    var requestUrl = $(this).attr('action');
    sendPost(requestUrl);
    e.preventDefault();
});

在模板中，我将标记<button>...</button>替换为<input type="submit"...>

AJAX请求发出两个POST查询（Play框架）

1 个答案: