Laravel+jQuery Ajax实现地址数据无刷新更新展示

第一步：调整后端接口返回结构 #

你当前的后端接口更新成功后仅返回了成功状态，前端拿不到最新的地址数据，需要在控制器的更新方法中，将更新完成后的完整地址数据一并返回，参考代码如下：

// update_address 路由对应的控制器方法
public function updateAddress(Request $request)
{
    // 保留你原有的参数校验、权限判断、更新逻辑
    $address = Address::findOrFail($request->address_id);
    $address->update([
        'address' => $request->address,
        'lat' => $request->lat,
        'lang' => $request->lang,
        'location_type' => $request->location_type
    ]);

    // 返回成功状态+更新后的完整地址数据
    return response()->json([
        'success' => true,
        'data' => $address
    ]);
}

第二步：修改前端Ajax成功回调，局部更新DOM #

你当前的成功回调仅弹出了操作提示，拿到后端返回的最新数据后，直接替换页面对应位置的内容即可，根据你的页面形态分两种情况处理：

情况1：编辑表单为弹窗形式，页面同时展示地址列表 #

保存成功后先关闭编辑弹窗，再定位到当前编辑地址对应的列表项，替换里面的文本内容即可，修改updateAddress函数的success回调部分：

success: function(result) {
    if (result.success == true) {
        // 弹出成功提示
        Swal.fire({
            icon: 'success',
            title: 'Success',
            text: 'Address Updated Successfully!',
            timer: 1500,
            showConfirmButton: false
        })

        const latestAddress = result.data;
        // 如果用了模态框，这里加关闭模态框的逻辑，同时重置表单
        // $('#editAddressModal').modal('hide');
        $('#edit_form')[0].reset();

        // 定位到当前地址对应的列表项：注意你渲染地址列表时，要给每个地址条目加上 data-id="{地址id}" 属性
        const $targetItem = $(`.address-item[data-id="${latestAddress.id}"]`);
        // 替换地址文本
        $targetItem.find('.address-content').text(latestAddress.address);
        // 替换位置类型标签
        $targetItem.find('.location-type').text(latestAddress.location_type.toUpperCase());
        // 如果页面有展示经纬度、地图标记的需求，在这里同步更新即可
    }
},

情况2：当前页为单地址编辑页，无地址列表 #

这种场景不需要定位列表项，直接替换页面上展示地址信息的对应区域内容即可，也可以直接读取表单内用户最新输入的值做替换：

// 替换页面上的地址展示内容
$('.show-address-text').text($('#edit-pac-input').val());
$('.show-location-type').text($('input[name="location_type"]:checked').val().toUpperCase());
// 同步更新地图标记位置到新的经纬度

注意事项 #

• 渲染地址列表时，必须给每个地址条目加上唯一的data-id属性，属性值为对应地址的主键ID，否则前端无法定位到需要更新的DOM节点
• 如果地址列表做了分页，且无法确定当前编辑的地址是否在已渲染的页面内，可以在更新成功后重新调用一次地址列表查询接口，局部刷新地址列表区域的内容，不会触发整页刷新
• 如果页面集成了地图选点功能，更新数据后需要调用对应地图SDK的标记点更新方法，传入新的经纬度重绘标记，避免地图展示位置和实际存储数据不一致

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