Laui는 양식 데이터를 캡처합니다.

참고:

1.layui의 제출 버튼은 "듣기" 메커니즘을 기반으로 구현됩니다.

2. form.on()에 대한 호출은layui.use의 콜백 함수에 배치되어야 합니다.

3. 페이지 새로고침이 실행되지 않도록 하려면 마지막에 'false 반환'이 필수입니다. 단순히 'return'이 아니라 'return false'여야 합니다.

양식 데이터 캡처는 다음 네 단계로 수행할 수 있습니다.

1. 사용자가 계속해서 클릭하는 것을 방지하려면 Ajax 요청이 완료된(complete) 후에 버튼을 명시적으로 다시 활성화해야 한다는 점에 유의하세요.

2. 양식 데이터를 통합합니다. 많은 경우, 공식 형식의 데이터를 얻는 것 외에도 몇 가지 추가 데이터를 추가해야 합니다.

3. 경로를 결정합니다. 때로는 동일한 버튼이 추가 또는 수정과 같은 여러 작업을 표현할 수 있습니다.

4. 요청을 시작합니다. Ajax 요청을 시작하고, 매개변수를 서버에 전달하고, 콜백 함수에서 반환 값을 처리합니다.

5. 거짓을 반환합니다.

중요 코드 목록

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>

효과(클릭 이벤트)만 듣고 싶다면 위의 버튼인 Lay-Filter와 Lay-Submit만 있으면 됩니다.
양식 요소의 값을 수집해야 하는 경우 양식과 해당 스타일인layui-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 프레임워크에 주목하세요.

위 내용은 Laui는 양식 데이터를 캡처합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!