【ajax、Json】

最新推荐文章于 2024-09-11 20:28:45 发布
最新推荐文章于 2024-09-11 20:28:45 发布
阅读量103 收藏
点赞数
分类专栏： javaEE javaweb 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46932548/article/details/107011315
版权

【ajax、Json】

AJAX

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，**无需重新加载整个网页的情况下，能够更新部分网页的技术。**可以提升用户的体验。

异步和同步：客户端和服务器端相互通信的基础上的。

  • 同步：客户端必须等待服务器端的响应，在等待期间客户端不能做其他操作。
  • 异步：客户端不需要等待服务器端的响应，在服务器处理请求的过程中，客户端可以进行其他操作。

实现方式

原生的JS实现方式（了解）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生js实现ajax</title>
    <script>
        //定义方法
        function func() {
            //发送异步请求
            //1.创建核心对象
            var xmlhttp;
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }

            //2.建立连接
            /*
             * 参数1:请求方式："GET"、"POST"
             *  * "GET"方式：请求参数在url后面拼接，send参数为空参
             *  * "POST"方式：请求参数作为send方法的参数
             * 参数2：请求的url路径
             * 参数3：同步（false）/异步（true）
             */
            xmlhttp.open("GET","ajaxServlet?username=tom",true);
            //3.发送请求
            xmlhttp.send();

            //4.接收并处理来自服务器的响应结果
            //获取方式：xmlhttp.responseText
            //什么时候获取？当服务器响应成功后获取

            //onreadystatechange：当xmlhttp对象的就绪状态改变时触发事件
            xmlhttp.onreadystatechange=function()
            {
                //判断就绪状态是否为4（请求已完成，且响应已就绪）并且响应状态码是否为200
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    //获取服务器的响应结果
                    var responseText = xmlhttp.responseText;
                    alert(responseText);
                }
            }



        }
    </script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="func()">
</body>
</html>
JQuery实现方式

详见JQuery文档中ajax相关说明。

$.ajax()

格式：

jQuery.ajax(url,[settings])

常用的setting键值对：

//使用$.ajax()发送异步请求
$.ajax({
   url:"ajaxServlet",//请求路径
   type:"POST",//请求方式
   data:{"username":"jack","age":23},//请求参数
    success:function (data) {
       alert(data);
    },//响应成功后的回调函数，函数的参数会接收服务器响应结果的值
    error:function () {
       alert("出错了！");
    },//如果请求响应出现错误，会调用回调函数
    dataType:"text"//设置接收到的响应数据的格式，默认为MIME类型中定义的格式
});
$.get()

格式：

jQuery.get(url, [data], [callback], [type])

示例：

//定义方法
function func() {
    //使用$.get(),发送异步请求
    $.get("ajaxServlet",//请求路径
        {username: "小王", age: 23},//请求数据
        function (data) {
            alert(data);
        },//回调函数
        "text"//响应结果的类型
    )
}
$.post()

与$.get()格式相同，只不过把get换成了post。

格式：

jQuery.post(url, [data], [callback], [type])

Json

JSON：JavaScript Object Notation，JavaScript对象表示法。

//java对象
Person person = new Person();
person.setName("张三");
person.setAge(23);
person.setGender("男");

Json表示对象：

var p ={"name":"张三","age":23,"gender":"男"};

Json现在多用于存储和交换文本信息，进行数据的传输。JSON 比 XML 更小、更快，更易解析。

