| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>异步交互数据传递</title>
- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- 引入jQuery库 -->
- </head>
- <body>
- <h1>用户信息提交</h1> <!-- 页面主标题 -->
- <form action="#" method="get" style="width: 245px;"> <!-- 表单，宽度设置为245px -->
- <label for="username">用户名：</label> <!-- 用户名标签 -->
- <input type="text" id="username" style="float: right;" /> <!-- 用户名输入框 -->
- <br/><br/>
- <label for="age">年龄：</label> <!-- 年龄标签 -->
- <input type="text" id="age" style="float: right;" /> <!-- 年龄输入框 -->
- <br/><br/>
- <input type="button" value="提交" id="btn" /> <!-- 提交按钮 -->
- <br/><br/>
- <div id="show"></div> <!-- 用于显示文本文件内容的div -->
- </form>
- <script type="text/javascript">
- $(function() {
- // 读取并显示文本文件的内容
- $.ajax({
- url: "20241212ajax.txt", // 请求的文本文件路径
- success: function(result) { // 请求成功的回调函数
- $("#show").html(result); // 将文本文件内容显示在id为show的div中
- },
- error: function() { // 请求失败的回调函数
- alert("无法加载文本文件！"); // 弹出提示框
- }
- });
- $("#btn").click(function() {// 点击提交按钮时，收集表单数据并发送给后端
- let username = $("#username").val(); // 获取用户名输入框的值
- let age = $("#age").val(); // 获取年龄输入框的值
- // 判断用户名和年龄是否为空
- if (!username || !age) { // 如果任一输入为空
- alert("用户名和年龄不能为空！"); // 弹出提示框
- return; // 终止函数执行
- }
- let params = { // 构建发送给后端的数据
- username: username, // 将用户名存入params对象
- age: age // 将年龄存入params对象
- };
- $.ajax({// 使用 jQuery 的 AJAX 方法来发送请求
- url: "http://localhost:3000/get", // 后端接收请求的URL
- type: "GET", // 请求类型为GET
- data: params, // 发送的数据
- success: function(data, status) { // 请求成功的回调函数
- alert("数据: " + data + "\n状态: " + status); // 弹出返回的数据和状态
- },
- error: function(xhr, status, error) { // 请求失败的回调函数
- alert("请求失败: " + error); // 弹出错误信息
- } }); }); });
- </script>
- </body>
- </html>
|
