模板引擎和Ajax

最新推荐文章于 2024-04-02 22:01:50 发布

初見驚鴻

最新推荐文章于 2024-04-02 22:01:50 发布

阅读量549

点赞数 1

本文链接：https://blog.youkuaiyun.com/honghaiash/article/details/101703365

版权

模板引擎 : 将数据转化成html格式的字符串
1.准备数据
2. 下载, 导入js文件
3.创建模板在html页面中创建

 <script type="text/template"></script>

4.把数据使用在模板中在js中 template(要关联模板的id, 数据:要求–>必须是对象)
5.这个方法会返回html格式的字符串
注意 : 模板内部中不能使用全局变量

<!--原生的模板引擎文件-->
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/artTemplate/template-native.js"></script>
<script type="text/javascript">
 
    //解决模板不能访问全局对象的问题
    template.helper("getConsole", function () {
        return console;
    })
    var data = [
        { "username": "张三", "password" : "1237756" ,"age": 20},
        { "username": "张四", "password" : "123886" ,"age": 21},
        { "username": "张五", "password" : "123996" ,"age": 22},
    ]
    var html = template("template", {list : data})
    console.log(html);
    $("table").html(html);
</script>

创建模板

<script id="template" type="text/template">
    <% getConsole().log(list);  %>
    <% jquery()(list).each(function(i, item){%>
    <tr>
        <td><%=i+1%></td>
        <td><%=item.username%></td>
        <td><%=item.password%></td>
        <td><%=item.age%></td>
    </tr>
    <% }) %>
</script>

效果图
在这里插入图片描述

Ajax

全称：Asynchronous JavaScript and XML（异步的js和XML）
用途：通过JS语言向服务器请求数据。

什么是ajax?---->js向服务器请求数据，实现异步请求，局部刷新。

原生js中ajax使用步骤

第一步：创建对象

 var xhr = new XMLHttpRequest();

为了兼容低版本的IE浏览器，需要实例化

 var xhr = new ActiveXObject(‘Microsoft.XMLHTTP’);

因此，常用的写法是

if (window.XMLHttpRequest){
//谷歌、火狐、IE11
    var xhr=new XMLHttpRequest();
} else {
//ie8及之前版本
    var xhr=new ActiveXObject('Microsft.XMLHTTP')
}

第二步：准备及发送，利用对象的open()和send()方法，发送数据

xhr.open(‘请求方式’,’请求地址’,’同步或异步’);

get请求数据

xhr.open('get',url,true);
xhr.send();

post请求数据
注意：如果是post提交,在发送请求之前设置一个头

xhr.open('post',url,true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
var param='username='+username;
xhr.send(param);

第三步：回调函数onreadystatechange()

xhr.onreadystatechange=function () {
      if (this.readyState!=4) return;
      console.log(this.responseText);
 }

xhr对象的相关属性
xhr.readyState的值分别代表的含义：

0 xhr对象初始化
1 执行发送动作
2 服务器端数据已经完全返回
3 数据正在解析
4 数据解析完成，可以使用了

xhr.status

200 数据相应正常
404 没有找到资源
500 服务器端错误

服务器返回数据类型

xhr.responseXML：返回XML格式数据。（不常用）
xhr.responseText：返回字符串格式数据。

ajax中的同步与异部：

发送send()方法后，去服务器端请求数据，此时代码接着在主线程中往下执行，那么就是异步（非阻塞）。如果请求数据后，一直等待着数据从服务器端返回，才再次执行，此时就是同步（阻塞）

jQuery的Ajax使用

$.get(url, [data], [callback], [type])
$.post(url, [data], [callback], [type])

其中：

url：代表请求的服务器端地址
data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）
callback：表示服务器端成功响应所触发的函数（只有正常成功返回才执行）
type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）
常用的返回类型：text、json、html等

$.ajax( { option1:value1,option2:value2… } );

$.ajax({
        type:'请求类型get/post',
        url:'请求地址',
        data:'向服务器端传递的参数',
        dataType:'要求服务器端返回的类型,常用text和json,
        success:function(data){},//'请求成功的回调函数',
        error::function(data){},//'请求失败的回调函数',
		
		//不常用
        async:'是否异步，bool，默认是true代表异步,
        complete(xhr,status):'请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）'
 })

ajax请求数据，必须遵循同源策略

同源策略