`1注意：
1.用到ajax必须得导入jquery的包,eg:jquery-1.7.2.min.js
2.用template.js，在jsp页面中会有冲突，
jsp中写法：
${'${'}Name}
${'${'}ReleaseYear}
html中写法：
${Name}
${ReleaseYear}
3.ajax跨域访问会出现一个问题，导致请求不到数据
错误信息：[Web浏览器] "XMLHttpRequest cannot load http://10.0.21.80:8080:8080/WebServiceDemo2/servlet/give. Cross origin requests are only supported for HTTP." /DemoServer/webservice.html (0)
在servlet里面加一句话就好了，折腾了不少时间
添加：response.setHeader("Access-Control-Allow-Origin", "*");
一
(1)ajax请求数据:
<1>
Paste_Image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<script>
</script>
</head>
<body>
<h2 id="h">通过 AJAX 获取Json串</h2></div>
<button id="b01" type="button" onclick="sendRequest()">获取内容</button>
</body>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function sendRequest() {
alert("11");
$.ajax({
// url: "http://localhost:8080/ServerDemo/login.do", /*localhost不可以在移动端用*/
// url: "http://192.168.134.2:8080/ServerDemo/login.do",
url: "http://askh5.com/try/data/starJson",
// url: "http://10.0.20.2:8080/ServerDemo/login.do" /*不可用*/
type: "GET",
dataType: "json",
data: "",
complete: function(result) {
alert(result.responseText);
}
});
}
</script>
</html>
<2>
效果
Paste_Image.png
客户端
Paste_Image.png
服务端
Paste_Image.png
Paste_Image.png
(2)Ajax提交数据:
Paste_Image.png
Paste_Image.png
客户端:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
账号:<input type="text" name="_user_name" id="_user_name"/><br>
密码:<input type="text" name="_user_pwd" id="_user_pwd"/><br>
<input type="submit" name="_submit" id="_submit" value="提交"/>
</form>
</body>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
$("#_submit").click(function() {
alert("1");
var user_name = $("#_user_name").val();
var user_pwd = $("#_user_pwd").val();
$.ajax({
url: "http://192.168.134.2:8080/ServerDemo/login.do",
data: { userName: user_name, password: user_pwd },
type: "GET",
datatype: "html",
success: function(data){
// alert(data);
}
});
});
});
</script>
</html>
服务端(java)
public class LoginServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
super.doGet(req, resp);
System.out.println("进入Get方法");
String user_name = new String(req.getParameter("userName").getBytes("ISO-8859-1"), "UTF-8");
String pass_word = new String(req.getParameter("password").getBytes("ISO-8859-1"), "UTF-8");
System.out.println("user_name="+user_name+" pass_word="+pass_word);
PrintWriter writer = resp.getWriter();
writer.write("错误");
writer.close();
}
}
二.
（1）
template绑定模板
1.需要两个包
jquery-1.7.2.min.js
jquery.tmpl.js
2.写一个加载的模板
<script id="movieTemplate" type="text/x-jquery-tmpl">
${Name}
${ReleaseYear}
<br>
</script>
3.给一个容器，作为数据的填充
<body>
<ul id="movieList"></ul>
</body>
4.数据准备(可以是Json获取的数据,后面讲)
var movies = [
{ Name: "The Red Violin", ReleaseYear: "1998" },
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
{ Name: "The Inheritance", ReleaseYear: "1976" }
];
5.绑定
模板 绑定(数据) 到 容器
$("#movieTemplate").tmpl(movies).appendTo("#movieList");
整体代码：
Paste_Image.png
效果：
Paste_Image.png
（2）名称+图片在手机模拟器上使用的例子(ajax+tmpl)
Paste_Image.png
<1>首先手机模拟器，访问servlet，跨域访问，在servlet里面添加
response.setHeader("Access-Control-Allow-Origin", "*");
<2>
这个地址访问不到 http://192.168.134.2:8080
而本地域可以访问 http://10.0.21.80:8080
服务端比较简单，上面都有说过的:
Paste_Image.png
客户端：
Paste_Image.png
注意：
1.有人会奇怪，为什么服务端不传递带有域的图片url过来呢？其实我这样做过，但是发现传递过来的数据，被解析成对象后，它的url属性已经不带有域了，所以只能尝试在src里面做拼接，幸运的是，这样还真可以。后面如果能找到更好的办法，我一定会再更新！
2.楼主之前做过安卓，对于图片加载过大OOM异常深恶痛绝。于是马上用了一张快1M的图片尝试，幸运的是，网页app开发，没有这种问题！如图：
Paste_Image.png
总结：ajax+tmpl非常好用而且强大！这两个东西搞定，加上webService传递数据，基本上一个简单的app显示效果是没问题的，如果要做功能开发，需要跟原生app应用相关的react native(简称RN)的api,或者Dcloud开源的HTML5+ SDK。
网友评论