如何通过AJAX向Controller传递字符串?接收数据始终为null
问题分析与解决方案
我来帮你排查一下问题所在,你遇到的后端接收数据为null的情况主要有几个原因,我会一步步帮你解决:
核心问题点
- 表单默认提交行为未阻止:你的按钮是
type="submit",点击时会触发表单的默认提交(页面刷新),这会直接中断你的AJAX请求,导致数据根本没传到后端。 - AJAX数据传递格式错误:你直接传递纯字符串
processName,ASP.NET Core的模型绑定无法识别这个无键名的数据,所以无法绑定到string data参数上。 - JavaScript语法错误:你写的
$.ajax代码里,success函数后面用了分号;,这是语法错误,会导致AJAX代码无法正常执行。
修正后的代码方案
方案一:使用键值对传递数据(推荐,符合常规表单提交规范)
这个方案不需要修改后端代码,只需要调整前端的JavaScript:
$(function () { $("#addElement").click(function (e) { // 关键:阻止表单默认提交行为,避免页面刷新 e.preventDefault(); var processName = $("#ProcessName").val(); // 使用$.post的正确写法:传递键值对,键名和后端参数名`data`一致 $.post('@Url.Action("AddProcessName")', { data: processName }, function (data, status) { alert(data); }); // 或者修正后的$.ajax写法(注意语法错误已修复) /* $.ajax({ type: "POST", url: '@Url.Action("AddProcessName")', data: { data: processName }, // 键名与后端参数名匹配 dataType: 'text', success: function (response) { alert(response); } // 这里之前的分号已经改成逗号,并且去掉了多余的分号 }); */ }); });
方案二:传递纯字符串(需修改后端接收方式)
如果你想直接传递纯字符串,需要设置正确的请求头,并让后端从请求体中读取数据:
前端JavaScript修改:
$(function () { $("#addElement").click(function (e) { e.preventDefault(); var processName = $("#ProcessName").val(); $.ajax({ type: "POST", url: '@Url.Action("AddProcessName")', data: processName, contentType: "text/plain", // 告诉后端这是纯文本数据 dataType: 'text', success: function (response) { alert(response); } }); }); });
后端C#代码修改:
[HttpPost] public IActionResult AddProcessName([FromBody] string data) // 添加[FromBody]特性,从请求体读取数据 { pm.ID = 1; pm.Name = data; return Content(pm.Name); }
验证建议
- 打开浏览器的开发者工具(F12),切换到Network标签,点击提交按钮后查看AJAX请求的详情,确认请求是否发送成功,以及Form Data/Request Payload里是否包含你输入的内容。
- 确保后端的断点能命中,此时
data参数应该能正确获取到前端传递的值了。
内容的提问来源于stack exchange,提问作者Zarif
相关产品推荐
相关产品推荐

