jquery - 如何使用 AJAX 将字符串传递给 Controller

Question

我似乎无法完成按下按钮时将字符串传递给 Controller ​​这一非常简单的任务。接收到的数据始终为空。有人可以告诉我我做错了什么吗？

表格:

<form>
    <div class="form-group">
        <label for="ProcessName" class="control-control">Process Name</label>
        <input id="ProcessName" class="form-control" placeholder="Choose process name">
        <small id="subtitle" class="form-text text-muted">Text under input field.</small>
    </div>
    <button type="submit" class="btn btn-primary" id="addElement">Submit</button>
</form>

Javascript:

$(function () {
    $("#addElement").click(function () {
        var processName = $("#ProcessName").val();

        // I've tried this method
        $.post('@Url.Action("AddProcessName")', processName, function (data, status) {
                    alert(data)
        });

       // And also this one, but both of them don't work.
       // I did not try them at the same time, of course
        $.ajax({
            type: "POST",
            url: '@Url.Action("AddProcessName")',
            data: processName,
            dataType: 'text',
            success: function (response) {
                alert(response)
                };
        });
    });
});

服务器端:

[HttpPost]
public IActionResult AddProcessName(string data)
{
    pm.ID = 1;
    pm.Name = data; // I put a breakpoint here to check the value of 'data'
    return Content(pm.Name);
}

Answer 1

您告诉您的操作需要一个名为 data 的变量，但您并未发送该变量。您需要将 jQuery AJAX 请求的 data 属性更改为:

data: { data: processName },

我还建议您从 Action 返回 JSON，因为由于空格可能会或可能不会被解释，纯文本充其量也可能是片状的。试试这个:

$("#addElement").click(function () {
  $.ajax({
    type: "POST",
    url: '@Url.Action("AddProcessName")',
    data: { 
      data: $("#ProcessName").val() 
    },
    dataType: 'json',
    success: function(response) {
      // use console.log for debugging, and access the property of the deserialised object
      console.log(response.Name); 
    };
  });
});

[HttpPost]
public IActionResult AddProcessName(string data)
{
    pm.ID = 1;
    pm.Name = data;
    return Json(new { Name = pm.Name });
    // or just:
    // return Json(pm);
}