Ajax&Json笔记【极简】

Ajax&Json笔记[极简]

• Ajax快速入门 --使用JQuery封装的方法发送异步请求

  • 方式一

    $.ajax({
         url:"findUser",//请求路径
         type:"GET",//请求类型
         data:"{"username":"tom","age":28}",//请求参数
         success:function(data){}//响应成功后的回调函数
     	error:function(){}//响应失败后的回调函数
     	dataType:"json"//响应接收的数据格式
    });
    

  • 方式二

    $.get("findUser","{"username":"tom","age",28}",function(data){
         //"findUsre"为请求路径url
         //"{"username":"tom","age",28}"为请求参数data
         //function(data){}为回调函数
         //data为response.getWriter的响应数据
     });
    

  • $.post(url,data,callback);为post请求方式下使用的方式,参数和用法同上

• Json快速入门

  • 获取json值 --注意:确定对象为json类型，再使用下列方式取值

  1. json对象.键名

  2. json对象[“键名”]

  3. 数组对象[索引]

  4. 遍历

  • Json与Java 转换 --使用jackson解析器

    • 导入jar包

    • 创建jackson核心对象 ObjectMapper

    • 调用转换方法

      • 调readValue(Json,class):将Json转成java对象
      • writeValue(转出形式,obj):以某种形式输出Json
        • 转出形式:File,Writer,OutputStream
      • writeValueAsString(obj):将对象转为json字符串
        • 会把List转成数组,Map格式不变

• Demo[用户名重复验证:Ajax+Json]

  • 前端代码

     <form>
         用户名:<input type="text" name="username" id="username" placeholder="请输入用户名"/>
         <span id="s_username"></span>
     </form>
    

  • JavaScript代码

    $(function () {//方式一,使用 $.get()发送异步请求
         $("#username").blur(function () {
             var username = $("#username").val();//获取输入框的值
             var span = $("#s_username");//获取span标签
             $.get("/findUser",{"username":username},function (data) {
                 if(data.userExist){//用户名是否存在
                     span.css("color","red");
                     span.html(data.msg);
                 }else {
                     span.css("color","green");
                     span.html(data.msg);
                 }
             });
     	});
     }
    

    $(function () {//方式二,使用 $.ajax({})发送异步请求
         $("#username").blur(function () {
          	var username = $(this).val();
             var span = $("#s_username");
             $.ajax({
                 url:"findUser",
                 type:"GET",
                 data:{"username":username},
                 success:function (data) {
                     if(data.userExist){
                         span.css("color","red");
                         span.html(data.msg);
                     }else {
                         span.css("color","green");
                         span.html(data.msg);
                     }
                 },
                 error:function () {
                 	alert("出错了!!");
                 },
          		dataType:"json"//接收响应数据的类型
     		});
     	});
     }
    

  • Java代码[servlet]

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
             response.setContentType("application/json;charset=utf-8");
         	//设置响应数据的类型
             String username = request.getParameter("username");//获取input中输入的值
         
             Map<String, Object> map = new HashMap<>();
             if(username.equals("zhangsan")){
                 map.put("userExist",true);
                 map.put("msg","这个昵称太受欢迎了,换一个吧~");
             }else{
                 map.put("userExist",false);
                 map.put("msg","昵称可以使用");
             }
         
             ObjectMapper objectMapper = new ObjectMapper();//创建jackson核心对象
             objectMapper.writeValue(response.getWriter(),map);//map转json对象
     }
    

  • 依赖jar包

    • jackson-core-2.2.3.jar

    • jackson-databind-2.2.3.jar

    • jackson-annotations-2.2.3.jar