使用Ajax和MVC 4加载Div内容

Question

我有几个按钮应该更改页面上区域的内容。 我已经阅读了许多教程，如何使用Ajax来实现延迟加载，但是不幸的是，没有成功。 这是我的html：

<div>
    <div>
        <button id="btn_goals">Goals</button>
        <button id="btn_achievements">Achievements</button>
    </div>

    <div id="region_content"></div>

</div>

这是我的js：

$(document).ready(function () {

$('#btn_goals').on('click', function () {
    $.ajax({
        url: '@Url.Action("Index", "Goals")',
        success: function (data) {
            $('#region_content').html(data);
        }
    });
});

$("#btn_achievements").on("click", function () {
    ......
});

}）;

问题是什么？

**********编辑************

好吧，我将ajax参数中的url从url：'@ Url.Action（“ Index”，“ Goals”）'更改为url：'/ Goals / Index'，它开始正常工作。 是什么原因？

Answer 1

请尝试执行以下步骤：

1. 使用console.log("Inside Success function"+ data); 测试是否从控制器方法返回了所需的数据。

在浏览器中使用Ctrl+Shift+I查看控制台。 如果成功：

2. 采用：

var div = document.getElementById("region_content");
div.innerHTML = div.innerHTML + data;

3. 确保类型转换正确完成。

4. 还要在ajax函数中指定类型： POST 。

如果您在控制台上看不到“ Inside Success功能”，则控制器功能可能有问题。