0
点赞
收藏
分享

微信扫一扫

Json和Ajax的学习

琛彤麻麻 2022-02-21 阅读 90
jsonajax学习

JSON
编写了一个html页面，将js中的对象转换为json格式，方法：var str=JSON.stringify(user);

又将json格式转换为js中的对象，方法：
var obj=JSON.parse(str);


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    //编写一个对象
    var user={
        name:"李白",
        age:3,
        sex:"男"

    };
    //输出一下user
    console.log(user);

    //将js的对象转换为json字符串
   var str=JSON.stringify(user);
   console.log(str);//{"name":"李白","age":3,"sex":"男"}

    将json转换为js对象
    var obj=JSON.parse(str);
    console.log(obj);//Object { name: "李白", age: 3, sex: "男" }
</script>
</body>
</html>

在java中使用json

结构：
在这里插入图片描述编写User对象

public class User {
    private String name;
    private int age;
    private String sex;

    public User() {
    }

    public User(String name, int age, String sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
    }

    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 getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    @Override
    public String toString() {
        return "User{" +
                "name='" + name + '\'' +
                ", age=" + age +
                ", sex='" + sex + '\'' +
                '}';
    }

springMVC.xml配置文件：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/mvc
       http://www.springframework.org/schema/mvc/spring-mvc.xsd
       http://www.springframework.org/schema/context
       http://www.springframework.org/schema/context/spring-context.xsd">
    <!--扫描组件-->

    <context:component-scan base-package="com.sophy.controller"/>
    <mvc:default-servlet-handler/>
    <mvc:annotation-driven>
        <!--解决json字符串中文乱码问题-->
        <mvc:message-converters register-defaults="true">
            <bean class="org.springframework.http.converter.StringHttpMessageConverter">
                <constructor-arg value="UTF-8"/>
            </bean>
            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
                <property name="objectMapper">
                    <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
                        <property name="failOnEmptyBeans" value="false"></property>
                    </bean>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>

    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" id="internalResourceViewResolver">

        <property name="prefix" value="/WEB-INF/jsp/"/>
        <property name="suffix" value=".jsp"/>
    </bean>
</beans>

web.xml配置文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                      http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1"
         metadata-complete="true">
<servlet>
    <servlet-name>springmvc</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
        <!--配置springMVC.xml的路径-->
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:springMVC.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
</servlet>
   <servlet-mapping>
       <servlet-name>springmvc</servlet-name>
       <url-pattern>/</url-pattern>
   </servlet-mapping>


    <!--配置过滤器-->

    <filter>
        <filter-name>myFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>utf-8</param-value>
        </init-param>
    </filter>

    <filter-mapping>
        <filter-name>myFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

</web-app>

UserController类：

@Controller
public class UserController {
    @RequestMapping(value = "/json1")
    //思考问题，我们正常返回它会走视图解析器，而json需要返回的是一个字符串；
    //市面上有很多的第三方jar包可以实现这个功能，jackson
    //@ResponseBody,将服务器端返回的对象转换为json对象响应回去；
    //@RequestBody
    @ResponseBody
    public String json1() throws JsonProcessingException {
//需要一个jackson对象映射器，就是一个类，使用它可以直接将对象转换为json字符串；
        ObjectMapper mapper = new ObjectMapper();
        //创建一个对象

        User user = new User("李白", 1, "男");
        System.out.println(user);

        //将java对象转换为json对象
        String string = mapper.writeValueAsString(user);
        System.out.println(string);
        return string;//由于使用了@ResponseBody注解，这里会将string以json格式的字符串返回，十分方便；
    }
    }

这里返回的json字符串会乱码
解决方法，在 @RequestMapping(value = “/json2”, produces = “application/json;charset=utf-8”)中加入参数和值


    @RequestMapping(value = "/json2", produces = "application/json;charset=utf-8")
    //思考问题，我们正常返回它会走视图解析器，而json需要返回的是一个字符串；
    //市面上有很多的第三方jar包可以实现这个功能，jackson
    //@ResponseBody,将服务器端返回的对象转换为json对象响应回去；
    //@RequestBody
    @ResponseBody
    public String json2() throws JsonProcessingException {
//需要一个jackson对象映射器，就是一个类，使用它可以直接将对象转换为json字符串；
        //创建一个对象

        User user = new User("李白", 1, "男");
        System.out.println(user);

        //将java对象转换为json对象

        return new ObjectMapper().writeValueAsString(user);
        //由于使用了@ResponseBody注解，这里会将string以json格式的字符串返回，十分方便；
    }

第二种解决json字符乱码的方式
在配置文件中加入：
springMVC.xml中加入：

<mvc:annotation-driven>
        <!--解决json字符串中文乱码问题-->
        <mvc:message-converters register-defaults="true">
            <bean class="org.springframework.http.converter.StringHttpMessageConverter">
                <constructor-arg value="UTF-8"/>
            </bean>
            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
                <property name="objectMapper">
                    <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
                        <property name="failOnEmptyBeans" value="false"></property>
                    </bean>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>

返回一个集合的字符串：


