json&ajax

最新推荐文章于 2024-08-12 10:01:44 发布

Peng_zhj

最新推荐文章于 2024-08-12 10:01:44 发布

阅读量520

点赞数

文章标签： json ajax javascript

本文链接：https://blog.csdn.net/Peng_zhj/article/details/122589989

版权

JSON概述

JavaScript对象表示形式（JavaScript Object Notation）

* java对象表示形式
			User user = new User();
			
			user.setUsername("后羿");
			user.setAge(23);

			String s=user.getUserName();
			Integer i=user.getAge();
			
			
* javaScript对象表示形式
		   let user={"username":"后羿"，“age”:23}
              
           let s=user.username;
           let i=user.age

JSON表示对象的三种格式

 json数据：js用来表示对象数据的
 三种写法：             	
* 对象形式
		{name:value,name:value}
		
* 数组形式
		[
            {name:value,name:value},
            {name:value,name:value},
            {name:value,name:value}
		]
		
* 复杂（混合）形式
		{
            name:value,
            array:[{name:value},{},{}]
            user:{name:value}
		}

实现：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01-JSON基础语法</title>

</head>
<body>

</body>
<script>
    /*js的对象表现格式：json格式*/
    // 1.描述用户对象（张三丰、男、32岁）  对象格式
    let user={"username":"张三丰","sex":"男","age":103};
    console.log(user);
    user.age=110;  //设置
    console.log(user);
    console.log(user.username); //获取
    console.log(user.sex);//获取

    // 2.描述用户数组（张三丰、张翠山、张无忌） 数组格式
    let userList=[
        {"username":"张三丰","sex":"男","age":103},
        {"username":"张翠山","sex":"男","age":32},
        {"username":"张无忌","sex":"男","age":12}
    ]
    //获取
    for (let user of userList) {
        console.log(user);
        console.log(user.username);
        console.log(user.sex);
        console.log(user.age);
    }

    console.log("---------------------------------");
    // 3.描述韦小宝（27岁，老婆、师傅） 复杂格式
    let weixiaobao={
        "age":18,
        "list":[{"name":"双二","address":"扬州"},{"name":"皇后","address":"岛国"}],
        "shifu":{"name":"陈浩南","address":"铜锣湾"}
    }

    console.log(weixiaobao.age);
    let laopoArr=weixiaobao.list;
    for (let laopo of laopoArr) {
        console.log(laopo.name);
        console.log(laopo.address);
    }
    console.log(weixiaobao.shifu.name);
    console.log(weixiaobao.shifu.address);

</script>
</html>

在这里插入图片描述

AJAX（掌握）

AJAX概述

ajax是js提供的一门高级技术，用于在浏览器端和后台服务器做数据交互的

一后期浏览器和后台服务器数据交互的方式

超链接  
	格式：a href=后台地址?username=jack&password=123&...
表单提交 
	格式：<form action="后台地址?"><input type="text" name="usrname">....</form>
js的BOM对象
	格式：location.href=后台地址?username=jack&password=123&....

js的ajax	
	  key=value
	  json

二交互方式的区别？

超链接表单提交 js的location对象在提交的过程中都会去提交数据加载整个页面

同步提交：提交数据的过程中，用户只能等待服务器的结果 做不了任何的事情

ajax 在提交的过程中不会去加载整个页面可以做到页面无刷新的提交局部数据

异步提交：提交数据的过程中，用户可以一边等待服务器的结果 一边做别的事情 给用户的体验更加的好

三如何使用ajax做异步交互？

axios中的ajax

2) axios中的ajax（掌握）

底层就是原生的ajax代码 , 只不过在原生代码上进行了封装, 简化代码

api网站:https://www.kancloud.cn/yunye/axios/234845

其实在我们自己编写代码的时候使用axios并没有那么麻烦。开发中已经有很多成型的技术帮助我们实现了。
而axios就是其中一种。
语法：
axios.request(config)
axios.get(url[, config])--掌握
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]]) --弊端（框架）
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

代码测试:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>使用axios(vue)的ajax完成异步和服务器交互</title>
    <!--
           1 引入axios的库（js文件）axios-0.20.0.js
           2 使用axios封装ajax的api: axios.get(url).then(function(){接受响应内容展示})
    -->

</head>
<body>
      <input type="button" value="点我" οnclick="ajaxdemo()"> <span id="s1"></span>

      <script src="/js/axios-0.20.0.js"></script> <!--引入axios的库-->
      
      <!--简写方式  参数少：key=value传递   -->
      <script>
          function ajaxdemo(){
              // 发送异步提交
              axios.get("/sd1?username=jack&password=123").then(aaa=>{
                  alert(aaa.data);
              })
          }
      </script>


      <!--简写方式（后期的使用方式）  参数多：json格式传递   -->
      <script>
          function ajaxdemo(){
              // 发送异步提交
              axios.get("/sd1",{
                  "params":{"username":"jack",
                            "password":123456,
                            "sex":"男"}
              }).then(aaa=>{
                  alert(aaa.data);
              })
          }
      </script>


</body>
</html>

3）ajax接受服务器响应的复杂数据

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

        <input type="button" value="ajax提交" id="bt">

        <script src="/js/axios-0.20.0.js"></script>
        <script>

            document.getElementById("bt").onclick=function(){
                axios.get("/sd2",{"params":{"username":"jack"}}).then(aaa=>{
                    let list=aaa.data;
                    for(let user of list){
                        alert(user.username+":"+user.password);
                    }
                })
            }      
        </script>
</body>
</html>

public class ServletDemo2 extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println(request.getParameter("username"));

        //响应的数据如果是简单数据(String,int,dobule) 可以直接给ajax
                    //response.getWriter().print("哈哈");
        //响应的数据如果是复杂数据（对象 集合）  复杂数据--json--ajax 才可以

        List<User> list = new ArrayList<>();
        list.add(new User("jack1","111"));
        list.add(new User("jack2","222"));
        list.add(new User("jack3","333"));
        list.add(new User("jack4","444"));

        //java的List对象===json的数组格式===ajax才可以
                //jackson工具
        ObjectMapper objectMapper = new ObjectMapper();
        String json = objectMapper.writeValueAsString(list);
        System.out.println(json);  //[{}，{}，{}]
        response.getWriter().print(json);

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}

Peng_zhj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
json&ajax

JSON概述JavaScript对象表示形式（JavaScript Object Notation）* java对象表示形式 User user = new User(); user.setUsername("后羿"); user.setAge(23); String s=user.getUserName(); Integer i=user.getAge(); * javaScript对象表示形式 let user={"username"
复制链接

扫一扫