JavaWeb之AJAX&JSON

最新推荐文章于 2022-05-21 10:40:43 发布
最新推荐文章于 2022-05-21 10:40:43 发布
阅读量184 收藏
点赞数
分类专栏： JavaWeb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35654080/article/details/103139861
版权

AJAX概念

AJAX实现方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        
        //定义方法
        function  fun() {
            //使用$.ajax()发送异步请求

            $.ajax({
                url:"ajaxServlet1111" , // 请求路径
                type:"POST" , //请求方式
                //data: "username=jack&age=23",//请求参数
                data:{"username":"jack","age":23},
                success:function (data) {
                    alert(data);
                },//响应成功后的回调函数
                error:function () {
                    alert("出错啦...")
                },//表示如果请求响应出现错误，会执行的回调函数

                dataType:"text"//设置接受到的响应数据的格式
            });
        }
        
    </script>
    
    
</head>
<body>

    <input type="button" value="发送异步请求" onclick="fun();">

    <input>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        
        //定义方法
        function  fun() {

            $.get("ajaxServlet",{username:"rose"},function (data) {
                alert(data);
            },"text");

        }
        
    </script>
    
    
</head>
<body>

    <input type="button" value="发送异步请求" onclick="fun();">

    <input>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        
        //定义方法
        function  fun() {

            $.post("ajaxServlet",{username:"rose"},function (data) {
                alert(data);
            },"text");

        }
        
    </script>
    
    
</head>
<body>

    <input type="button" value="发送异步请求" onclick="fun();">

    <input>
</body>
</html>

JSON

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //1.定义基本格式
        var person = {"name": "张三", age: 23, 'gender': true};

        //获取name的值
        //var name = person.name;
        var name = person["name"];
       // alert(name);

        //alert(person);
        //2.嵌套格式   {}———> []
        var persons = {
            "persons": [
                {"name": "张三", "age": 23, "gender": true},
                {"name": "李四", "age": 24, "gender": true},
                {"name": "王五", "age": 25, "gender": false}
                ]
        };
       // alert(persons);
        //获取王五值
        var name1 = persons.persons[2].name;
       // alert(name1);


        //2.嵌套格式   []———> {}
        var ps = [{"name": "张三", "age": 23, "gender": true},
            {"name": "李四", "age": 24, "gender": true},
            {"name": "王五", "age": 25, "gender": false}];
        //获取李四值
        //alert(ps);
        alert(ps[1].name);


    </script>

</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //1.定义基本格式
        var person = {"name": "张三", age: 23, 'gender': true};

        var ps = [{"name": "张三", "age": 23, "gender": true},
            {"name": "李四", "age": 24, "gender": true},
            {"name": "王五", "age": 25, "gender": false}];




        //获取person对象中所有的键和值
        //for in 循环
       /* for(var key in person){
            //这样的方式获取不行。因为相当于  person."name"
            //alert(key + ":" + person.key);
            alert(key+":"+person[key]);
        }*/

       //获取ps中的所有值
        for (var i = 0; i < ps.length; i++) {
            var p = ps[i];
            for(var key in p){
                alert(key+":"+p[key]);
            }
        }

    </script>

</head>
<body>

</body>
</html>

JSON和java转换 

JacksonTest.java

package cn.itcast.web.test;


import cn.itcast.web.domain.Person;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.Test;

import java.io.FileWriter;
import java.util.*;

public class JacksonTest {


    //Java对象转为JSON字符串
    @Test
    public void test1() throws Exception {
        //1.创建Person对象
        Person p  = new Person();
        p.setName("张三");
        p.setAge(23);
        p.setGender("男");

        //2.创建Jackson的核心对象  ObjectMapper
        ObjectMapper mapper = new ObjectMapper();
        //3.转换
        /*

            转换方法：
                writeValue(参数1，obj):
                    参数1：
                        File：将obj对象转换为JSON字符串，并保存到指定的文件中
                        Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
                        OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
                writeValueAsString(obj):将对象转为json字符串

         */
        String json = mapper.writeValueAsString(p);
        //{"name":"张三","age":23,"gender":"男"}
        //System.out.println(json);//{"name":"张三","age":23,"gender":"男"}



        //writeValue，将数据写到d://a.txt文件中
        //mapper.writeValue(new File("d://a.txt"),p);

        //writeValue.将数据关联到Writer中
        mapper.writeValue(new FileWriter("d://b.txt"),p);
    }


    @Test
    public void test2() throws Exception {
        //1.创建Person对象
        Person p = new Person();
        p.setName("张三");
        p.setAge(23);
        p.setGender("男");
        p.setBirthday(new Date());



        //2.转换
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(p);

        System.out.println(json);//{"name":"张三","age":23,"gender":"男","birthday":1530958029263}
                                //{"name":"张三","age":23,"gender":"男","birthday":"2018-07-07"}
    }



