Jquery 在MVC中使用AJAX

我试图使用AJAX允许用户输入ID号，以便填充页面上的另一个区域。我想使用AJAX来实现这一点。我很少使用AJAX，尤其是在使用MVC时。我的AJAX应该在单击我的

checkIdBtn

时执行，但每次单击它时，它都会显示“找不到资源。请求的URL:

/Events/Search

”。我不知道我的URL有什么问题（我猜它找不到我的控制器/操作方法？）。我的控制器是我的

HomeController

，操作方法是

getEmpInfo

。下面是我的AJAX的代码：

<script type="text/javascript">
$(document).ready(function () {
    $('#CheckIdBtn').click(function () {
        var empId = $('#empId').val();
        $.ajax({
            url: '/Home/getEmpInfo',
            contentType: 'application/html; charset=utf-8',
            data: { id: empId },
            type: 'GET',
            dataType: 'html'
        })
        .success(function (result) {
            $('#EmpInfoDiv').html(result);
        })
        .error(function (xhr, status) {
            alert(status);
        })
    });
});
</script>

$（文档）.ready（函数（）{
$（'#CheckIdBtn'）。单击（函数（）{
var empId=$（'#empId'）.val（）；
$.ajax({
url:“/Home/getEmpInfo”，
contentType:'application/html；charset=utf-8'，
数据：{id:empId}，
键入：“GET”，
数据类型：“html”
})
.成功（功能（结果）{
$（'#EmpInfoDiv'）.html（结果）；
})
.错误（功能（xhr，状态）{
警报（状态）；
})
});
});

几点-

您正在将一些数据发布到服务器，因此，请使用类型：“POST”而不是“GET”

删除数据类型和内容类型

确保名为“getEmpInfo”的操作收到名为id的参数

---

我建议使用框架附带的帮助程序

url: '@Url.Action("Home", "getEmpInfo")'

---

另外，由于MVC惯例是使用驼峰式外壳，即getEmpInfo，所以仔细检查

getEmpInfo

是有效的。您可能需要为此自定义路由。

我怀疑您在单击时再次发布到您的页面。尝试添加

e.preventDefault（）到您的点击处理程序（我还修复了您的ajax调用异常）：

当我有此错误时，我从索引文件运行项目，然后此错误不会出现。
您可以尝试打开索引或html文件，然后单击“运行”按钮。
我认为你的错误是。。。您正在混合视图和局部视图，请确保您的视图和局部视图没有混合。
键入
http://yourserver/Home/getEmpInfo
在浏览器中？它会找到它。。。告诉我控制器的参数值为空。按钮的单击事件是否触发？（即重新加载页面）如果需要，则需要添加'preventDefault（）`
无法找到资源。请求的URL:/Events/Search
：不知何故您正在调用
http://yourserver/Events/Search
我知道..我的地址栏中是put/Events/Search，而不是/home/getEmpInfo，但我没有在任何地方调用Events/Search。我根据您的观点进行了更新，但结果仍然相同。我将视图重新创建为getEmpInfo，并更改了url按照你的建议。现在，当我点击我的按钮时，它什么也不做。
$('#CheckIdBtn').click(function (e) {
    e.preventDefault();
    var empId = $('#empId').val();
    $.ajax({
        url: '/Home/getEmpInfo',
        data: { id: empId },
        type: 'POST'
    })
    .success(function (result) {
        $('#EmpInfoDiv').html(result);
    })
    .error(function (xhr, status) {
        alert(status);
    })
});