javascript - 带有控制器方法参数的Jquery AJAX CALL不起作用

Question

我正在 MVC 应用程序中使用 Jquery AJAX 调用。我的观点是这样的：

<p>

    Name @Html.TextBox("Name")
    Date @Html.TextBox("Date")
    <input type="submit" id="SubmitName" value="Submit" />
</p>

我的 AJAX 调用如下：

<script type="text/javascript">
    function send() {
        var Details = JSON.stringify({
            StudentName: $("#Name").val(),
            DateofJoining: $("#Date").val()
        });
        $('#target').html('sending..');

        $("SubmitName").click(function () {

            $.ajax({
                url: "/DQR/Details",
                type: "POST",
                dataType: "json",
                contentType: "application/json",
                data : Details ,
                success: function (data) {
                    $('#target').html(data.msg);
                },

            });
        })
    }
</script>

我的控制器看起来像这样：

[HttpPost]
        public ActionResult Details (string StudentName, string DateofJoining)
        {

            var result = (from dc in _db.Details
                          where dc.Name== StudentName
                          select dc.Address);
            return Json(result, JsonRequestBehavior.AllowGet);
        }

我不知道我错过了什么。ajax 请求不起作用。谁能帮我解决这个问题？

Answer 1

假设您的控制器名称是 DQR，那么您需要编写如下：-

 $.ajax({
                url: "/DQR/Details",
                type: "POST",
                dataType: "json",
                contentType: "application/json",
                data : Details ,
                success: function (data) {
                    $('#target').html(data.msg);
                },

            });

和 id 应该是： -

 $("#SubmitName").click(function () {
        var Details = JSON.stringify({
        StudentName: $("#Name").val(),
        DateofJoining: $("#Date").val()
    });
    $('#target').html('sending..');

    //// your ajax call
}});

什么是发送（）？我的意思是点击事件应该在$(document).ready(function() {});

如果您正在玩客户端，我建议您使用简单的按钮而不是“提交”。

Answer 2

正确绑定点击处理程序，Details在点击处理程序中移动对象创建

$(function() {
    $("#SubmitName").click(function () {
        var Details = JSON.stringify({
            StudentName: $("#Name").val(),
            DateofJoining: $("#Date").val()
        });
        $('#target').html('sending..');
        $.ajax({
            url: "/DQR/Details",
            type: "POST",
            dataType: "json",
            contentType: "application/json",
            data : Details ,
            success: function (data) {
                $('#target').html(data.msg);
            }
        });     
    });
});

Answer 3

您也可以使用 jQuery$.post方法。

这是一个例子。

var StudentName = $("#Name").val();
var DateofJoining = $("#Date").val();

$.post('/Controller/Action', { 'StudentName': StudentName , 'DateofJoining': DateofJoining  }, function(data) {
    $('#target').html(data.msg);
}, 'json');

这是有关$.post的更多信息