如何在JS文件中通过AJAX调用PHP后端数据填充动态生成input的value属性

是否需要发起AJAX请求要分场景判断，绝大多数常规场景下不需要AJAX就能实现需求，具体说明如下：

不需要AJAX的场景（90%以上的适用情况） #

只要get_portals[0]['property_title']的值是在PHP渲染当前页面时就可以确定的固定值/预定义值，完全不需要额外发起AJAX，有两种更简单的实现方案：

• 方案1：将默认标题注入到JS全局变量
  在PHP页面的头部（你的JS文件加载之前的位置）插入如下代码：

<script>
// 提前将PHP拿到的默认标题赋值给JS全局变量，注意用addslashes转义特殊字符避免JS语法报错
window.portalDefaultTitle = "<?php echo addslashes(get_portals[0]['property_title']); ?>";
</script>

之后直接修改你原来的JS代码，在动态生成input的位置加上value属性即可。

• 方案2：将默认标题存在checkbox的自定义属性中（更推荐）
  PHP渲染复选框元素的时候，直接把默认标题写入元素的data-自定义属性：

<input 
    type="checkbox" 
    class="checkbox" 
    data-name="你的portal名称" 
    id="对应的pid值"
    <!-- 新增自定义属性存默认标题，用htmlspecialchars转义避免HTML注入 -->
    data-default-title="<?php echo htmlspecialchars(get_portals[0]['property_title']); ?>"
>

之后JS触发change事件时直接读取当前复选框的自定义属性即可，不需要定义全局变量，代码耦合度更低。

修正后的完整JS代码示例 #

顺便修正你原有代码的两个小问题：动态生成的div和input都用了同一个pid作为id，会造成DOM id重复冲突；统计tab数量的逻辑有误，应该统计wrapper下的子元素数量。

$(document).ready(function() {
    const portalarray = [];
    $('input.checkbox').change(function(){
        const portalname = $(this).attr('data-name'); 
        const pid = $(this).attr('id');
        // 直接读取复选框上存的默认标题
        const defaultTitle = $(this).attr('data-default-title');
        
        if ($(this).is(':checked')) {
            portalarray.push(pid);
            $(".wrapper_tab-content").append(`<div class="portalcontent content--active" id="${pid}">
                <div class="col-md-12 text-left">
                    <label class="control-labels ">Title</label>
                    <!-- input的id加后缀避免和外层div重复，加上value属性填充默认值 -->
                    <input id="${pid}_input" name="${portalname}" placeholder="${portalname} Title" type="text" value="${defaultTitle}">
                </div>
            </div>`);
        }else {
            $(".portaltabs .container--tabs li#"+pid).remove();
            $(".wrapper_tab-content #"+pid).remove();
            // 修正tab数量统计逻辑
            const tabslength = $(".wrapper_tab-content").children().length;
        }
    });
});

需要AJAX的场景 #

只有当以下情况出现时才需要用到AJAX：

• get_portals[0]['property_title']的值不是页面加载时就能确定的，需要根据用户勾选的不同pid动态从服务端拉取对应不同的标题
• 标题数据会在页面加载完成后实时更新，需要拉取最新值
  如果符合上述场景，可以在复选框勾选后发起AJAX请求到后端接口拿到对应标题，再填入生成的input的value属性中即可。

内容的提问来源于stack exchange，提问作者JAYZ