码迷,mamicode.com
首页 > Web开发 > 详细

使用ajax

时间:2020-01-25 10:36:01      阅读:110      评论:0      收藏:0      [点我收藏+]

标签:map   fun   write   error   cep   success   htm   jquer   Servle   

使用ajax

Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。

Ajax = 异步 JavaScript 和 XML 或者是 HTML。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。

  1. 下载jQuery

    https://jquery.com/download/

  2. 导入jquery-3.4.1.js

    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.js"></script>
  3. function a()

    <script>
        function a() {
            $.post({
                url: "${pageContext.request.contextPath}/a1",//请求地址
                data: {'name': $("#username").val()},//请求数据
                success: function (data, status) {//请求成功回调函数
                    console.log("data=" + data);
                    console.log("status=" + status);
                },
                error: function () {//请求失败回调函数
                }
            })
        }
    </script>
  4. 后端处理

    @RequestMapping("/a1")
    public void a1(String name, HttpServletResponse response) throws IOException {
        if ("julia".equals(name)) {
            response.getWriter().print("true");
        } else {
            response.getWriter().print("false");
        }
    }
  5. 文本框失去焦点时,触发a(),发起请求到后台

    用户名:<input type="text" id="username" onblur="a()">
  6. 控制台输出

    技术图片

使用ajax

标签:map   fun   write   error   cep   success   htm   jquer   Servle   

原文地址:https://www.cnblogs.com/pinked/p/12232789.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!