Json语法

  • 基本规则：

    JSON 语法是 JavaScript 对象表示法语法的子集。

    • 数据在名称/值对中：Json数据是由键值对构成的；
      • 键用引号(单双都行)引起来，也可以不使用引号
      • 值的取值类型：
        1. 数字（整数或浮点数）
        2. 字符串（在双引号中）
        3. 逻辑值（true 或 false）
        4. 数组（在方括号中）
        5. 对象（在花括号中）
        6. null
    • 数据由逗号分隔：多个键值对由逗号分隔；
    • 花括号保存对象：使用{}定义json格式；
    • 方括号保存数组：[]

  • 获取数据：

  1. json对象.键名；
  2. json对象[“键名”]；
  3. json数组对象[索引]；
    <script>
        //1.定义基本格式
        var person = { name: "张三", "age": 23, "gender": "男" };

        //获取name的值
        var name1 = person.name;
        //也可以写作
        var name2 = person["name"];

        //获取person对象中的所有键和值 使用 fon in
        for (var key in person) {
            //此时key是个字符串，所以只能用json对象["键名"]获取值
            var value = person[key];

            alert(key + ":" + value);

        }

        //2.嵌套格式  {} -->  []
        var persons = {
            persons: [{ name: "张三", "age": 23, "gender": "男" },
            { name: "李四", "age": 15, "gender": "男" },
            { name: "王五", "age": 26, "gender": "女" }
            ]
        };

        //获取persons对象中的数组对象类型的值的第0个索引位置的对象的name值
        var name3 = persons.persons[0].name;

        //3.嵌套格式  [] -->  {}
        var ps = [{ name: "张三", "age": 23, "gender": "男" },
        { name: "李四", "age": 15, "gender": "男" },
        { name: "王五", "age": 26, "gender": "女" }
        ];

        //获取李四值
        var name4 = ps[1].name;

        //遍历数组中的所有键值对
        for (var i = 0; i < ps.length; i++) {
            var person = ps[i];
            for (var key in person) {
                //此时key是个字符串，所以只能用json对象["键名"]获取值
                var value = person[key];

                alert(key + ":" + value);
            }
        }

    </script>

java对象与Json字符串的相互转换

Java中Java对象与Json字符串可以相互转换，有很多解析器，需要导入对应解析器的jar包：

Gson

需要通过new Gson()创建Gson对象，并使用相关方法进行转换：

  1. 对象转为Json字符串：String json = new Gson().toJSON(要转换的对象);
  2. Json字符串转换为对象：类型 对象名 = new Gson().fromJson(JSON字符串,对象类型.class);
    • Json字符串转换为对象可以转为bean类，也可以转换为Map集合
//使用Gson将person对象转为Json字符串
Gson gson = new Gson();
String jsonGson = gson.toJson(person);
System.out.println("Gson:" + jsonGson);
//Gson:{"name":"张三","age":23,"gender":"男"}
//使用Gson将Json字符串转为person对象
Person person1 = gson.fromJson(jsonGson, Person.class);
System.out.println(person1);//cn.itcast.domain.Person@53ca01a2
FastJson

直接调用JSON类中的静态方法，不需要创建对象：

  1. 对象转为Json字符串：String json=JSON.toJSONString(要转换的对象);
  2. Json字符串转换为对象：类型 对象名=JSON.parseObject(JSON字符串, 类型.class);
    • Json字符串转换为对象可以转为bean类，也可以转换为Map集合
//使用fastJson将person对象转为Json字符串
String jsonFastJson = JSON.toJSONString(person);
System.out.println("FastJson:" + jsonFastJson);
//FastJson:{"age":23,"gender":"男","name":"张三"}
//使用fastJson将Json字符串转为person对象
Person person2 = JSON.parseObject(jsonFastJson, Person.class);
//使用fastJson将Json字符串转为person对象
String jsonArray = "['1','1','1']";
List<String> list1 = JSON.parseArray(jsonArray, String.class);
System.out.println(list1);
jackson

创建jackson核心对象ObjectMapper，调用其相关方法进行转换：

对象转为Json字符串：

  • writeValue(参数1，object)方法：

    • 参数1：
      • File：将obj对象转换为JSON字符串，并保存到指定的文件中；
      • Writer：将obj对象转换为JSON字符串，并将JSON数据填充到指定的字符输出流中；
      • OutputStream：将obj对象转换为JSON字符串，并将JSON数据填充到指定的字节输出流中。

  • writeValueAsString (object)方法：直接获取Json字符串。

List\Map集合对象转为Json字符串：

转换使用的方法和对象转Json字符串使用的方法一致。

  • List：转换后的Json字符串是数组形式的；

  • Map：转换后的Json字符串跟对象的Json字符串是一样的。

Json转为Java对象：

类型 对象名=new ObjectMapper().readValue(JSON字符串, 类型.class);