    @RequestMapping(value = "/json3")
    @ResponseBody
    public String json3() throws JsonProcessingException {
        //需要一个jackson对象映射器，就是一个类，使用它可以直接将对象转换为json字符串；
        //创建一个对象
        List<User> list = new ArrayList<>();
        User user1 = new User("李白", 1, "男");
        User user2 = new User("李白", 1, "男");
        User user3 = new User("李白", 1, "男");
        User user4 = new User("李白", 1, "男");
        User user5 = new User("李白", 1, "男");
        list.add(user1);
        list.add(user2);
        list.add(user3);
        list.add(user4);
        list.add(user5);


        //将java对象转换为json对象

        return new ObjectMapper().writeValueAsString(list);
        //由于使用了@ResponseBody注解，这里会将string以json格式的字符串返回，十分方便；
    }

在这里插入图片描述获取时间

 @RequestMapping(value = "/json4time")
    @ResponseBody
    public String json4() throws JsonProcessingException {
        Date date = new Date();
        System.out.println(date);
//发现问题：时候默认返回的json字符串变成了时候戳的格式：
        return new ObjectMapper().writeValueAsString(date);
    }

在这里插入图片描述将时间转换为日期格式：

@RequestMapping(value = "/json4time1")
    @ResponseBody
    public String json5() throws JsonProcessingException {

        ObjectMapper mapper = new ObjectMapper();

        //1.如何让他不返回时间戳！所以我们要关闭时间戳功能
        mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS, false);
//2.时间格式化问题！自定义日期格式对象；
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        //3.让mapper指定时间日期格式为simpleDateFormat；
        mapper.setDateFormat(simpleDateFormat);

        //写一个日期对象
        Date date = new Date();
        return mapper.writeValueAsString(date);
    }

最后我们把日期格式的方法封装成为一个工具类：
JsonUtils

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.SerializationFeature;

import java.text.SimpleDateFormat;


public class JsonUtils {
    public static String getJson(Object object){
return getJson(object,"yyyy-MM-dd HH:mm:ss");
    }
    public static String getJson(Object object,String dateFormat){
        ObjectMapper mapper = new ObjectMapper();

        //1.如何让他不返回时间戳！所以我们要关闭时间戳功能
        mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS, false);
//2.时间格式化问题！自定义日期格式对象；
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat(dateFormat);
        //3.让mapper指定时间日期格式为simpleDateFormat；
        mapper.setDateFormat(simpleDateFormat);
        try {
            return mapper.writeValueAsString(object);
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }
        return null;
    }
}

调用工具类：


    @RequestMapping(value = "/json4time2")
    @ResponseBody
    public String json6() throws JsonProcessingException {
        Date date = new Date();
        return JsonUtils.getJson(date);
    }

Ajax
AJAX = Asynchronous JavaScript and XML(异步的JavaScript和XML)。
Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
c/s
增加B/S的体验性
B/S:未来的主流，并且会爆发式的持续增长;H5＋网页＋客户端＋手机端（Android、IOS）+ 小程序
1.先导入包

伪造ajxa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪造Ajax</title>
</head>
<body>
<script type="text/javascript">
    window.onload = function f() {
        var myDate = new Date();
        document.getElementById('currentTime').innerText=myDate.getTime();
    }
    function loadPage() {
        var targetURL=document.getElementById('url').value;
        console.log(targetURL);
        document.getElementById('iframePosition').src=targetURL
    }
</script>


<div>
    <p>请输入要加载的地址：<span id="currentTime"></span></p>

    <p>
        <input type="text" id="url" value="https://blog.csdn.net/syq1791899128?spm=1018.2226.3001.5343">

        <input type="button" value="提交" onclick="loadPage()">
    </p>
</div>

