JavaWeb简单实例——Ajax请求

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

以下是一个使用Ajax发送请求并动态更新页面部分内容的简单示例。

首先，我们需要一个HTML页面，其中包含用于发送Ajax请求的JavaScript代码和用于显示结果的元素：




<!DOCTYPE html>
<html>
<head>
    <title>Ajax Request Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#load").click(function(){
                $.ajax({
                    url: "target.jsp", // 请求的服务器端地址
                    type: "GET", // 请求类型
                    success: function(data){
                        // 请求成功后的回调函数
                        // "data" 是服务器返回的内容
                        $("#response").html(data);
                    },
                    error: function(){
                        // 请求失败后的回调函数
                        alert("Error loading data!");
                    }
                });
            });
        });
    </script>
</head>
<body>
 
<div id="response">
    <!-- 这里将显示服务器响应的内容 -->
</div>
 
<button id="load">Load Data</button>
 
</body>
</html>

然后，我们需要一个服务器端的文件，比如 target.jsp，它将响应Ajax请求：




<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Ajax Response</title>
</head>
<body>
    <!-- 这里可以包含任何你想通过Ajax加载到页面的内容 -->
    <p>This data was loaded asynchronously!</p>
</body>
</html>

这个简单的例子演示了如何使用jQuery库和Ajax方法从服务器请求数据，并在页面上动态更新内容。当用户点击按钮时，页面会向 target.jsp 发送一个GET请求，并在请求成功后用响应内容更新 div 元素的内容。

JavaWeb简单实例——Ajax请求

评论已关闭

推荐阅读