如何使用 axios 更新分离的元素？

Posted 2023-02-16

【中文标题】如何使用 axios 更新分离的元素？

【英文标题】：How to update a separated element with axios?

【发布时间】：2021-01-19 20:34:22

【问题描述】：

我的代码现在运行良好！ 它在不刷新页面的情况下更新用户状态（禁用、启用帐户）。 现在如果我点击红色按钮Desactiver，它将变成绿色Activer，反过来也是一样的..

我想做的是：当我点击按钮时，状态也会更新（在 不同 <td> 中）

在我的 axios 代码中，我尝试使用获取状态元素

const statusText= this.querySelector('span.status11');

并使用更新它

statusText.textContent=response.data.current;

问题是使用 this.querySelector 返回 null 因为它位于不同的 <td> 并且 this 指向 a.js-status 因为在我的代码上我做了

 document.querySelectorAll('a.js-status').forEach(function(link)

这是图片

这是我当前只更新按钮的代码（而我想更新按钮+状态<td>

控制器功能：

/**
 * @Route("/id/status", name="user_status", methods="GET","POST")
 * @param Request $request
 * @param User $user
 * @return Response
 */
public function updateStatus(User $user): Response

    if($user->getStatus()==true)
        $user->setStatus(false);
        $current="Desactiver";
     else 
        $user->setStatus(true);
        $current="Activer";
     
    $this->getDoctrine()->getManager()->flush();
        return $this->json([
            'code'=>200,
            'message'=>'the Status of is updated',
            'current'=>$current
        ],200);
    

html代码：

% if user.status == 0 %
      Compte est <span class="status11" >Desactiver</span> 
% else %
      Compte est <span class="status11" >Activer</span> 
% endif %
    </td>

    <td>
% if user.status == 1 %
       <a href=" path('user_status', 'id': user.id) " class="js-status"> <button class="btn btn-danger btn-sm">Desactiver</button></a>
% else %
       <a href=" path('user_status', 'id': user.id) " class="js-status"> <button class="btn btn-success btn-sm">Activer</button></a>
% endif %
    </td>

我的 axios/javascript 代码：

% block javascripts %
    <script src="https://unpkg.com/axios/dist/axios.min.js"> </script>
    <script>

        function onClickBtnLike(event)
            event.preventDefault();

            const url = this.href;
            const btn= this.querySelector('button');

            axios.get(url).then(function(response)
                
               if(btn.classList.contains('btn-danger')) 
                    btn.classList.replace('btn-danger','btn-success');
                    btn.textContent="Activer";
               else
                    btn.classList.replace('btn-success','btn-danger'); 
                    btn.textContent="Desactiver";
                
            );
        

        document.querySelectorAll('a.js-status').forEach(function(link)
            link.addEventListener('click',onClickBtnLike);
        )
    </script>
% endblock %

【参考方案1】：

您可以从按钮traverse up 到包含行并从那里搜索您的状态span：

const status = this.closest('tr').querySelector('.status11');

status.textContent = (status.textContent == "Activer" ? "Desactiver" : "Activer");

您也可以使用this.parentElement.previousElementSibling 直接定位以前的td，但前者更清晰，如果您想更改html 结构，也有一些余地。