//使用Jackson将person对象转为Json字符串
ObjectMapper mapper = new ObjectMapper();
//1.person对象转换为json数据用于传输
File file = new File("C:\\Users\\hp\\Desktop\\a.txt");
try {
    Writer writer = new FileWriter(file);
    mapper.writeValue(writer,person);
} catch (IOException e) {
    e.printStackTrace();
}
//2.单纯获取Json字符串
try {
    String s = mapper.writeValueAsString(person);
    System.out.println("Jackson:"+s);
    //Jackson:{"name":"张三","age":23,"gender":"男"}
} catch (JsonProcessingException e) {
    e.printStackTrace();
}
//创建List集合，存储person对象
List<Person> list = new ArrayList<>();
list.add(person);
list.add(person);
list.add(person);
//将集合对象转换为json字符串
String s = null;
try {
    s = mapper.writeValueAsString(list);
    System.out.println(s);
    //[{"name":"张三","age":23,"gender":"男"},{"name":"张三","age":23,"gender":"男"},{"name":"张三","age":23,"gender":"男"}]
} catch (JsonProcessingException e) {
    e.printStackTrace();
}
//使用jackson将Json字符串转为person对象
try {
    List list2 = mapper.readValue(s, List.class);
    System.out.println(list2);
    //[{name=张三, age=23, gender=男}, {name=张三, age=23, gender=男}, {name=张三, age=23, gender=男}]
} catch (IOException e) {
    e.printStackTrace();
}
Jackson注解

@JsonIgnore：排除属性；

@JsonFormat：属性值的格式化，参数可以传入pattern="你想要的格式"

private String name;
    private int age;
    //对象转Json数据时，忽略这条属性
    @JsonIgnore
    private String gender;
    //对象转Json数据时，格式化这条属性值
    @JsonFormat(pattern = "yyyy-MM-dd")
    private Date birthday;
    @Test
    public void test02(){
        //创建对象并对各个属性赋值
        Person person = new Person();
        person.setName("张三");
        person.setAge(23);
        person.setGender("男");
        person.setBirthday(new Date());

        //创建Jackson的核心对象ObjectMapper对象
        ObjectMapper mapper = new ObjectMapper();
        try {
            //使用ObjectMapper对象的方法直接获取Json字符串并打印
            System.out.println(mapper.writeValueAsString(person));
            //忽略了gender属性，格式化了birthday的格式
            //{"name":"张三","age":23,"birthday":"2020-06-27"}
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }
    }

案例

校验用户名是否存在。

  1. 服务器响应的数据，客户端在使用时，要想当作json的数据格式使用：
    1. $.get()中的最后一个参数type指定为“json”；
    2. 在服务器端设置MIME类型：response.setContentType(”application/json;charset=utf-8");
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆页面</title>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script>
        //入口函数
        $(function () {
            //获取username对象，绑定失去焦点事件
            $("#username").blur(function () {
                //获取username框内的值
                var value = $(this).val();
                //异步发送请求
                //期待服务器响应的数据格式：
                // {"userExist":true,"msg":"用户名已存在，请换一个"}
                //{"userExist":false,"msg":"用户名可用"}
                $.post("findUsernameServlet",{"username":value},function (data) {
                    var exist = data.userExist;
                    //获取span标签的jq对象
                    var $word = $("#word");
                    if (exist){
                        //用户名存在
                        $word.css("color","red");
                        $word.html(data.msg);

                    }else{
                        //用户名不存在
                        $word.css("color","green");
                        $word.html(data.msg);
                    }

                },"json");


            });

        });
    </script>
</head>
<body>
<label for="username">用户名</label>
<input type="text" name="username" id="username">
<span id="word"></span>
<br>
<label for="password">密码&nbsp;&nbsp;&nbsp;</label>
<input type="password" name="password" id="password">
</body>
</html>
@WebServlet("/findUsernameServlet")
public class FindUsernameServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //设置请求消息编码
        request.setCharacterEncoding("utf-8");
        //设置响应消息格式
        response.setContentType("text/html;charset=utf-8");
        //假设数据库中只有一个用户名：tom
        HashMap<String, Object> map = new HashMap<>();

        //接收参数，并判断该用户名是否已存在,将消息存入map集合中
        // {"userExist":true,"msg":"用户名已存在，请换一个"}
        //{"userExist":false,"msg":"用户名可用"}
        String username = request.getParameter("username");

        if ("tom".equals(username)){
            map.put("userExist",true);
            map.put("msg","用户名已存在，请换一个");
        }else {
            map.put("userExist",false);
            map.put("msg","用户名可用");
        }
        //将map集合转为json数据格式，并通过响应的字符输出流输出到客户端
        ObjectMapper mapper = new ObjectMapper();
        mapper.writeValue(response.getWriter(),map);

    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}
