您的位置:首页 > Web前端 > JavaScript

Json+案例(验证用户名是否存在)

2020-03-24 12:24 696 查看

Json

  1. 概念:JavaScript object Notation JavaScript对象表示法

    Java对象功能:

    Person p = new Person();

    p.setName(“张三”);

    p.setGender(“男”);

    JavaScript 用json实现

    例子:

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

    现在Json有更广泛的应用:

    JSON 是存储和交换文本信息的语法。类似 XML。

    JSON 比 XML 更小、更快,更易解析。

  2. 语法:

    基本规则

      数据再名称/值对中:json数据是由键值对构成的

      ​ * 键用引号引起来,也可不用引号

      ​ * 值的取值类型

      1. 数字(整数或浮点数)
      2. 字符串(在双引号中)
      3. 逻辑值(true,false)
      4. 数组(方括号中)
      5. 对象(花括号中)
      6. null
    • 数据用逗号分隔:多个

    • 花括号保存对象:用{}

    • 方括号保存数据:[ ]

例子源码:

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

</body>
<script>
//1.定义基本格式,要加都加引号
var person = {name:"张三",age:23,gender:true};

//2.嵌套格式 {}-->[]
var persons = {
"persons":[
{"name":"李四","age":23,"gender":true},
{"name":"王五","age":44,"gender":false},
{"name":"赵六","age":19,"gender":true}
]
};
//[]-->{}
var ps = [{"name":"李四","age":23,"gender":true},
{"name":"王五","age":44,"gender":false},
{"name":"赵六","age":19,"gender":true}
];
</script>
</html>
  1. 获取数据: [ol] json对象.键名
  2. json对象[“键名”]
  3. 数组对象[索引]
[/ol]

再上面的基础上获取一些数据的代码:

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

</body>
<script>
//1.定义基本格式,要加都加引号
var person = {name:"张三",age:23,gender:true};
//获取name的值
var name = person.name;
person["name"];

