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

相关推荐
2401_8848107412 分钟前
maven笔记
java·笔记·maven
霸王龙的小胳膊13 分钟前
SpringMVC-登录校验
java·mvc
字节源流14 分钟前
【SpringMVC】常用注解:@PathVariable
java·开发语言·servlet
Anlici15 分钟前
Axios 是基于 Ajax 还是 Fetch?从源码解析其实现
前端·面试
一个处女座的程序猿O(∩_∩)O18 分钟前
Vue 中的 MVVM、MVC 和 MVP 模式深度解析
前端·vue.js·mvc
小安同学iter19 分钟前
SpringMVC(五)拦截器
java·开发语言·spring boot·spring·java-ee
鱼樱前端21 分钟前
前端程序员集体破防!AI工具same.dev像素级抄袭你的代码,你还能高傲多久?
前端·javascript·后端
2301_7644413329 分钟前
小说文本分析工具:基于streamlit实现的文本分析
前端·python·信息可视化·数据分析·nlp
栀栀栀栀栀栀32 分钟前
JVM 2015/3/15
java·开发语言·jvm
羊思茗52039 分钟前
Spring Boot中@Valid 与 @Validated 注解的详解
java·spring boot·后端