Lauiui はフォームデータをキャプチャします

注:

1. Lauiui の送信ボタンは、「リスニング」メカニズムに基づいて実装されています。

2. form.on() の呼び出しは、layui.use のコールバック関数に配置する必要があります。

3. ページの更新がトリガーされないようにするには、最後の「return false」が不可欠です。単に「return」ではなく、「return false」である必要があることに注意してください。

フォーム データのキャプチャは 4 つの手順で実行できます:

1. ボ​​タンを無効にします。ユーザーがクリックし続けることを防ぐには、Ajax リクエストが完了 (完了) した後、ボタンを明示的に再度有効にする必要があることに注意してください。

2. フォームデータを統合します。多くの場合、正式なフォームからデータを取得することに加えて、追加のデータを追加する必要があります。

3. パスを決定します。場合によっては、同じボタンで追加や変更などの複数の操作を表すことができます。

4. リクエストを開始します。 Ajax リクエストを開始し、サーバーにパラメータを渡し、コールバック関数の戻り値を処理します。

5. false を返します。

重要なコード リスト

1. HTML ステートメント

<form class="layui-form">
    <input type="hidden" name="id" />
    <button class="layui-btn layui-btn-sto" id="btnSave" lay-filter="btnSave" lay-submit>保存</button>
</form>

エフェクト (クリック イベント) をリッスンするだけの場合は、次の 1 つだけが必要です。上のボタンとレイフィルタリングおよびレイ送信。
フォーム要素の値を収集する必要がある場合は、フォームとそのスタイル lauiui-form も必要です。

2. js イベント監視

// 保存
form.on('submit(btnSave)', function (data) {
    console.info('开始保存');
 
    // * 按钮禁用
    var isDisabled = $("#btnSave").hasClass('layui-btn-disabled');
    if (isDisabled) {
        return false;
    }
 
    // * 整合表单数据
    var formData = data.field;
    $.extend(formData, { Id: $("#hiddenId").val() });
    console.info(formData);
 
    // * 确定路径
    var url = "";
    if (editMode == "add") {
        url = urlEnum.Add;
    } else if (editMode == "update") {
        url = urlEnum.Update;
    } else {
        alert('编辑模型不确定, add / update');
        return;
    }
 
    // * 发起请求
    $.ajax({
        data: formData,
        type: "POST",
        dataType: "JSON",
        url: url,
        beforeSend: function () {
            // 禁用
            $("#btnSave").addClass('layui-btn-disabled');
        },
        complete: function () {
            // 启用
            $("#btnSave").removeClass('layui-btn-disabled');
        },
        success: function (result) {
            console.info("保存数据成功，返回的数据为：↓ ");
            console.info(result);
 
            if (result.Status) {                            
                // 刷新列表
                parent.$("#mainGrid").bootstrapTable("selectPage", 1);
 
                // 确保在最后关闭窗体
                parent.layer.close(parent.layer.getFrameIndex(window.name));
            } else {
                // 提示失败
                layer.alert(result.StatusMessage, { title: '提示信息', icon: 5 });
            }
        }
    }); // end ajax
 
    return false;
});

layui 関連の知識については、layui フレームワークに注目してください。

以上がLauiui はフォームデータをキャプチャしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。