<div>

    <h3>
        加载页面的位置：
    </h3>
    <iframe style="width: 100%;height: 500px " id="iframePosition"></iframe>
</div>
</body>
</html>


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Ajax</title>
<%--需要jquery,需要导入,注意点：路径问题--%>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js">

</script>
</head>
<body>

<script type="text/javascript">
function a1() {
    // //所有参数;
    //  url:待载入页面的URL地址
    //  data:寿发送Key /value参数
    //  success:载入成功时回调函数
    //  dataType:返回内容格式，xml， json, script,text，html

//data: 封装了服务器返回的数据

//status:状态
    //ajax默认是get请求
    $.ajax({url:"${pageContext.request.contextPath}/ajax/a1",
        data:{"name":$("txName").val()},
        success:function (data,status){
       console.log(data);
       console.log(status)
    }

    });


import com.sophy.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;


import javax.servlet.http.HttpServletResponse;
import java.util.ArrayList;
import java.util.List;

@Controller
@RequestMapping("/ajax")
public class AjaxController {
    //第一种方式服务器返回一个自字符串，直接使用response
    @RequestMapping("/a1")
    public void ajax(String name, HttpServletResponse response) throws Exception {
        if ("admin".equals(name)){
            response.getWriter().println("true");
        }else {
            response.getWriter().println("false");
        }
    }


    @RequestMapping("/a2")
    @ResponseBody
    public List<User> ajax2() {
        //创建一个对象
        List<User> list = new ArrayList<>();
        User user1 = new User("李白", 1, "男");
        User user2 = new User("李白", 1, "男");
        User user3 = new User("李白", 1, "男");
        User user4 = new User("李白", 1, "男");
        User user5 = new User("李白", 1, "男");
        list.add(user1);
        list.add(user2);
        list.add(user3);
        list.add(user4);
        list.add(user5);
        return list;//@ResponseBody注解。他会返回一个字符串；
    }

    @RequestMapping("/a3")
    @ResponseBody
    public String ajax3(String name,String pwd) {
        String msg="";
        if (name!=null){
            if ("admin".equals(name)){
                msg="ok";
            }
            else {
                msg="用户名有误";
            }
        }

        if (pwd!=null){
            if ("123456".equals(pwd)){
                msg="ok";
            }else {
                msg="密码输入错误";
            }
        }
        return msg;
    }
}

使用ajax实现密码活用户名错误时提示

<%--
  Created by IntelliJ IDEA.
  User: 月曦
  Date: 2022/2/21
  Time: 18:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

    <%--需要jquery,需要导入,注意点：路径问题--%>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
<script>
    function a1() {
        $.post({
            url:"${pageContext.request.contextPath}/ajax/a3",
            data:{"name":$("#name").val()},
            success:function (data) {
                if (data.toString()=="ok"){//信息核对成功
                    $('#userInfo').css("color","green");
                }else {
                    $('#userInfo').css("color","red")
                }
                $("#userInfo").html(data);

            }
        })
        
    }
    
    function a2() {
        $.post({
            url:"${pageContext.request.contextPath}/ajax/a3",
            data:{"pwd":$("#pwd").val()},
            success:function (data){
                if (data.toString()=="ok"){
                    $('#pwdInfo').css("color","green")
                }else {
                    $('#pwdInfo').css("color","red")
                }
                $("#pwdInfo").html(data);
            }
        })
        
    }
</script>
    </head>
<body>
<P>
    用户名：
    <input type="text" id="name" onblur="a1()"/>
    <span id="userInfo"></span>
</P>
<P>
    密码：
    <input type="text" id="pwd" onblur="a2()"/>
    <span id="pwdInfo"></span>
</P>
</body>
</html>

在这里插入图片描述

使用jQuery需要导入jQuery,使用Vue,导入Vue

举报

相关推荐

AJAX和JSON的学习

java

JSON和AJAX

JAVA开发相关学习Java web

Ajax和Json

ajaxjsonweb

AJAX和JSON详解

xmlajaxjsonJava编程语言

Ajax+JSON学习二

qt开发语言c++visualstudioui

Ajax+JSON学习一

pythonchatgpt开发语言数据结构leetcode算法

javaweb搭配ajax和json

信息可视化数据分析python数据挖掘大数据

基于jQuery的AJAX和JSON的实例

数据htmlAJAXOpenStack云计算

Ajax & Json

javajsonjqueryajax

Json、Ajax

jsonajaxokhttp笔记
0 条评论