今天学习了ajax的异步刷新的使用
我做了一个简单的天气查询刷新 大致如下图：
html页面.png
好的首先我们要找到天气的接口api我使用的和风天气的api: http://www.heweather.com/documents/api/v5/weather
准备json数据的解析框架Gson ，以及生成json的jar架包
服务端代码：
@WebServlet("/test.do")
public class TestServlet extends HttpServlet{
/**
*
*/
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");//设置http输出格式
resp.setCharacterEncoding("utf-8");//设置字符编码格式
resp.setHeader("Access-Control-Allow-Origin", "*");
try {
String city = req.getParameter("city");
System.out.println(city);
URL url = new URL
("https://free-api.heweather.com/v5/suggestion?city="+city+"&key="+HttpUtils.CODE_ID);
InputStream iStream = url.openStream();
InputStreamReader isReader = new InputStreamReader(iStream,"utf-8");
BufferedReader bReader = new BufferedReader(isReader);
String res="";
String line="";
//读取数据
while((line=bReader.readLine())!=null){
res+=line;
}
bReader.close();
isReader.close();
iStream.close();
System.out.println(res);
Gson gson = new Gson();
Test fromJson = gson.fromJson(res, Test.class);
List<HeWeather5Bean> heWeather5 = fromJson.getHeWeather5();
for(HeWeather5Bean bean:heWeather5){
System.out.println(bean.getBasic().getCity());
JSONObject jsonObject = new JSONObject();
jsonObject.put("city", bean.getBasic().getCity());
jsonObject.put("suggestion", bean.getSuggestion().getComf().getTxt());
resp.getWriter().write(jsonObject.toString());
}
} catch (Exception e) {
e.printStackTrace();
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doGet(req, resp);
}
}
bean类的生成可以使用Gsonformat工具就行了
还是上一下bean 吧 使用内部静态类
package com.Aj.bean;
import java.util.List;
public class Test {
private List<HeWeather5Bean> HeWeather5;
public List<HeWeather5Bean> getHeWeather5() {
return HeWeather5;
}
public void setHeWeather5(List<HeWeather5Bean> HeWeather5) {
this.HeWeather5 = HeWeather5;
}
public static class HeWeather5Bean {
/**
* basic : {"city":"南京","cnty":"中国","id":"CN101190101","lat":"32.04154587","lon":"118.76741028","update":{"loc":"2018-07-23 09:48","utc":"2018-07-23 01:48"}}
* status : ok
* suggestion : {"air":{"brf":"良","txt":"气象条件有利于空气污染物稀释、扩散和清除，可在室外正常活动。"},"comf":{"brf":"较不舒适","txt":"白天虽然有雨，但仍无法削弱较高气温带来的暑意，同时降雨造成湿度加大会您感到有些闷热，不很舒适。"},"cw":{"brf":"不宜","txt":"不宜洗车，未来24小时内有雨，如果在此期间洗车，雨水和路上的泥水可能会再次弄脏您的爱车。"},"drsg":{"brf":"炎热","txt":"天气炎热，建议着短衫、短裙、短裤、薄型T恤衫等清凉夏季服装。"},"flu":{"brf":"少发","txt":"各项气象条件适宜，发生感冒机率较低。但请避免长期处于空调房间中，以防感冒。"},"sport":{"brf":"较不宜","txt":"有降水，且风力较强，推荐您在室内进行低强度运动；若坚持户外运动，请选择避雨防风的地点。"},"trav":{"brf":"较适宜","txt":"有降水，气温较高，但风较大，能缓解湿热的感觉，还是适宜旅游，您仍可陶醉于大自然的美丽风光中。"},"uv":{"brf":"中等","txt":"属中等强度紫外线辐射天气，外出时建议涂擦SPF高于15、PA+的防晒护肤品，戴帽子、太阳镜。"}}
*/
private BasicBean basic;
private String status;
private SuggestionBean suggestion;
public BasicBean getBasic() {
return basic;
}
public void setBasic(BasicBean basic) {
this.basic = basic;
}
public String getStatus() {
return status;
}
public void setStatus(String status) {
this.status = status;
}
public SuggestionBean getSuggestion() {
return suggestion;
}
public void setSuggestion(SuggestionBean suggestion) {
this.suggestion = suggestion;
}
public static class BasicBean {
/**
* city : 南京
* cnty : 中国
* id : CN101190101
* lat : 32.04154587
* lon : 118.76741028
* update : {"loc":"2018-07-23 09:48","utc":"2018-07-23 01:48"}
*/
private String city;
private String cnty;
private String id;
private String lat;
private String lon;
private UpdateBean update;
public String getCity() {
return city;
}
public void setCity(String city) {
this.city = city;
}
public String getCnty() {
return cnty;
}
public void setCnty(String cnty) {
this.cnty = cnty;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getLat() {
return lat;
}
public void setLat(String lat) {
this.lat = lat;
}
public String getLon() {
return lon;
}
public void setLon(String lon) {
this.lon = lon;
}
public UpdateBean getUpdate() {
return update;
}
public void setUpdate(UpdateBean update) {
this.update = update;
}
public static class UpdateBean {
/**
* loc : 2018-07-23 09:48
* utc : 2018-07-23 01:48
*/
private String loc;
private String utc;
public String getLoc() {
return loc;
}
public void setLoc(String loc) {
this.loc = loc;
}
public String getUtc() {
return utc;
}
public void setUtc(String utc) {
this.utc = utc;
}
}
}
public static class SuggestionBean {
/**
* air : {"brf":"良","txt":"气象条件有利于空气污染物稀释、扩散和清除，可在室外正常活动。"}
* comf : {"brf":"较不舒适","txt":"白天虽然有雨，但仍无法削弱较高气温带来的暑意，同时降雨造成湿度加大会您感到有些闷热，不很舒适。"}
* cw : {"brf":"不宜","txt":"不宜洗车，未来24小时内有雨，如果在此期间洗车，雨水和路上的泥水可能会再次弄脏您的爱车。"}
* drsg : {"brf":"炎热","txt":"天气炎热，建议着短衫、短裙、短裤、薄型T恤衫等清凉夏季服装。"}
* flu : {"brf":"少发","txt":"各项气象条件适宜，发生感冒机率较低。但请避免长期处于空调房间中，以防感冒。"}
* sport : {"brf":"较不宜","txt":"有降水，且风力较强，推荐您在室内进行低强度运动；若坚持户外运动，请选择避雨防风的地点。"}
* trav : {"brf":"较适宜","txt":"有降水，气温较高，但风较大，能缓解湿热的感觉，还是适宜旅游，您仍可陶醉于大自然的美丽风光中。"}
* uv : {"brf":"中等","txt":"属中等强度紫外线辐射天气，外出时建议涂擦SPF高于15、PA+的防晒护肤品，戴帽子、太阳镜。"}
*/
private AirBean air;
private ComfBean comf;
private CwBean cw;
private DrsgBean drsg;
private FluBean flu;
private SportBean sport;
private TravBean trav;
private UvBean uv;
public AirBean getAir() {
return air;
}
public void setAir(AirBean air) {
this.air = air;
}
public ComfBean getComf() {
return comf;
}
public void setComf(ComfBean comf) {
this.comf = comf;
}
public CwBean getCw() {
return cw;
}
public void setCw(CwBean cw) {
this.cw = cw;
}
public DrsgBean getDrsg() {
return drsg;
}
public void setDrsg(DrsgBean drsg) {
this.drsg = drsg;
}
public FluBean getFlu() {
return flu;
}
public void setFlu(FluBean flu) {
this.flu = flu;
}
public SportBean getSport() {
return sport;
}
public void setSport(SportBean sport) {
this.sport = sport;
}
public TravBean getTrav() {
return trav;
}
public void setTrav(TravBean trav) {
this.trav = trav;
}
public UvBean getUv() {
return uv;
}
public void setUv(UvBean uv) {
this.uv = uv;
}
public static class AirBean {
/**
* brf : 良
* txt : 气象条件有利于空气污染物稀释、扩散和清除，可在室外正常活动。
*/
private String brf;
private String txt;
public String getBrf() {
return brf;
}
public void setBrf(String brf) {
this.brf = brf;
}
public String getTxt() {
return txt;
}
public void setTxt(String txt) {
this.txt = txt;
}
}
public static class ComfBean {
/**
* brf : 较不舒适
* txt : 白天虽然有雨，但仍无法削弱较高气温带来的暑意，同时降雨造成湿度加大会您感到有些闷热，不很舒适。
*/
private String brf;
private String txt;
public String getBrf() {
return brf;
}
public void setBrf(String brf) {
this.brf = brf;
}
public String getTxt() {
return txt;
}
public void setTxt(String txt) {
this.txt = txt;
}
}
public static class CwBean {
/**
* brf : 不宜
* txt : 不宜洗车，未来24小时内有雨，如果在此期间洗车，雨水和路上的泥水可能会再次弄脏您的爱车。
*/
private String brf;
private String txt;
public String getBrf() {
return brf;
}
public void setBrf(String brf) {
this.brf = brf;
}
public String getTxt() {
return txt;
}
public void setTxt(String txt) {
this.txt = txt;
}
}
public static class DrsgBean {
/**
* brf : 炎热
* txt : 天气炎热，建议着短衫、短裙、短裤、薄型T恤衫等清凉夏季服装。
*/
private String brf;
private String txt;
public String getBrf() {
return brf;
}
public void setBrf(String brf) {
this.brf = brf;
}
public String getTxt() {
return txt;
}
public void setTxt(String txt) {
this.txt = txt;
}
}
public static class FluBean {
/**
* brf : 少发
* txt : 各项气象条件适宜，发生感冒机率较低。但请避免长期处于空调房间中，以防感冒。
*/
private String brf;
private String txt;
public String getBrf() {
return brf;
}
public void setBrf(String brf) {
this.brf = brf;
}
public String getTxt() {
return txt;
}
public void setTxt(String txt) {
this.txt = txt;
}
}
public static class SportBean {
/**
* brf : 较不宜
* txt : 有降水，且风力较强，推荐您在室内进行低强度运动；若坚持户外运动，请选择避雨防风的地点。
*/
private String brf;
private String txt;
public String getBrf() {
return brf;
}
public void setBrf(String brf) {
this.brf = brf;
}
public String getTxt() {
return txt;
}
public void setTxt(String txt) {
this.txt = txt;
}
}
public static class TravBean {
/**
* brf : 较适宜
* txt : 有降水，气温较高，但风较大，能缓解湿热的感觉，还是适宜旅游，您仍可陶醉于大自然的美丽风光中。
*/
private String brf;
private String txt;
public String getBrf() {
return brf;
}
public void setBrf(String brf) {
this.brf = brf;
}
public String getTxt() {
return txt;
}
public void setTxt(String txt) {
this.txt = txt;
}
}
public static class UvBean {
/**
* brf : 中等
* txt : 属中等强度紫外线辐射天气，外出时建议涂擦SPF高于15、PA+的防晒护肤品，戴帽子、太阳镜。
*/
private String brf;
private String txt;
public String getBrf() {
return brf;
}
public void setBrf(String brf) {
this.brf = brf;
}
public String getTxt() {
return txt;
}
public void setTxt(String txt) {
this.txt = txt;
}
}
}
}
}
接下来就是html页面ajax的使用，上代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" >
<title>Document</title>
<style type="text/css">
*{text-align: center;}
</style>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
</head>
<body>
<h1 style="color: red">天气查询</h1>
<br>
<select name="city" id="city">
<option value="选择" selected="selected">请选择</option>
<option value="北京">北京</option>
<option value="南京">南京</option>
<option value="上海">上海</option>
<option value="天津">天津</option>
<option value="重庆">重庆</option>
<option value="深圳">深圳</option>
</select>
<button id="search" type="button">查询</button>
<br>
<br>
<p style="color: red">天气详情</p>
<p id="result">大家好</p>
<script >
$("#search").click(function(){
$.ajax({
type:"GET",
url:"http://127.0.0.1:9999/AjText/test.do?city="+$("#city").val(),
dataType:"json",
success:function(data){
if(data){
$("#result").html("<span>城市:"+data.city+"</span><br><span>建议:"+data.suggestion+"</span><br>");
}else{
alert("查询错误:"+data);
}
},
error:function(jqXHR){
alert("未知查询错误");
}
});
});
</script>
</body>
</html>
其中success中data的参数就是后台返回的json数据
在编写的过程中遇到了跨域的问题：解决方案可以从前台进行修改，也可以改后台，我是改的后台。可以看到我servlet中多了这么一句：
resp.setHeader("Access-Control-Allow-Origin", "*");
来解决No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.这个错误的。
网友评论