//2.嵌套格式 {}-->[]
var persons = {
"persons":[
{"name":"李四","age":23,"gender":true},
{"name":"王五","age":44,"gender":false},
{"name":"赵六","age":19,"gender":true}
]
};
//获取王五
persons.persons[2].name
//[]-->{}
var ps = [{"name":"李四","age":23,"gender":true},
{"name":"王五","age":44,"gender":false},
{"name":"赵六","age":19,"gender":true}
];
//获取数组中的第二个值的name
ps[1].name;
</script>
</html>
  1. json的遍历

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>
    
    </body>
    <script>
    //1.定义基本格式,要加都加引号
    var person = {name:"张三",age:23,gender:true};
    
    var ps = [{"name":"李四","age":23,"gender":true},
    {"name":"王五","age":44,"gender":false},
    {"name":"赵六","age":19,"gender":true}
    ];
    //获取person对象中所有的键和值
    //for in
    for(var key in 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>
    </html>
  2. Json数据和Java对象的相互转换

      JSON解析器: 常见解析器:Jsonlib,Gson,fastjson,jackson(spring有内置)
    [ol]
  3. JSON转为Java对象

      导入jackson的相关jar包

    • 创建Jackson核心对象 objectMapper

    • 调用objectMapper的相关方法进行转换

      readValue(Json字符串,class)

      //json对象转为Java对象
      @Test
      public void test4() throws Exception {
      //1.初始化Json字符串
      String json = "{\"gender\":\"男\",\"name\":\"张三\",\"age\":23}";
      //2.创建ObjectMapper对象
      ObjectMapper mapper = new ObjectMapper();
      //转换为java对象
      Person person = mapper.readValue(json,Person.class);
      System.out.println(person);
      
      }
  • Java对象转为JSON

      使用步骤: 导入jackson的相关jar包
    • 创建Jackson核心对象 objectMapper
    • 调用objectMapper的相关方法进行转换
    [/ol]

    基本使用方法:

    Person对象:

    package edu.xalead.vo;
    
    public class Person {
    private String name;
    private int age;
    private String gender;
    
    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;
    }
    
    @Override
    public String toString() {
    return "Person{" +
    "name='" + name + '\'' +
    ", age=" + age +
    ", gender='" + gender + '\'' +
    '}';
    }
    }

    测试:

    package edu.xalead.test;
    
    import com.fasterxml.jackson.databind.ObjectMapper;
    import edu.xalead.vo.Person;
    import org.junit.Test;
    
    import java.io.File;
    import java.io.FileWriter;
    
    public class JacksonTest {
    //Java对象转为Json
    @Test
    public void test1() throws Exception {
    //1.创建Person对象
    Person p = new Person();
    p.setName("李四");
    p.setAge(12);
    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:将对象转换为json字符串
    */
    String json = mapper.writeValueAsString(p);
    System.out.println(json);//{"name":"李四","age":12,"gender":"男"}
    
    //writeValue方法,将数据写到H://a.txt
    mapper.writeValue(new File("H://a.txt"),p);
    //writeValue方法,关联到Writer中
    mapper.writeValue(new FileWriter("H://b.txt"),p);
    }
    }

    1.转换方法:

    • writeValue:(参数1,obj)

    • 参数1:
      File:将obj对象转换为Json字符串,并保存到指定文件
      Writer:将obj对象转换为Json字符串,并将json数据填充到字符输出流
      outputStream:将obj对象转换为Json字符串,并将json数据填充到字节输出流

    • writeValueAsString:将对象转换为json字符串

    1. 注解:

      1. @JsonIgnore:排除属性。
      2. @JsonFormat:属性值的格式化
      @JsonFormat(pattern = "yyyy-MM-dd")
      复杂Java对象的转换
      -List :数组
      -Map:和对象格式一致
      实例及结果:
    @Test
    public void test3() throws Exception {
    //1.创建Person对象
    Person p = new Person();
    p.setName("李四");
    p.setAge(12);
    p.setGender("男");
    p.setBirthday(new Date());
    
    Person p1 = new Person();
    p1.setName("李四");
    p1.setAge(12);
    p1.setGender("男");
    p1.setBirthday(new Date());
    
    Person p2 = new Person();
    p2.setName("李四");
    p2.setAge(12);
    p2.setGender("男");
    p2.setBirthday(new Date());
    
    //创建list集合
    List<Person> ps = new ArrayList<>();
    ps.add(p);
    ps.add(p1);
    ps.add(p2);
    //Map集合
    Map<String,Object> map = new HashMap<>();
    map.put("name","张三");
    map.put("ag2",23);
    map.put("gender","男");
    
    ObjectMapper mapper = new ObjectMapper();
    String json = mapper.writeValueAsString(ps);
    String json1 = mapper.writeValueAsString(map);
    System.out.println(json);
    System.out.println(json1);
    }
    [{"name":"李四","age":12,"gender":"男","birthday":"2020-03-03"},{"name":"李四","age":12,"gender":"男","birthday":"2020-03-03"},{"name":"李四","age":12,"gender":"男","birthday":"2020-03-03"}]
    {"gender":"男","name":"张三","ag2":23}

    案例

    • 校验用户名是否存在

      服务器端:

      package edu.xalead;
      
      import com.fasterxml.jackson.databind.ObjectMapper;
      
      import javax.servlet.ServletException;
      import javax.servlet.annotation.WebServlet;
      import javax.servlet.http.HttpServlet;
      import javax.servlet.http.HttpServletRequest;
      import javax.servlet.http.HttpServletResponse;
      import java.io.IOException;
      import java.sql.*;
      import java.util.HashMap;
      import java.util.Map;
      
      @WebServlet(name = "FindUserServlet",urlPatterns = "/findUserServlet")
      public class FindUserServlet extends HttpServlet {
      protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      //从表单获取用户名
      String username = request.getParameter("username");
      
      //从数据库获取用户名
      String driverClass = "com.mysql.jdbc.Driver";
      String url = "jdbc:mysql://localhost:3306/user_test";
      String userName = "root";
      String password = "root";
      //链接对象
      Connection conn = null;
      //结果集
      ResultSet rs = null;
      //语句准备对象
      PreparedStatement ps = null;
      
      String sql = "select * from user_json where username=?";
      try {
      //加载驱动
      Class.forName(driverClass);
      conn = DriverManager.getConnection(url,userName,password);
      ps = conn.prepareStatement(sql);
      ps.setString(1,username);
      rs = ps.executeQuery();
      //解决乱码
      response.setContentType("text/html;charset=utf-8");
      Map<String,Object> map = new HashMap<>();
      if(rs.next()){
      //已经存在该用户
      map.put("userExsit",true);
      map.put("mes","此用户太受欢迎,请更换一个!");
      }else{
      map.put("userExsit",true);
      map.put("mes","用户名可用!");
      }
      //map转换为json,并传递给客户端
      ObjectMapper mapper = new ObjectMapper();
      mapper.writeValue(response.getWriter(),map);
      } catch (Exception e) {
      e.printStackTrace();
      }
      
      }
      
      protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      this.doPost(request,response);
      }
      }

    客户端:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    </head>
    <body>
    <form>
    <input type="text" id="username" name="username" placeholder="请输入用户名">
    <span id="errspan"> </span>
    <br>
    <input type="text" id="pwd" name="password" placeholder="请输入密码"><br>
    <input type="submit" value="注册">
    </form>
    </body>
    <script>
    //在页面加载完成后
    $(function(){//入口函数
    //给username绑定blur事件
    $("#username").blur(function () {
    //获取username文本输入框的值
    var username = $(this).val();
    //发送ajax请求
    //期望服务器返回数据的格式,{"userExsit":true,"mes":"此用户太受欢迎,请换一个"}
    //{"userExsit":false,"mes":"用户名可用"}
    $.get("findUserServlet",{username:username},function (data) {
    // alert(data);
    //判断userExsit键是否为true
    var span = $("#errspan");
    if(data.userExsit){
    //用户名存在
    span.css("color","red")
    span.html(data.mes);
    }else{
    span.css("color","green")
    span.html(data.mes);
    }
    },"json");
    })
    });
    </script>
    </html>
    • 点赞 1
    • 收藏
    • 分享
    • 文章举报
    AJ_007 发布了26 篇原创文章 · 获赞 1 · 访问量 442 私信 关注
  • 内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
    标签: