layui capture les données du formulaire

Remarques :

1 Le bouton de soumission dans layui est implémenté sur la base du mécanisme « d'écoute ».

2. L'appel à form.on() doit être placé dans la fonction de rappel de layui.use.

3. Le 'return false' à la fin est indispensable pour garantir que le rafraîchissement de la page ne sera pas déclenché. Notez qu'il doit s'agir de « return false », et pas simplement de « return ».

La récupération des données du formulaire peut être réalisée en quatre étapes :

1 Désactivez le bouton. Pour empêcher les utilisateurs de cliquer en continu, veuillez noter que le bouton doit être explicitement réactivé une fois la requête Ajax terminée (complète).

2. Intégrez les données du formulaire. Souvent, en plus d’obtenir les données du formulaire formel, il est également nécessaire d’ajouter des données supplémentaires.

3. Déterminez le chemin. Parfois, le même bouton peut exprimer plusieurs opérations, comme l'ajout ou la modification.

4. Lancez une demande. Lancez une requête Ajax, transmettez les paramètres au serveur et traitez la valeur de retour dans la fonction de rappel.

5. renvoie faux.

Liste de codes importants

1. Instruction 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>

Si vous n'avez besoin d'écouter que des effets (événements de clic), vous n'en avez besoin que d'un seul. les boutons ci-dessus et lay-filter et lay-submit.
Si vous avez besoin de collecter les valeurs des éléments du formulaire, vous avez également besoin de form et de son style layui-form.

2. surveillance des événements 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;
});

Pour plus de connaissances liées à Layui, veuillez faire attention au framework layui.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!