五岁能抬头1995
关注
专栏目录
ajax json 返回,ajax返回JSON时的处理方式
weixin_31976493的博客
08-06 3180
JSON中对象通过“{}”来标识，一个“{}”代表一个对象，如{“AreaId”:”123”}，对象的值是键值对的形式(key：value)。json_encode()该函数主要用来将数组和对象，转换为json格式json_encode(PHP 5 >= 5.2.0, PECL json >= 1.2.0)json_encode — 对变量进行 JSON 编码Report a bug ...
jquery ajax json文件,jQuery ajax读取本地json文件
weixin_31746993的博客
08-05 1436
jQuery ajax读取本地json文件json文件{"first":[{"name":"张三","sex":"男"},{"name":"李四","sex":"男"},{"name":"王武","sex":"男"},{"name":"李梅","sex":"女"}]}js方法一:$.ajax({url: "ceshi.json",//json文件位置type: "GET",//请求方式为getda...
SpringMVC通过Ajax处理Json数据
DSL95的博客
02-04 945
SpringMVC通过Ajax处理Json数据 jar包准备 jackson-annotations-2.8.9.jar jackson-core-2.8.9.jar jackson-databind-2.8.9.jar 三个jar包的版本须保持一致，否则会报错。 正常情况下，在Controller层中的方法，处理的数据最终返回结果不一定都为一个页面，如果存在返回一个对象或者一个List的情况，可以在该方法上使用注解@ResponseBody，如果不使用则会报404错误，因为SpringMVC将返
Android上解析Json格式数据
抬头~望~星空
05-22 89
Android上解析Json格式数据 参考：http://www.oschina.net/code/snippet_176897_7317
JAVA设置JSON头
Mencre的博客
02-09 2225
response.setContentType("application/json; charset=UTF-8");  
AJAX JSON的数据传输
忆亦何为的博客
10-14 3395
我们发现在后端的json字符串拼接实在是太痛苦了，因为json只能使用双引号“”，而双引号在字符串里需要进行转义，所以拼接字符串的代码看起来就很另类。AJAX请求从后端响应回来的是一串字符串，javascript怎么把拼接JSON格式的字符串转换成JSON对象。这时候可以在后端拼接JSON格式的字符串，或者XML格式的字符串，将这个字符串发送给前端，前端解析即可。var json对象名字 = {“属性名1” ：属性值1，“属性名2”：属性值2 …它是一串JSON格式的字符串，需要把它转换成JSON对象。
Ajax与json
weixin_66939060的博客
04-29 1878
目录 1.Ajax 2.json 3.Ajax+json 一、神奇的Ajax 1.要用Ajax先来了解为什么使用Ajax? 1.1:无刷新：不刷新整个页面，只刷新局部 （无刷新的好处：只更新部分页面，有效利用带框，提高用户体验） 2.那Ajax是什么？ Ajax:一种只刷新局部页面的技术 Ajax中有几个方法：今天我们最要就说两个：1.$.ajax() 2.$.post() $.ajax():通过HTTP请求加载远程数据 $.post()：通过远程HTTP POS...
AJAX和JSON详解
热门推荐
write less , do more
05-08 1万+
AJAX和JSON详解
Ajax JSON 中文乱码
ck784101777的博客
11-20 2654
Ajax JSON 中文乱码 List转JSON，JSON转String 我在使用级联下拉框的时候用到Ajax技术向后台请求子框的信息。但是出现了中文乱码的问题，我尝试了3种方法，发现了一条做最好的解决方法。 思路： 1.在前台获取父框的ID，通过ajax提交到后台 2.后台根据父框ID获取子框List集合 3.将List集合转换成JSON格式 4.将JSON格式转换为字符串（Stri...
ajax json太大,解决.NETMVC(ajax)Json请求太大,无法反序列化(The JSON request was too large to be deserialized)问题...
weixin_34907135的博客
08-05 1147
遇到这个问题时候感觉挺奇怪，感觉数据并没有几十上百MB的级别，怎么就报Json请求太大了。但是无论如何，遇到了就尝试解决。查到的最多的解决方案是：1、修改Web.config文件配置节system.web下httpRuntime maxRequestLength12意料中的无效，因为我站点原本配置中的最大请求长度就是2147483647。这个配置的单位可是千字节(KB)(参见)，也就是可以接受的最...
AjaxJson实体类与依赖包
10-09
AjaxJson result = JSON.parseObject(jsonString, AjaxJson.class); ``` 综上所述，`AjaxJson`实体类与`fastjson`库的结合使用，可以极大地提高后端处理Ajax请求和响应的效率，同时简化了前后端之间的数据交互。在...
$.ajax json数据传递方法.docx
01-12
$.ajax json 数据传递方法 $.ajax json 数据传递方法是使用 jQuery 库实现的异步数据传递方法，通过将 JSON 数据封装在 $.ajax 对象中，并将其作为参数传递给服务器端脚本，以实现客户端和服务器端之间的数据交互。...
json.rar_Highstock json_JSON_ajax json_json Ajax Java
09-24
在"json.rar_Highstock json_JSON_ajax json_json Ajax Java"这个主题中，我们主要探讨的是JSON与Highstock、AJAX以及Java的结合应用。Highstock是Highcharts的一个扩展，专门用于绘制时间序列数据的股票或一般金融...
ajt:最小的ajax json模板库
07-14
AJT（Ajax JSON 模板） 执行 Ajax 请求、获取 JSON 并将其放入模板中有多简单？ 简单轻便： 3 KB ！ ajt ( 'http://yourapi.com/getjson' , 'theTemplate' , function ( html ) { document . getElementById ( '...
ajax json
08-05
标题 "ajax json" 提到的是一个与Web开发相关的主题，主要涉及AJAX（Asynchronous JavaScript and XML）技术和JSON（JavaScript Object Notation）数据格式。在Web应用中，AJAX允许前端页面无需刷新即可向服务器发送...
day19JS-AJAX数据通信
kwj258036的博客
09-11 902
简单介绍了AJAX的使用和使用案列
考研复习-英语二真题考试题集-带答案
09-14
英语二考研真题复习资料，带答案版
2024中美独角兽公司发展分析报告.pdf
最新发布
09-14
全球各大洲独角兽企业分布、中美独角兽企业对比（数量、估值、新增及退榜情况、行业分布、所在城市）、
C++ 中的异步编程模型是什么
09-14
在C++中，异步编程模型是处理并发任务、提高程序性能和响应性的关键技术。以下是C++中实现异步编程的几种主要方式： 每种异步编程模型都有其适用场景和优缺点。选择合适的模型可以提高代码的可读性、可维护性和性能。随着C++标准的不断发展，异步编程模型也在不断进化，为开发者提供了更多的工具和选择。 在实际开发中，应根据具体需求选择合适的异步编程模型。例如，对于简单的异步任务，回调函数可能是最直接的选择；而对于需要结构化错误处理和结果获取的复杂异步任务，std::async和std::future可能更合适；在需要高效资源管理的场景下，线程池是一个不错的选择；而对于需要编写大量异步代码的现代应用程序，协程提供了一种更简洁、更直观的解决方案。 总之，C++中的异步编程模型是多核和高并发环境下提高程序性能的重要工具。通过合理使用这些模型，开发者可以构建出更高效、更可靠的软件系统。
jquery ajax json
03-29
使用jQuery的AJAX方法可以轻松地发送AJAX请求，并处理服务器返回的JSON数据。以下是使用jQuery进行AJAX请求和处理JSON数据的基本步骤： 1. 使用$.ajax()方法发送AJAX请求，指定请求的URL、请求类型（GET、POST等）...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值