在 ASP.NET MVC 中，使用 JavaScript 获取 URL 查询字符串的值和 <input> 输入框的文本

在 ASP.NET MVC 中，使用 JavaScript 获取 URL 查询字符串的值和 <input> 输入框的文本，并通过 AJAX 发送到 Web API，你可以按照以下步骤进行：

步骤 1：获取查询字符串的值

你可以使用 URLSearchParams 来获取 URL 中的查询参数：

javascriptCopyEditfunction getQueryStringValue(key) {    const params = new URLSearchParams(window.location.search);    return params.get(key);
}

如果 URL 是：

arduinoCopyEdithttps://example.com/page?userId=123

调用 getQueryStringValue('userId') 将返回 "123"。

步骤 2：获取输入框的值

javascriptCopyEditfunction getInputValue(inputId) {    return document.getElementById(inputId).value;
}

假设你的 HTML 代码如下：

htmlCopyEdit<input type="text" id="message" placeholder="Enter message"><button id="submitBtn">Submit</button>

你可以用 getInputValue('message') 获取输入框的值。

步骤 3：组合数据并通过 AJAX 发送到 Web API

使用 $.ajax 发送 POST 请求：

javascriptCopyEdit$(document).ready(function () {
    $("#submitBtn").click(function () {        // 获取查询字符串中的 userId
        let userId = getQueryStringValue("userId");        // 获取输入框的文本
        let message = getInputValue("message");        // 组合数据
        let requestData = {            userId: userId,            message: message
        };        // 发送 AJAX 请求到 Web API
        $.ajax({            url: "/api/messages",  // Web API 的 URL
            type: "POST",            contentType: "application/json",            data: JSON.stringify(requestData),            success: function (response) {                console.log("Success:", response);                alert("Message sent successfully!");
            },            error: function (xhr, status, error) {                console.error("Error:", error);                alert("Failed to send message.");
            }
        });
    });
});

步骤 4：ASP.NET Web API 端点

在 ASP.NET MVC Web API 控制器中，创建一个 POST 方法来接收数据：

csharpCopyEdit[HttpPost]public IHttpActionResult SendMessage([FromBody] MessageModel model){    if (model == null || string.IsNullOrEmpty(model.UserId) || string.IsNullOrEmpty(model.Message))
    {        return BadRequest("Invalid data.");
    }    // 处理数据，例如存入数据库
    return Ok(new { success = true, message = "Message received." });
}// 定义模型类public class MessageModel{    public string UserId { get; set; }    public string Message { get; set; }
}