AJAX的简单运用和实时更新输入框数据

最新推荐文章于 2022-11-29 23:47:56 发布

程序员汐

最新推荐文章于 2022-11-29 23:47:56 发布

阅读量500

点赞数 2

分类专栏：前端文章标签： ajax java js jquery

本文链接：https://blog.csdn.net/xi5214/article/details/112544648

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

ajax.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(function () {
            let $input = $("#input");
            let $p = $("p");
            //按钮点击事件
            $("#btn").click(function () {
                $.ajax({
                    //一个用来包含发送请求的URL字符串
                    url: "/test",
                    //请求方式
                    type: "get",
                    //发送至服务器的 key/value 数据
                   data:{"name":"zs","age":18},
                    //AJAX 请求成功时执行函数
                    success: function (data) {
                        $p.text(data);
                    }
                });
            });
    </script>
</head>
<body>
<p>这是一个异步加载页面</p>
<button id="btn">我是一个按钮</button>
</body>
</html>

Servlet页面

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * @author Lotus
 */
 //工具使用的是IDEA，servlet使用的是注解的方式，MyEclipse可以配置web.xml文件
@WebServlet(name = "ajax", urlPatterns = "/test")
public class AjaxServletTest extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        //获取ajax传递过来的值
        String name = request.getParameter("name");
        int age = Integer.parseInt(request.getParameter("age"));
        //控制台输出值
        System.out.println("姓名:" + name + "\t年龄:" + age);
        response.getWriter().println("异步加载");

    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
}

效果图

页面加载完毕

在这里插入图片描述

按钮点击后

在这里插入图片描述

更新输入框数据

ajax.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(function () {
            let $input = $("#input");
            let $p = $("p");
            //当按钮被松开时，发生 keyup 事件
            $input.keyup(function () {
                let val = $input.val();
                //给p标签设置值
                $p.text(val);
            });
        });
    </script>
</head>
<body>
<p>这是一个异步加载页面</p>
<button id="btn">我是一个按钮</button>
<br/>
<input type="text" id="input">
</body>
</html>

效果图

页面加载完毕后
在这里插入图片描述

随机输入内容后，上面p标签中的内容实时更新
在这里插入图片描述

程序员汐

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
AJAX的简单运用和实时更新输入框数据

ajax.html页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.3.1.js"></script> <script> $(function () { le
复制链接

扫一扫