webService学习9:jquery ajax调用webservice
2016-06-11 07:51
465 查看
1 参照 webService学习7:调用天气接口 生成客户端代码
2 前台代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="<%=basePath %>js/jquery-3.0.0.min.js"></script>
</head>
<body>
城市 :<input type="text" id="city"><button onclick="search()">搜索</button></br>
天气:<textarea id="weathear" rows="10" cols="20"></textarea>
<script type="text/javascript">
var search = function(){
var city = document.getElementById("city").value;
var url="<%=basePath %>servlet/WeatherServlet";
var data = {city:city};
$.ajax({
type: "post",
url: url,
data:data,
dataType: "json",
success: function(data){
document.getElementById("weathear").innerHTML = data.weather;
},
error : function(e){
alert("error");
}
});
}
</script>
</body>
</html>
3 后台代码
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import cn.com.webxml.WeatherWebService;
import cn.com.webxml.WeatherWebServiceSoap;
public class WeatherServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String city = request.getParameter("city");
WeatherWebService weatherWS = new WeatherWebService();
WeatherWebServiceSoap weatherSoap = weatherWS.getWeatherWebServiceSoap();
List weathInfo = weatherSoap.getWeatherbyCityName(city).getString();
StringBuffer sb = new StringBuffer();
for(int i =0 ; i < weathInfo.size() ; i++){
sb.append(weathInfo.get(i)+"</br>s");
}
response.setHeader("Content-type", "text/html;charset=UTF-8");
JSONObject jsonObject = new JSONObject();
jsonObject.put("weather", sb.toString());
response.getWriter().write(JSON.toJSONString(jsonObject));
}
}
4 项目截图
5 结果展示
2 前台代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="<%=basePath %>js/jquery-3.0.0.min.js"></script>
</head>
<body>
城市 :<input type="text" id="city"><button onclick="search()">搜索</button></br>
天气:<textarea id="weathear" rows="10" cols="20"></textarea>
<script type="text/javascript">
var search = function(){
var city = document.getElementById("city").value;
var url="<%=basePath %>servlet/WeatherServlet";
var data = {city:city};
$.ajax({
type: "post",
url: url,
data:data,
dataType: "json",
success: function(data){
document.getElementById("weathear").innerHTML = data.weather;
},
error : function(e){
alert("error");
}
});
}
</script>
</body>
</html>
3 后台代码
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import cn.com.webxml.WeatherWebService;
import cn.com.webxml.WeatherWebServiceSoap;
public class WeatherServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String city = request.getParameter("city");
WeatherWebService weatherWS = new WeatherWebService();
WeatherWebServiceSoap weatherSoap = weatherWS.getWeatherWebServiceSoap();
List weathInfo = weatherSoap.getWeatherbyCityName(city).getString();
StringBuffer sb = new StringBuffer();
for(int i =0 ; i < weathInfo.size() ; i++){
sb.append(weathInfo.get(i)+"</br>s");
}
response.setHeader("Content-type", "text/html;charset=UTF-8");
JSONObject jsonObject = new JSONObject();
jsonObject.put("weather", sb.toString());
response.getWriter().write(JSON.toJSONString(jsonObject));
}
}
4 项目截图
5 结果展示
相关文章推荐
- jquery与php的json交互
- firefox和chrome中 JQuery的ajax组件执行差异
- 简单的鼠标滑动上去图片放大Jquery特效代码
- 利用jquery给指定的table动态添加一行、删除一行
- 从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
- 关于jquery动画中的淡入淡出的理解
- jQuery 常用动画
- jQuery简单使用整理
- jquery动画中显示、隐藏
- JQuery全局篇
- JSON和JSONP,也许你会豁然开朗,含jQuery用例
- jquery属性选择器应该注意的位置之二
- jquery UI datepicker时间控件的使用
- jquery 实现 点击按钮后倒计时效果,多用于实现发送手机验证码、邮箱验证码
- JQuery--50个必备的实用jQuery代码段.
- jquery中选择器需要注意的地方之一
- 了解了这些才能开始发挥jQuery的威力(转)
- jquery.validate运用和扩展
- jQuery的DOM操作实例(1)——选项卡&&Tab切换
- JQuery开发9-用户输入自动提示功能