Ajax介绍
Ajax是与服务器交换数据并更新网页局部内容的技术。
查看当前天气情况的案例
步骤一、引入相关的jar包
image
步骤二、创建一个Servlet
该Servlet会调用天气查询的接口，代码如下：
package cn.servlet.test;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.http.HttpResponse;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.util.EntityUtils;
public class WeatherServlet extends HttpServlet {
public void service(HttpServletRequest request,HttpServletResponse response) throws IOException {
//参数url化
String city = java.net.URLEncoder.encode(request.getParameter("city"), "utf-8");
//拼地址
String url = String.format("https://www.sojson.com/open/api/weather/json.shtml?city=%s",city);
System.out.println(url);
//String url ="http://weather.51wnl.com/weatherinfo/GetMoreWeather?cityCode="+request.getParameter("city")+"&weatherType=1";
try{
CloseableHttpClient httpClient = HttpClients.createDefault();
HttpGet httpGet =new HttpGet(url);
HttpResponse result =httpClient.execute(httpGet);
String resData = EntityUtils.toString(result.getEntity());
response.setHeader("Content-type","application/json;charset=UTF-8");
response.setCharacterEncoding("utf-8");
response.setHeader("Cache-Control","no-cache");
PrintWriter printWriter =response.getWriter();
printWriter.write(resData);
}catch(Exception e){
e.printStackTrace();
}
}
}
附截图：
image.png
步骤三、修改web.xml配置
添加如下配置：
<servlet>
<servlet-name>mySrvt7</servlet-name>
<servlet-class>cn.servlet.test.WeatherServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>mySrvt7</servlet-name>
<url-pattern>/weather</url-pattern>
</servlet-mapping>
附截图：
image.png
步骤四、设计前端代码
前端代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Basic usage</title>
<meta charset="utf-8">
<link href="css/examples-offline.css" rel="stylesheet">
<link href="css/kendo.common.min.css" rel="stylesheet">
<link href="css/kendo.rtl.min.css" rel="stylesheet">
<link href="css/kendo.default.min.css" rel="stylesheet">
<link href="css/kendo.default.mobile.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/jszip.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<script src="js/console.js"></script>
<style>
#cap {
width: 242px;
height: 125px;
margin: 20px auto;
}
</style>
<script>
$(document).ready(function() {
var data = [
{ text: "请选择", value: "" },
{ text: "上海", value: "1" },
{ text: "北京", value: "2" },
{ text: "广州", value: "3" },
{ text: "深圳", value: "4" },
{ text: "扬州", value: "5" }
];
// create DropDownList from input HTML element
$("#city").kendoDropDownList({
dataTextField: "text",
dataValueField: "text",
dataSource: data,
index: 0,
change: onChange
});
var city = $("#city").data("kendoDropDownList");
city.select(0);
function onChange() {
if($("#city").val()=="请选择"){
$("#cap").html("");
return;
}
$.ajax({url:"weather",
type:"post",
data:{city:$("#city").val()},
success:function(result){
$("#cap").html("湿度："+result.data.shidu+"<br/>"+
"pm25："+result.data.pm25+"<br/>"+
"pm10："+result.data.pm10+"<br/>"+
"空气质量："+result.data.quality+"<br/>"+
"气温："+result.data.wendu+"°C"+"<br/>"+
"建议："+result.data.ganmao);
}});
};
});
</script>
</head>
<body>
<a class="offline-button" href="index.html">Back</a>
<div id="example">
<div id="cap-view" class="demo-section k-content">
<h3><label for="city">请选择城市</label></h3>
<div style="margin-top:15px;margin-bottom:30px;">
<input id="city" value="1" style="width: 100%;" />
</div>
<h3>天气情况如下：</h3>
<div id="cap"></div>
</div>
</div>
</body>
</html>
附截图：
image.png
步骤五、测试
附截图：
image.png
image.png
