ajax 关于响应类型
发布时间：2020-12-16 02:58:53 所属栏目：百科 来源：网络整理
导读：!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"htmlhead titleTitle/title/headbodyscript var xhr = new XMLHttpRequest() xhr.open(‘GET‘,‘test.php‘) xhr.send() // 我们通过代码告诉请求代
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title>Title</title></head><body><script> var xhr = new XMLHttpRequest() xhr.open(‘GET‘,‘test.php‘) xhr.send() // 我们通过代码告诉请求代理对象，服务端响应给我们的是 JSON xhr.responseType = ‘json‘ xhr.onreadystatechange = function () { if (this.readyState !== 4) return console.log(this.response) // this.response 获取到的结果会根据 this.responseType 的变化而变化 // this.responseText 永远获取的是字符串形式的响应体 }</script><!--AJAX 动态表格渲染--><table id="demo"></table><!-- script 标签的特点是 1. innerHTML 永远不会显示在界面上 2. 如果 type 不等于 text/javascript 的话，内部的内容不会作为 JavaScript 执行--><script id="tmpl" type="text/x-art-template"> {{each comments}} <!-- each 内部 $value 拿到的是当前被遍历的那个元素 --> <tr> <td>{{$value.author}}</td> <td>{{$value.content}}</td> <td>{{$value.created}}</td> </tr> {{/each}}</script><script src="template-web.js"></script><script> var xhr = new XMLHttpRequest() xhr.open(‘GET‘,‘test.php‘) xhr.send() xhr.onreadystatechange = function () { if (this.readyState !== 4) return var res = JSON.parse(this.responseText) // 模板所需数据 var context = { comments: res.data } // 借助模板引擎的API 渲染数据 var html = template(‘tmpl‘,context) console.log(html) document.getElementById(‘demo‘).innerHTML = html // 1. 选择一个模板引擎 // https://github.com/tj/consolidate.js#supported-template-engines // 2. 下载模板引擎JS文件 // 3. 引入到页面中 // 4. 准备一个模板 // 5. 准备一个数据 // 6. 通过模板引擎的JS提供的一个函数将模板和数据整合得到渲染结果HTML // 7. 将渲染结果的HTML 设置到 默认元素的 innerHTML 中 // var tmpl = ‘{{if user}}<h2>{{user.name}}</h2>{{/if}}‘ // // 为什么不在JS变量中写模板？ // 1. 如果将模板写到JS中，维护不方便，不能换行，没有着色 // 为什么使用script标记 // 1. script不会显示在界面 }</script></body></html>
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |