ajax中获取不到id_Json解析与Ajax

最新推荐文章于 2023-04-15 09:34:36 发布

今天也是一只猪

最新推荐文章于 2023-04-15 09:34:36 发布

阅读量299

点赞数

文章标签： ajax中获取不到id

本文链接：https://blog.csdn.net/weixin_31622725/article/details/113042060

版权

Json解析与Ajax

@author:杜勇帅

@email:820482874@qq.com

2.JSON解析

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）

2.1 Jsonlib解析json

为了测试方便，通常把测试代码写到junit的测试方法中，junit是单元测试框架，它把每个测试方法视为一个功能单元，我们只需要把测试代码写到测试方法中，就可以一个个测试了。要求：

1）必须在项目中导入junit的jar包

2) 每个测试方法的签名必须是

@Test

public  void  方法名(){   

 }

运行junit测试方法：先双击选中方法名，再右键Run as-->Junit Test

2.2 fastJson解析json(重点)

// 解析对象:是把json文本转换为一个javaBean对象
    @Test
    public void test1() {
        // json文本
        String jsonStr = "{"address":"北京市","id":1001,"name":"Tom"}";

        Person person = JSON.parseObject(jsonStr, Person.class);
        System.out.println(person);
    }
    // 解析数组：把json文本转换为一个java数组或集合
    @Test
    public void test2() {
        String jsonStr = "[{"id":1001,"name":"Tom","address":"北京市"},{"id":1002,"name":"Mary","address":"上海市"}]";

        List<Person> list = JSON.parseArray(jsonStr, Person.class);
        for (Person person : list) {
            System.out.println(person);
        }
    }

    // 生成json:把java对象或集合转换为json文本
    @Test
    public void test3() {
        Person p1 = new Person(1, "孙悟空", "花果山");
        Person p2 = new Person(2, "猪八戒", "高老庄");
        List<Person> list = new ArrayList<>();
        list.add(p1);
        list.add(p2);
        // 把java对象转换为json文本
        String objStr = JSON.toJSONString(p1);
        // 把集合转换为json文本
        String listStr = JSON.toJSONString(list);
        System.out.println("对象转换为json文本的结果：" + objStr);
        System.out.println("集合转换为json文本的结果：" + listStr);
    }

2.3 Gson解析json(重点)

// 解析对象:是把json文本转换为一个javaBean对象
    @Test
    public void test1() {
        // json文本
        String jsonStr = "{"address":"北京市","id":1001,"name":"Tom"}";
        // 创建一个Gson对象
        Gson gson = new Gson();
        // 调用fromJson方法，获取一个javaBean对象
        Person person = gson.fromJson(jsonStr, Person.class);
        System.out.println(person);
    }

    // 解析数组：把json文本转换为一个java数组或集合
    @Test
    public void test2() {
        String jsonStr = "[{"id":1001,"name":"Tom","address":"北京市"},{"id":1002,"name":"Mary","address":"上海市"}]";
        // 创建一个Gson对象
        Gson gson = new Gson();
        // TypeToken是Gson提供的数据类型转换器，可支持各种集合类型数据的转换
        List<Person> list = gson.fromJson(jsonStr, new TypeToken<List<Person>>() {
        }.getType());
        for (Person person : list) {
            System.out.println(person);
        }
    }

    // 生成json:把java对象或集合转换为json文本
    @Test
    public void test3() {
        Person p1 = new Person(1, "孙悟空", "花果山");
        Person p2 = new Person(2, "猪八戒", "高老庄");
        List<Person> list = new ArrayList<>();
        list.add(p1);
        list.add(p2);
        // 创建一个Gson对象
        Gson gson = new Gson();
        // 把对象转换为json文本
        String objStr = gson.toJson(p1);
        // 把集合转换为json文本
        String listStr = gson.toJson(list);
        System.out.println("对象转换为json文本的结果：" + objStr);
        System.out.println("集合转换为json文本的结果：" + listStr);
    }

3.Ajax(超级重点)

同步交互：相当于事情一件件有序的去做，例如做饭要经历1.炒菜(30分钟) 2.煮饭(15分钟),到最终吃到饭花费45分钟

异步交互：相当于事情可以同时进行，例如做法过程，可以在煮饭的同时去炒菜，一共需要30分钟

AJax就是局部刷新技术，在和服务器之间交互时，不用刷新整个页面，只是更新页面的一部分。

一个Ajax应用程序包含以下几种技术：

1).服务器端技术,比如Servlet需要在服务器端处理请求，发送响应给浏览器

2).javascript: 通过js事件来发送异步请求，即在事件的响应函数中发送ajax异步请求，将服务器端返回的响应数据绑定到DOM元素中进行显示

3).DOM:需要使用DOM技术动态更新页面的一部分，比如输入关键字后，动态生成一个div,里面是包含关键字的所有词条。

4).Xhtml: html5+css,需要使用css来控制显示的样式

5).XMLHTTPRequest： ajax交互的核心对象，它由浏览器的ajax引擎自动创建，无需开发人员创建

3.1 Ajax应用程序的开发步骤

第1步：开发客户端程序

在项目中创建jsp页面中，通过元素的js事件来发送异步请求

