Ajax和template简单介绍

`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

    
        
        
        
        
    

    
        
通过 AJAX 获取Json串

获取内容

<2>
效果

Paste_Image.png

客户端

Paste_Image.png

服务端

Paste_Image.png

Paste_Image.png

(2)Ajax提交数据:

Paste_Image.png

Paste_Image.png

客户端:


    
        
        
    
    
        

            账号:

            密码:

            
        
    
    
    

服务端(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.写一个加载的模板

3.给一个容器，作为数据的填充

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。