    @Test
    public void test3() throws Exception {
        //1.创建Person对象
        Person p = new Person();
        p.setName("张三");
        p.setAge(23);
        p.setGender("男");
        p.setBirthday(new Date());

        Person p1 = new Person();
        p1.setName("张三");
        p1.setAge(23);
        p1.setGender("男");
        p1.setBirthday(new Date());

        Person p2 = new Person();
        p2.setName("张三");
        p2.setAge(23);
        p2.setGender("男");
        p2.setBirthday(new Date());


        //创建List集合
        List<Person> ps = new ArrayList<Person>();
        ps.add(p);
        ps.add(p1);
        ps.add(p2);


        //2.转换
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(ps);
        // [{},{},{}]
        //[{"name":"张三","age":23,"gender":"男","birthday":"2018-07-07"},{"name":"张三","age":23,"gender":"男","birthday":"2018-07-07"},{"name":"张三","age":23,"gender":"男","birthday":"2018-07-07"}]
        System.out.println(json);
    }

    @Test
    public void test4() throws Exception {
        //1.创建map对象
        Map<String,Object> map = new HashMap<String,Object>();
        map.put("name","张三");
        map.put("age",23);
        map.put("gender","男");


        //2.转换
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(map);
        //{"name":"张三","age":23,"gender":"男"}
        System.out.println(json);//{"gender":"男","name":"张三","age":23}
    }

    //演示 JSON字符串转为Java对象
    @Test
    public void test5() throws Exception {
       //1.初始化JSON字符串
        String json = "{\"gender\":\"男\",\"name\":\"张三\",\"age\":23}";

        //2.创建ObjectMapper对象
        ObjectMapper mapper = new ObjectMapper();
        //3.转换为Java对象 Person对象
        Person person = mapper.readValue(json, Person.class);

        System.out.println(person);
    }

}

Person .java 

package cn.itcast.web.domain;

import com.fasterxml.jackson.annotation.JsonFormat;

import java.util.Date;

public class Person {

    private String name;
    private int age ;
    private String gender;

    //@JsonIgnore // 忽略该属性
    @JsonFormat(pattern = "yyyy-MM-dd")
    private Date birthday;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

    public Date getBirthday() {
        return birthday;
    }

    public void setBirthday(Date birthday) {
        this.birthday = birthday;
    }

    @Override
    public String toString() {
        return "Person{" +
                "name='" + name + '\'' +
                ", age=" + age +
                ", gender='" + gender + '\'' +
                ", birthday=" + birthday +
                '}';
    }
}

 

 