<input type="button" onclick="sendRequest()" value="发送ajax异步请求">
    <br>
    <!-- 引入jquery文件 -->
    <script src="js/jquery.min.js"></script>
    <script>
        //在函数中发送ajax异步请求
        function sendRequest() {
            $.ajax({
                url : "user.action", //请求的服务器端资源的路径
                type : "POST", //请求方式,GET后POST
                //data:向服务器发送的参数，可写成json格式{key:value}，也可写成"key=value&key2=valu2...",可选的
                data : {
                    "uname" : "张三",
                    "age" : 26
                },
                timeout : 5000, //超时时间
                //返回的数据格式：json/xml/html/script/jsonp/text
                dataType : "text",
                //服务器处理成功时调用的函数,data是服务器响应回来的数据
                success : function(data) {
                    console.log(data);
                },
                //服务器处理失败时调用的函数,参数：xhr就是XMLHttpRequest对象,textStatus:状态文本
                error : function(xhr, textStatus) {
                    console.log('错误');
                    console.log(xhr);
                    console.log(textStatus);
                },
                //服务器处理完成时调用的函数，不管成功或失败都会调用
                complete : function(xhr, text) {
                    console.log("处理完成");
                    console.log(xhr);
                    console.log(text);
                }
            });
        }
    </script>

第2步：开发服务器端程序，即Servlet

protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String uname = request.getParameter("uname");
        String age = request.getParameter("age");

        PrintWriter out = response.getWriter();
        //给客户端响应回去内容，要响应的数据通过print()或write()回写给客户端
        out.print("用户名："+uname+",年龄："+age);
        //out.print(10/0);
        out.flush();
        out.close();
    }

总结：1）.在服务器端处理请求时，千万不能写跳转页面的代码

2)调用$.ajax()方法前一定要把jquery库文件拷贝到项目中，还要在页面上引入jquery文件

3.2 服务器端返回json文本的处理

在使用$.ajax方法时，如果服务器端返回json文本，客户端有2种处理：

1)客户端的dataType是json，此时$.ajax方法有能力将json文本转换为对象(json对象)，得到的是json对象，就用对象.属性的语法获取属性值

dataType : "json",
                //服务器处理成功时调用的函数,data是服务器响应回来的数据
                success : function(data) {
                    console.log(typeof data); //object
                    //console.log(data);
                    //将json对象的数据显示到div中
                    $("#info").html("编号："+data.id+",姓名："+data.name+",年龄："+data.age);
                }

2)客户端的dataType是text,此时$.ajax方法不会把json文本转换为json对象，即得到的就是json字符串

如果在$.ajax方法中省略了dataType,则默认按照第2种方式处理，dataType的默认值是text.

3.3 Ajax应用-调用免费天气预报的接口

API地址（GET方式）

https://www.tianqiapi.com/api/

GET参数

返回数据说明

调用案例：

$.ajax({
                url : "https://www.tianqiapi.com/api/?city="+encodeURI($("#city").val()), //请求的服务器端资源的路径(天气预报的数据接口)
                type : "GET", //请求方式,GET后POST
                //data:向服务器发送的参数，可写成json格式{key:value}，也可写成"key= 
                // value&key2=valu2...",可选的
                timeout : 5000, //超时时间
                //返回的数据格式：json/xml/html/script/jsonp/text
                dataType : "json",
                //服务器处理成功时调用的函数,data是服务器响应回来的数据
                success : function(data) {
                    console.log(typeof data); //object
                    console.log(data);  
                    //在div中加载天气预报结果
                    $("#info").html("城市："+data.city);
                    var table="<table width='50%' border='1' cellspacing='0' cellpadding='10'>"
                    +"<tr><td>日期</td><td>天气状况</td><td>当前温度</td><td>空气质量等级</td></tr>";
                     for(var i=0;i<7;i++){
                         table=table+"<tr><td>"+data.data[i].day+"</td><td>"+data.data[i].wea+"</td>"
                          +"<td>"+data.data[i].tem+"</td><td>"+data.data[i].air_level+"</td></tr>"; 
                     }
                     table+="</table>";
                     //把表格的html字符串封装成jQuery的元素
                    var  $table=$(table);
                    //添加jquery的元素到div中
                    $("#info").append($table);

                },
                //服务器处理失败时调用的函数,参数：xhr就是XMLHttpRequest对象,textStatus:状态文本
                error : function(xhr, textStatus) {
                    console.log('错误');
                    //console.log(xhr);
                    console.log(textStatus);
                },
                //服务器处理完成时调用的函数，不管成功或失败都会调用
                complete : function(xhr, textStatus) {
                    console.log("处理完成");
                }

            });

3.4 $.post()

$.post()是$.ajax()的高级版，$.ajax()是Ajax异步请求的底层方法

$.post()方法只需要配置简单的参数即可完成异步请求,

语法：

$.post(URL,data,callback);

必需的 URL 参数指定请求的资源路径

可选的 data 参数规定向服务器发送的参数数据。

可选的 callback 参数是请求成功后所执行的函数。

使用$.post()方法时，只需要传入参数的值就可以了，不需要写成key:value格式

//用$.post()方法发送异步请求
            $.post("user.action", {
                "uname" : "张三",
                "age" : 26
            }, function(data) {
                console.log(data);
            });

比较$.post()和$.ajax()的区别：

$.ajax()的参数(属性)很多，还能提供服务器处理失败的函数，能做错误处理；

而$.post()只有一个请求成功后调用的函数，相当于$.ajax()中的success函数;

如果我们还需要做请求失败或完成的处理，就使用$.ajax()方法;如果我们只需要从服务器上获取简单的文本数据并且无需做错误或完成的处理，就使用$.post()就行。

3.5 $.get()

这个方法和$.post()的语法完全一样，只是它发送的是GET请求

作业：

1.完成调用免费天气预报的接口，在页面上展示7天的天气

2.把检验用户名是否重复的案例写一遍

今天也是一只猪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax中获取不到id_Json解析与Ajax

Json解析与Ajax@author:杜勇帅@email:[email protected]解析JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）2.1 Jsonlib解析json为了测试方便，通常把测试代码写到junit的测试方法中，junit是单元测试框架，它把每个测试方法视为一个功能单元，我们只需要把测试代码写到测试方法中，就...
复制链接

扫一扫