【.NET全栈】ASP.NET开发Web应用——AJAX开发技术

作者：System 时间：2024年08月13日分类：所有,ajax 字数：1655

在ASP.NET中使用AJAX技术，可以通过JavaScript调用服务器端的代码而无需刷新页面。以下是一个简单的示例，展示了如何使用ASP.NET MVC和jQuery实现AJAX请求。

创建一个ASP.NET MVC项目。
添加一个控制器方法，例如：




public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public ActionResult GetData(string input)
    {
        // 处理input并返回结果
        string result = "处理后的数据：" + input;
        return Json(result, JsonRequestBehavior.AllowGet);
    }
}

在视图中添加JavaScript代码，使用jQuery发送AJAX请求：




@{
    Layout = null;
}
 
<!DOCTYPE html>
<html>
<head>
    <title>AJAX示例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#ajaxButton').click(function () {
                var input = $('#inputField').val();
                $.ajax({
                    url: '@Url.Action("GetData", "Home")',
                    type: 'POST',
                    data: { input: input },
                    success: function (data) {
                        $('#result').text(data);
                    },
                    error: function () {
                        alert('Error occurred');
                    }
                });
            });
        });
    </script>
</head>
<body>
    <div>
        输入数据：<input type="text" id="inputField" />
        <button id="ajaxButton">发送</button>
        <div id="result"></div>
    </div>
</body>
</html>

在这个示例中，我们创建了一个文本输入框和一个按钮，点击按钮时，使用jQuery触发AJAX POST请求，将输入框的值发送到服务器端的GetData方法。服务器端处理完数据后，返回JSON格式的响应，该响应在成功回调中被接收并显示在页面上的<div id="result"></div>元素中。

【.NET全栈】ASP.NET开发Web应用——AJAX开发技术

评论已关闭

推荐阅读