凌晨两点半还不回家
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javaweb之ajax
m0_62528678的博客
04-26 2084
目录 一、为什么使用ajax 二、什么是ajax 三、案例 1、为什么使用ajax 无刷新：不刷新整个页面，只刷新局部 无刷新的好处 只更新部分页面，有效利用带宽，提高用户体验 2.什么是ajax 只刷新局部页面的技术 JavaScript：更新局部的网页 XML：一般用于请求数据和响应数据的封装 XMLHttpRequest对象：发送请求到服务器并获得返回结果 CSS：美化页面样式 异步：发送请求后不等返回结果，由回调函数处理结果 jQuery.ajax(url,[setting
JavaWeb：AJAX
JackChan
10-29 3349
AJAX概述1、什么是AJAXAJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程
Javaweb项目ajax请求Json实例
03-31
JavaWeb将数据包装成JSON以及JSP通过ajax对JSON的获取与解析（代码实例） 运行环境：MyEclipse
快速掌握Ajax-Ajax基础实例（Ajax返回Json在Java中的实现）
weixin_30521649的博客
02-09 114
实例二：Ajax返回Json在Java中的实现 　　在上一个随笔中，介绍AJAX的一个简单实例，在这篇中主要是说一下使用Json来将后台取得的数据显示到前台页面。可以说这种方法应该是实现无刷新分页的基础，而且在开发过程中经常被用到。这里的后台部分由JAVA来实现。 　　这个例子也在上一篇中那个项目中实现。新建一个SecondTest.html页面，定义一个按钮，并给这个按钮绑定事件ajaxJs...
JavaWeb - AJAX&JSON
上山打卤面的博客
09-28 489
AJAX： 概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML 异步和同步：客户端和服务器端相互通信的基础上 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。 Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的...
JAVAWEB AJAX与JSON
qq_36755212的博客
09-20 376
AJAX与JSON $.ajax({ //传递请求类型 type: "POST", //传递地址 url: "some.php", //数据 data: "name=John&location=Boston", //成功返回函数 服务器out.write("a");此处被传到msg处 success: function(ms...
JavaWeb通过ajax、json实现省市二级联动
04-09
总的来说，JavaWeb通过AJAX和JSON实现省市二级联动，涉及了前端的JavaScript技术、后端的JavaServlet处理和数据库操作。这一过程体现了前后端分离的思想，提高了页面的交互性和响应速度。理解并掌握这些技术，对于...
web开发 java基础（十)(Ajax&json&redis)
cangqiong_xiamen的博客
03-08 15
1. AJAX 概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML 异步和同步：客户端和服务器端相互通信的基础上 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。 * 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。 Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 [1] 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这
Redis、AJAX &JSON
xiaoyaGrace的博客
03-02 215
Redis1. 概念： redis是一款高性能的NOSQL系列的非关系型数据库 1.1.什么是NOSQL NoSQL(NoSQL = Not Only SQL)，意即“不仅仅是SQL”，是一项全新的数据库理念，泛指非关系型的数据库。 随着互联网web2.0网站的兴起，...
IDEA版JavaWeb从入门到精通之JSON和Ajax请求&i18n国际化第16天
06-19
课程涵盖：Servlet程序、Filter过滤器、Listener监听器、JSP页面、EL表达式、JSTL标签库、jQuery框架、Cookie技术、Session会话、JSON使用、Ajax请求等全部Web开发核心技术点，并在讲解知识点过程中带领大家完成一个...
JavaWeb中Ajax的使用
11-22
ajax的使用
Java+Ajax+JSON
07-27
NULL 博文链接：https://customme.iteye.com/blog/741652
javaWeb之ajax
qq_26387051的博客
05-18 1368
Ajax:一种异步数据请求的技术，在本页面不刷新的情况，本页面数据可以和服务器端进行通信 核心对象: xmlHttp 浏览器对象。因为是基于浏览器，使用ajax技术时，不须任何插件， 原理: 1 当本页面浏览器加载完成时，并操作完成时，当面页面没有刷新的情况下，页面数据还在进行， 2 cpu 内存都在运行, cpu 内存分配一部分资源出来，通过浏览器对象，把本页面数据传出，再通过浏览器对象，把须要数据传入。 ajax开发过程: 1 创建一个xmlHttp 2 通过open的方式创建一个请求，一种路径，将要用
JavaWeb Ajax详解
恒哥的博客
02-22 608
项目开发视频： SpringCloud微服务开发入门 手把手开发基于SpringBoot的员工管理系统 亿度云盘~Java小白入门实战 超详细的Java知识点汇总 AJAX介绍 AJAX（Asynchronous Javascript And XML)异步Javascript和XML，是一种通过JS和后台服务器进行交互的技术。 和传统的表单和服务器交互的方式相比，区别是： 1、传统的方式会刷新整个页面 2、AJAX刷新局部页面，提升用户体验 AJAX的实现 核心类：XMLHttpRequest（目前主流
JavaWeb—Ajax
weixin_48112109的博客
05-21 183
例如: 百度搜索框----使用了ajax. 当在百度搜索框触发键盘弹起事件时，会向服务器发送请求，服务器响应数据给事件。这里并没有响应整个页面给客户端。这就使用了ajax异步【局部】刷新 比如: 视频点赞。 总结: （1） ajax一定是通过事件触发的。借助js。 ​ （2）ajax服务器响应的不在是网页，而是数据。 2、Ajax简单使用 https://jquery.cuishifeng.cn/ 借助: jq...
ajax基础
weixin_34384557的博客
06-24 225
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。 AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，...
Java Web 学习 - JSON
qq_46258819的博客
09-17 237
JSON 简介 JSON是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。JSON 采用完全独立于语言的文本格式，而且很多语言都提供了对 json 的支持（包括 C, C++, C#, Java, JavaScript, Perl, Python 等）。 这样就使得 JSON 成为理想的数据交换格式。 json 是一种轻量级的数据交换格式。 轻量级指的是跟 xml 做比较。 数据交换指的是客户端和服务器之间业务数据的传递格式。 JSON在JS中的应用 var jsonObj = { "
JAVAweb开发中Ajax教程
Fixiaobai的博客
11-12 1305
关于JAVAweb开发中Ajax教程 大家好，我是小白！已经很久没向大家分享我的学习内容，这次呢我讲给大家带来Ajax的教程。希望能给大家带来帮助，同时也巩固一下自己的学习！ 一、Ajax是什么？ AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。 二、为什么要使用它 通过异步模式，提升了用户体
java web学习之ajax
Eric
07-20 536
AJAX的概述 什么是AJAX AJAX的英文全称是Asynchronous JavaScript And XML，即异步的JavaScript And XML。虽然其使用的是老的技术，但用的是新的思想。接下来，就应该了解一下同步和异步的区别。  我们先来看同步，一图以蔽之。  当用户点击链接或者提交按钮，页面才会跳转，这时整个页面都会刷新。  接着我们再来看异步：  当用户点击链接或者提...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值