1

我有一个从 Luci 动态呈现的模板。如果修改了任何字段，单击保存，我将进行 jQuery AJAX 发布调用，该调用会更新后端的数据并返回对 ajax 回调的响应。
如果在加载视图后更改了任何字段，我将通过比较当前值与默认值并在再次输入原始值时重新设置颜色来更改字段颜色。从 jquery 获取默认值。

// Change color of the modified fields
$("input").on("keyup mouseup", function () {
    var fieldType = $(this).attr("type");
    if (fieldType === "text" || fieldType === "password") {
       if ($(this)[0].defaultValue !== $(this)[0].value) {
          $(this).css("background-color", "#ffc");
       } else {
          $(this).css("background-color", "white");
       }
    }
});

目前，该视图显示新值，因为该页面未重新加载。我希望仅使用新值重新渲染视图（表单数据），因为更改的字段仍然具有#ffc颜色集。我还需要使用新值更新输入标签的defaultValue 。

如何在不重新加载页面的情况下单独重新呈现表单？

我的 html 页面示例

<%- 
local uci = require("luci.model.uci")
function generateRowsFunc()
    local itr = 0
    uci:foreach('accounts','account',
        function(section)
            write('<tr><td><input type="text" name="full_name_'..itr..'" value="'..section["full_name"]..'"></td>'..
                '<td><input type="text" name="username_'..itr..'" value="'..section["username"]..'"></td>'..
                '<td><input type="password" name="password_'..itr..'" value="'..section["password"]..'"></td></tr>')
        end 
    )
end
-%>
<%+header%>

<div class="cbi-section row-section">
    <form name="saveSetting">
        <div>
            <table class="custom-table">
                <thead>
                    <tr>
                        <th>Select</th>
                        <th>Full Name</th>
                        <th>Username</th>
                        <th>Password</th>
                    </tr>
                </thead>
                <tbody>
                    <% generateRowsFunc() %>
                </tbody>
            </table>
        </div>
    </form>
    <input type="button" id="save" value="<%:Save%>" class="cbi-login-button">
    <input type="reset" id="cancel" value="<%:Cancel%>" class="cbi-login-button">
</div>

<%+footer%>

我的 jQuery 示例

$("#save").click(function () {
    $.ajax({
        type: 'POST',
        url: 'save',
        data: $('form[name="saveSetting"]').serializeArray();,
        success: function (res) {
            console.log("Ajax success", res); // Saved successfully
        },
        error: function (err) {
            console.log("Ajax failed", err);
        }
    });
});
4

0 回答 0