PHP循环中如何将amp-form的submit-success JSON响应绑定到点击元素

解决思路 #

你的问题核心是当前wishstatus是全局共享的单一变量，所有循环生成的标签都绑定了同一个值，才会出现全部更新的情况。你可以通过给每个循环项增加唯一标识、用对象存储多实例状态的方式解决，具体修改如下：

具体修改步骤 #

1. 初始化状态为对象格式，用于存储每个循环项的独立状态
2. 点击时记录当前触发操作的项的唯一索引
3. 提交成功后仅更新当前索引对应的状态值
4. 每个标签仅绑定自己索引对应的状态，实现独立更新

修改后完整代码示例 #

<!-- 页面body标签增加初始化逻辑，避免初始状态对象不存在报错 -->
<body on="load:AMP.setState({wishstatus: {}})">

<!-- AMP FORM部分 只修改submit-success的状态逻辑 -->
<form method="post" id="courseTap" action-xhr="" target="_top" on="submit-success: 
    AMP.setState({wishstatus: {...wishstatus, [activeWishId]: event.response.codez}})">
    <!-- PHP LOOP部分 给每个项加唯一索引，绑定对应状态 -->
    <?php for ($x = 0; $x <= 5;$x++) { ?>
        <!-- 如果你实际要绑定的是strong标签，把[class]属性写到对应strong标签上即可 -->
        <a href="..." 
            [class]="wishstatus[<?php echo $x; ?>]" 
            on="tap:AMP.setState({
                activeWishId: <?php echo $x; ?>,
                datataptype: '1', 
                datatappost: '<?php echo $x; ?>' // 这里替换为实际业务中当前项的动态ID
            }),courseTap.submit">
        </a>
    <?php } ?>
    <input type="text" name="wtm"  [value]="datataptype" hidden>
    <input type="text" name="wcy"  [value]="datatappost" hidden>
    <div submit-success>
        <template type="amp-mustache">
            {{message}} 
        </template>
    </div>
    <div submit-error>
        <template type="amp-mustache">
            {{message}} 
        </template>
    </div>   
</form>
</body>

原理说明 #

修改后wishstatus会变成键值对结构，键是每个循环项的唯一索引，值是对应项的状态。每次点击只会把当前操作的项索引存入activeWishId，提交成功后仅更新该索引对应的值，其他项的状态不会被修改，自然不会出现所有标签一起更新的问题。

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