Question

我正在尝试更新数据库中的特定字段，即从Phone模型中“分配”。我试图在javascript中创建一个函数（setBooleanForCurrentPhone（）），以便在select的onchange时将id =“ assignPhone”的值从“ true”更改为“ false”。

问题是数据库中的“ assigned”没有更改，因为我还没有提交任何东西。

此外，我尝试制作一个按钮（只是为了对其进行测试），它将调用setBooleanForCurrentPhone（）函数onclick，但是问题是这是在提交数据，页面跳到了另一个页面，我没有使用最后一个调用setBooleanForPhone（）的提交按钮。

基本上，我想找到一种无需刷新/更改页面即可从数据库更新该值的方法。

            <tr>
                <td>Employee id:</td>
                <td><input type = "text" th:field="*{id}" readonly="readonly" ></td>
            </tr>

            <tr>
                <td>Employee last name:</td>
                <td><input type = "text" th:field="*{lastName}" ></td>
            </tr>

            <tr>
                <td>Employee first name:</td>
                <td><input type = "text" th:field="*{firstName}" ></td>
            </tr>

            <tr>
                <td>Phone:</td>
                <td style="display: none"><input type="text" id="destination" th:field="*{phone}"></td>
                <td style="display: none"><input type="text" id="assignPhone" th:field="*{phone.assigned}"></td>
                <td>
                    <select id="source" onchange="copyTextValue(), setBooleanForCurrentPhone()" th:field="${possiblePhones}" >
                        <option th:value="${employee.phone?.id}" th:text="${employee.phone != null ? employee.phone.brand +' '+ employee.phone.model : 'no phone'}">select phone</option>
                        <option th:each="possiblePhone : ${possiblePhones}" th:value="${possiblePhone.id}" th:text="${possiblePhone.brand +' '+ possiblePhone.model} "></option>
                    </select>
                </td>
            </tr>

            <!--submit button-->

            <tr>
                <td colspan="2">
                    <button onclick="setBooleanForPhone()" type="submit">Save</button>
                </td>
            </tr>
        </table>

我在互联网上找到了一些东西，但是我很确定自己做得不好：

function setBooleanForCurrentPhone() {
    var n = 'false';

    var http = new XMLHttpRequest();
    http.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("assignPhone").innerHTML = this.responseText;
        }
    };

    http.open("POST","employee/edit/{id}",true);
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.send(n);

}

Answer 1

您可以使用Ajax实现此目的。 Ajax代表异步JavaScript和XML。这将使您无需刷新页面即可提交表单。如果您使用的是jQuery，则可以使用$ajax进行操作，否则，如果使用的是JavaScript，则可以使用XMLhttprequest使用它。

如何在不刷新/提交页面的情况下发送POST方法

1 个答案: