📌  相关文章
📜  使用 Ajax JQuery 将字符串变量发送到 .net mvc - Javascript (1)

📅  最后修改于: 2023-12-03 15:22:09.351000             🧑  作者: Mango

使用 Ajax JQuery 将字符串变量发送到 .Net MVC - Javascript

在开发 .Net MVC 应用程序时，前端经常需要向服务器发送数据。Ajax JQuery 可以帮助我们实现有趣的用户体验，而同时又可以与后端交流数据。

本文将讲解如何使用 Ajax JQuery 将字符串变量发送到 .Net MVC 平台。在本文中，我们将编写一个使用 Ajax JQuery 发送字符串变量到控制器方法的示例。

步骤一：创建 MVC 项目

首先，我们需要创建一个 .Net MVC 项目。可以在 Visual Studio 的创建项目向导中轻松创建。创建过程中，请确保选择“MVC”模板。

步骤二：创建控制器方法

接下来，我们需要创建一个 Azure 控制器，并编写一个名为 "SendText" 的简单方法。该方法将接受字符串变量 "text" 并返回传递的字符串变量。

public class AjaxController : Controller
{
    [HttpPost]
    public string SendText(string text)
    {
        return text;
    }
}

现在我们创建了一个控制器方法，只需要做一些简单的前端调用即可在前端引擎中使用该方法。

步骤三：将数据发送到服务器

接下来，我们将创建 JavaScript 文件，并将字符串变量发送到服务器。为此，我们将使用 Ajax JQuery。以下是发送数据的代码片段：

$(document).ready(function () {
    $("#myButton").click(function () {
        var text = $("#myText").val();

        $.ajax({
            url: '@Url.Action("SendText", "Ajax")',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ text: text }),
            success: function (result) {
                $("#myDiv").html(result);
            },
            error: function () {
                alert("Error!");
            }
        });
    });
});

在上述代码片段中，我们首先使用 jQuery 中的 ready() 方法等待 DOM 完成加载，然后使用 click() 方法将数据发送到服务器。当单击发生时，我们将捕获文本框中的值，并使用 $.ajax() 方法将值发送到服务器。

在 $.Ajax() 方法中，我们设置了以下参数：

  • url：指定要向其发送数据的控制器方法的 URL。
  • type：指定使用 POST 方法发送数据。
  • contentType：指定发送的数据类型。
  • data：将字符串变量放入 JSON 对象中，并将其作为数据参数发送。在服务器端，我们可以根据需要使用参数调用 SendText() 方法。
  • success：将服务器返回的数据添加到“myDiv”中。
  • error：如果发送数据时出现错误，则会在此处显示警报。
步骤四：将 HTML 页面连接到 JavaScript 并运行！

最后，我们将把所有 HTML、JavaScript、CSS 和控制器方法粘合在一起，并在浏览器中运行。在这种情况下，HTML 页面将具有以下形象：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Send Text With JQuery and Ajax</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="~/Scripts/Test.js"></script>
</head>
<body>
    <input type="text" id="myText" name="myText" /><br />
    <button id="myButton">Send</button>    

    <hr />

    <div id="myDiv"></div>
</body>
</html>

以上代码创建了一个文本框、按钮和 div 标签。在单击按钮时，将执行我们在之前的 JavaScript 方法中编写的代码，并将字符串变量发送到服务器。

现在，我们可以在浏览器中启动该网页，并单击“Send”按钮。将在 div 元素中显示该字符串数据。

本文中所示的代码片段已经运行并得出了正确的结果。如果您按照此步骤执行，则您也应该能够成功运行。