ajax页面无刷新动态加载和子窗体给父窗体传值技术实现学员分配教练功能

本文介绍如何使用Ajax技术实现页面无刷新动态加载教练信息，并通过jQuery完成数据解析与展示。同时，详细讲解了利用layui的layer组件进行子窗体与父窗体之间的数据传递，实现教练信息的有效交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本功能的实现使用的技术

1.ajax页面无刷新动态加载

html代码：

 <div >
    <table id="allcoaches">
    </table>
 </div>

js代码：

  $(function () {

            $.ajax({
                url: "GetAllCoaches",
                type: "post",
                data: "",
                dataType: "json",
                success: function (res) {
                    for (var i = 0; i < res.result.length; i++) {

                        $('#allcoaches').append("<tr id=\"\"><td><input  type=\"radio\" name=\"id\" value=\"1\"/></td>" +
                            "<td >" + "<text id=\"coachename\">" + res.result[i].CoachName + "</text>" + "" + "</td>" +
                            "<td >" + "<text id=\"phonenum\">" + res.result[i].PhoneNum + "</text>" + "" + "</td>" +
                            "<td >" + "<text hidden id=\"coachid\">" + res.result[i].Id + "</text>" + "" + "</td>" +
                        "</tr>")
                    }
                },
                error: function () { alert("请求出错"); }
            });

        });

2.子窗体给父窗体传值：使用layer的web弹层组件，详见网站https://layer.layui.com/

关键代码：

var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
        $('#btnsubmit').on('click', function () {
            var val1 = $('input[name="id"]:checked').parent().parent().find("#coachename").text();//获得子窗体中选中行中的id为coachename标签的值
            var val2 = $('input[name="id"]:checked').parent().parent().find("#phonenum").text();
            var val3 = $('input[name="id"]:checked').parent().parent().find("#coachid").text();
            parent.$('#CoachName').val(val1);//给父窗体中的id为CoachName的标签赋值
            parent.$('#CoachPhoneNum').val(val2);
            parent.$('#CoachId').val(val3);
        })

最终实现图示：