Laravel中AJAX/JSON请求触发页面重定向问题求助

一、解决点击后跳转到JSON页面的问题 #

这个问题的核心是点击事件触发了页面默认跳转行为，AJAX请求和页面跳转同时执行，最终导致页面跳转到JSON接口地址。

修复步骤： #

在点击事件中添加阻止默认行为的代码：

$('#delivery-list').on('click', 'tr', function(e) {
    e.preventDefault(); // 阻止默认跳转/提交行为
    var deliveryId = $(this).data('id');

    $.ajax({
        type: 'GET',
        url: '/get-delivery-items/' + deliveryId,
        dataType: 'json',
        success: function(data) {
            populateFormAndTable(data);
        },
        error: function(xhr, status, error) {
            console.error('AJAX request failed:', status, error);
            console.log('Response:', xhr.responseText);
            alert('An error occurred while fetching delivery items. Please try again.');
        }
    });
});

同时检查HTML结构：

• 确认<tr>未被包裹在<a>标签内，也没有嵌套在<form>中导致默认提交
• 如果<tr>内部有按钮、链接等元素，需确保这些元素的默认行为也被正确处理（比如给内部<a>添加e.preventDefault()）

二、解决视图中未定义变量的问题 #

针对多模块数据传递的场景，Laravel有几种规范的变量传递方式：

1. 合并数组传递 #

在控制器返回视图时，将所有模块数据合并到一个数组中：

public function index() {
    // 获取各模块数据
    $deliveries = InventoryTransaction::all();
    $products = Inventory::all();
    $outboundRecords = Outbound::all();

    // 传递给视图
    return view('your-view-name', compact('deliveries', 'products', 'outboundRecords'));
}

视图中可直接使用$deliveries、$products等变量。

2. 使用with()链式传递 #

return view('your-view-name')
    ->with('deliveries', $deliveries)
    ->with('products', $products)
    ->with('outboundRecords', $outboundRecords);

3. 变量名一致性检查 #

确保控制器传递的变量名与视图中使用的完全一致，比如控制器传$deliveries，视图里不能写成$delivery。

4. 调试变量是否存在 #

在视图中可通过以下方式检查变量：

@isset($deliveries)
    <!-- 渲染配送模块内容 -->
@else
    <p>No delivery data available</p>
@endisset

额外优化建议 #

控制器代码优化 #

• 用findOrFail()替代find()，避免$delivery为null时调用属性报错：

$delivery = InventoryTransaction::findOrFail($deliveryId);

• 移除select中重复的inventory_movement.quantity字段

前端HTML拼接优化 #

直接拼接HTML存在XSS风险，建议使用DOM创建方法：

$.each(data.items, function(index, item) {
    let row = $('<tr>')
        .append($('<td>').text(item.id))
        .append($('<td>').text(item.medicine_name))
        .append($('<td>').text(item.brand))
        .append($('<td>').text(item.expiry_date))
        .append($('<td>').text(item.quantity))
        .append($('<td>').text(item.unit_price))
        .append($('<td>').text(item.quantity * item.unit_price));
    $('#delivery-items').append(row);
});

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