AJAX实例

AJAX

  • Asynchronous JavaScript and XML

  • 异步的JavaScript与XML,不是一门新技术,只是一个新的术语。(老技术新玩法)

  • 使用AJAX,网页能够将增量更新呈现在页面上,而不需要刷新整个页面。

  • 虽然X代表XML,但目前JSON的使用比XML更加普遍。(任何语言都可解析json字符串)

  • 官网:https://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX

• 示例

  • 使用jQuery(js框架,比用原生js发ajax请求更方便)发送AJAX请求。

• 实践

  • 采用AJAX请求,实现发布帖子的功能

AJAX实例

ajax请求

java 复制代码
    // 通常是异步提交,故用POST    
	@RequestMapping(path = "/ajax", method = RequestMethod.POST)
    @ResponseBody
    public String testAjax(String name, int age) {
        System.out.println(name);
        System.out.println(age);
        return CommunityUtil.getJSONString(0, "操作成功!");
    }
java 复制代码
public class CommunityUtil {
    // 引入fastjason包
    // 将指定信息转成jason字符串
    public static String getJSONString(int code, String msg, Map<String, Object> map) {
        JSONObject json = new JSONObject();
        json.put("code", code);
        json.put("msg", msg);
        if (map != null) {
            for (String key : map.keySet()) {
                json.put(key, map.get(key));
            }
        }
        return json.toJSONString();
    }

    public static String getJSONString(int code, String msg) {
        return getJSONString(code, msg, null);
    }

    public static String getJSONString(int code) {
        return getJSONString(code, null, null);
    }

}

html页面

java 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
</head>
<body>
    <p>
        <input type="button" value="发送" onclick="send();">
    </p>
<!--    引用jquery-->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
    <script>
<!--       jquery发送请求 $.get()发送get请求 $.post()发送post请求 $.ajax()发送任意类型请求 -->
<!--       post(访问路径, 向服务器提交的数据(js对象形式), 回调函数(匿名)) -->
<!--                  回调函数的形参data:为服务器返回给浏览器的数据,数据形式为json字符串,需转化成js对象使用 -->

        function send(){
           $.post(
                "/springdemo1/ajax",
                {"name":"lay", "age":31},

                function(data){
                    console.log(typeof(data));
                    console.log(data);

<!--            $.parseJSON(data):将data(json字符串,即String类型)转为js对象(Object类型),通过属性来获取value-->
                    data = $.parseJSON(data);

                    console.log(typeof(data));
                    console.log(data);
                    console.log(data.code);
                    console.log(data.msg);
                }
           );
        }
    </script>

</body>
</html>

一些选择题

B

A

错误:B 正确:D

095)]

B

外链图片转存中...(img-0XmoHwg0-1709223340096)

A

外链图片转存中...(img-wIWFuloC-1709223340096)

错误:B 正确:D

相关推荐
小胖墩有点瘦15 分钟前
基于Java的旅游管理系统
java·开发语言·旅游
ThisIsClark1 小时前
【玩转正则表达式】Python、Go、Java正则表达式解释器的差异解析(附示例)
java·python·golang·正则表达式
blammmp2 小时前
Java EE 进阶:Spring Boot 日志
java·spring boot·java-ee
JafarOne2 小时前
手机端Flutter、React Native与原生安卓、iOS交互的方案及设计原理
android·java·flutter·react native·ios·智能手机
孩子 你要相信光2 小时前
安卓edge://inspect 和 chrome://inspect调试移动设备上的网页
前端
乐闻x3 小时前
提升 React 应用性能:使用 React Profiler 进行性能调优
前端·javascript·react.js·性能优化
拾忆,想起5 小时前
Nacos命名空间Namespace:微服务多环境管理的“秘密武器”如何用?
java·运维·spring boot·spring cloud·微服务·架构
NaZiMeKiY5 小时前
HTML5前端第二章节
前端·html·html5
天若有情6735 小时前
深入浅出:HTML 中 <a> 标签嵌入链接教程
前端·html
烂蜻蜓5 小时前
HTML 样式之 CSS 全面解析
前端·css·html