Ajax

Ajax

异步的JavaScript和xml，无需重新加载整个网页的情况下，更新部分网页的技术

Ajax不是编程语言，适用于创建更好更快以及交互性更强的web应用程序技术

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>伪造Ajax</title>
</head>
<body>
​
<div>
    <p>
        <span id="currentTime"></span>
    </p>
    <p>请输入要加载的地址：</p>
    <P>
        <input type="text" id="url" value="https://www.baidu.com">
        <input type="button" value="确定" onclick="loadRemotePage()">
    </P>
</div>
​
<div>
    <h3>加载页面的位置</h3>
    <iframe style="width: 800px;height: 600px" id="iframep">
​
    </iframe>
</div>
​
<script type="text/javascript">
    window.onload = function () {
        var myDate = new Date();
        document.getElementById('currentTime').innerHTML = myDate;
    }
    
    function loadRemotePage() {
        var tag = document.getElementById('url').value;
        document.getElementById('iframep').src = tag;
    }
</script>
</body>
</html>

 

使用JQuery

在webapp下建立statics---js文件夹 放入jquery.js文件

  1. 编写对应处理的controller,返回消息或者字符串或者json数据

  2. 编写ajax请求

    url: controller请求

    data:键值对

    success:function(data){} 回调函数

  3. 给ajax绑定事件，点击onclick,失去焦点 onblur，键盘弹起keyup

//ajax默认get请求
$.ajax({
url:"${pageContext.request.contextPath}/ajax/ab",
data:{"username":$("username")},
success:function (data){
//data封装了服务器返回的数据
console.log(data);
}
});
​
$.post({
url:"${pageContext.request.contextPath}/ajax/ab",
data:{"username":$("username")},
success:function (data){
//data封装了服务器返回的数据
console.log(data);
}
});
​
$.post("${pageContext.request.contextPath}/ajax/ab",{"username":$("username")},function (data){})

 

 

 

JSON

轻量级的数据交换格式

 

 

 

//定义一个对象
    var user={
        name: 'kk',
        age: 13,
        sex: '男'
    }
    //object
    console.log(user);
​
    //将js对象转为json字符串
    var str = JSON.stringify(user);
    console.log(str);//  {"name":"kk","age":13,"sex":"男"}
    //json字符串转为js对象
    var object = JSON.parse(str);

 

JSON.stringify 转为json字符串

JSON.parse 解析

Controller返回json字符串

 

 

处理乱码问题

 

 

 

处理日期问题，不处理返回的是时间戳

 

 

json时间工具类

package com.henry.util;
​
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 {
​
    //dateFormat  "yyyy-MM-dd HH:mm:ss"
    public static String getJSON(Object object,String dateFormat){
        ObjectMapper mapper = new ObjectMapper();
        //让其不返回时间戳，关闭时间戳
        mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS,false);
        //时间格式化问题
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat(dateFormat);
        mapper.setDateFormat(simpleDateFormat);
​
        try {
            return mapper.writeValueAsString(object);
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }
        return null;
    }
​
    //重载
    public static String getJSON(Object object){
        return getJSON(object,"yyyy-MM-dd HH:mm:ss");
    }
}

 

 

posted @ 2020-10-09 19:47  Henry829  阅读(96)  评论(0)  编辑  收藏  举报