做网站一般分几种,软件网站设计,长沙百度网站推广公司,零食销售网站开发与设计Ajax工作流程Ajax:在不刷新页面的情况下向服务器请求数据1.创建XMLHttpRequest对象(俗称小黄人)var xhr new XMLHttpRequest();XMLHttpRequest #xff1a; http请求对象#xff0c;负责实现ajax技术2.设置请求xhr.open(get, url);url:服务器地址3.发送请求xhr.send();4.注册…Ajax工作流程Ajax:在不刷新页面的情况下向服务器请求数据1.创建XMLHttpRequest对象(俗称小黄人)var xhr new XMLHttpRequest();XMLHttpRequest http请求对象负责实现ajax技术2.设置请求xhr.open(get, url);url:服务器地址3.发送请求xhr.send();4.注册回调函数xhr.onload function () {console.log(xhr.responseText);}xhr.responseText:请求返回的内容这个函数不是立即执行的而是等服务器把数据响应返回才会执行(PS什么时候执行取决于你的网速快慢)get请求案例:英雄外号接口文档查询英雄外号请求地址https://autumnfish.cn/api/hero/simple请求方法get请求参数name1.get传参格式url?keyvalue2.示例 https://autumnfish.cn/api/hero/simple?name亚索Documenttitletext-align: center;}.name {color: deepskyblue;}.title {color: red;}stylehead英雄查询h1span---spanh2bodyhtml/*- 请求地址https://autumnfish.cn/api/hero/simple- 请求方法get- 请求参数name- 响应内容英雄外号*//*思路分析1.给search按钮注册点击事件2.获取hero输入框文本3.通过ajax调用接口参数为输入框文本4.数据返回之后显示到title标签中*///1.注册点击事件$(.search).on(click, function () {//2.获取输入框文本var heroName $(.hero).val();//3.ajax请求数据//(1).实例化ajax对象var xhr new XMLHttpRequest();//(2).设置请求方法和地址//get请求的数据直接添加在url的后面 格式是 url?keyvaluexhr.open(get, https://autumnfish.cn/api/hero/simple?name heroName);//(3).发送请求xhr.send();//(4).注册回调函数xhr.onload function() {$(.title).text(heroName : xhr.responseText);};});scriptpost请求案例:用户注册请求地址https://autumnfish.cn/api/user/register请求方法post请求参数usernamepost请求1.需要设置请求头(固定语法)xhr.setRequestHeader(‘Content-type’,‘application/x-www-form-urlencoded’)* 注意这是固定格式错一个字母都不行强烈建议复制粘贴2.使用xhr的send方法发送参数 xhr.send(‘参数名参数值’);* 注意不要加前面的?Documenttitlecolor: red;}stylehead用户注册h2spanbodyhtml/*请求方法get和post区别 传参方式不同get请求 直接在url后面拼接参数* 参数在url中安全性不高post请求1.需要设置请求头(固定语法)xhr.setRequestHeader(Content-type,application/x-www-form-urlencoded)* 注意这是固定格式错一个字母都不行强烈建议复制粘贴2.使用xhr的send方法发送参数 xhr.send(参数名参数值);* 注意不要加前面的?*//*用户注册- 请求地址https://autumnfish.cn/api/user/register- 请求方法post- 请求参数username1. 注册点击事件 : submit2. 获取输入框文本username3. 通过ajax调用接口参数为输入框文本4. 数据返回之后显示到info中*/$(function () {//1.注册点击事件$(.submit).on(click, function () {//2.获取输入框文本var username $(.username).val();//3.ajax发送请求//(1).实例化ajax对象var xhr new XMLHttpRequest();//(2).设置请求方法和地址xhr.open(post, https://autumnfish.cn/api/user/register);//(3).设置请求头(post请求才需要设置)xhr.setRequestHeader(Content-type,application/x-www-form-urlencoded);//(4).发送请求 参数格式 keyvaluexhr.send(username username);//(5).注册回调函数xhr.onload function () {$(.info).text(xhr.responseText);};});});script请求方法get和post区别传参方式不同get请求直接在url后面拼接参数* 参数在url中安全性不高post请求1.需要设置请求头(固定语法)xhr.setRequestHeader(‘Content-type’,‘application/x-www-form-urlencoded’)* 注意这是固定格式错一个字母都不行强烈建议复制粘贴2.使用xhr的send方法发送参数 xhr.send(‘参数名参数值’);* 注意不要加前面的?JSON数据格式解析JSON格式通用的数据格式很多语言都支持不同语言中解析他的方式不同js中对应JSON的使用 2个方法JSON是一种数据格式本质是字符串 作用 解决跨平台的问题一般服务器返回的数据都是json格式JSON格式特点 a. 属性名和属性值都是字符串(需要使用双引号包括)b. 如果属性值是布尔类型和数字类型则可以省略字符串.JSON格式与JS对象互转JSON-JS : JSON.parse(json数据)JS-JSON JSON.stringify(js对象)模板引擎art-template模板引擎art-template使用流程1.导入模板引擎art-template.js文件2.写HTML模板模板写到script标签中必须要设置id必须要设置type(一般为 type“text/html”)3.调用art-template的官方API开始解析模板var htmlStr template(tpl, jsonObj.data);第一个参数 html模板的id名第二个参数 要渲染的数据返回值 渲染数据之后的html字符串4.将解析好的模板显示到页面document.body.innerHTML htmlStr;模板引擎语法介绍输出标准语法{{value}}{{data.key}}{{data[key]}}{{a ? b : c}}{{a || b}}{{a b}}原始语法条件标准语法{{if value}} ... {{/if}}{{if v1}} ... {{else if v2}} ... {{/if}}原始语法...... ...循环标准语法{{each target}}{{$index}} {{$value}}{{/each}}原始语法ajax 项目经验总结1.模板引擎支持字符串的方法 indexOf() split()2.如果一段代码在多个地方执行,可以使用函数封装可以自己写一个函数封装事件本事就是一种函数封装,可以主动触发事件$().click$().trigger(‘click’)3.loading加载效果布局思路:使用gif动图实现实现思路:ajax之前出现 ajax响应后消失4.模板引擎的数据可以是ajax响应返回的,也可以是自己写的5.模板引擎的数据并不是全部都是替换操作html() , 也有可能是append()添加操作。取决于需求6.非空判断与文本清空非空判断:ajax发送之前文本清空:ajax发送之后7.文件预览(固定方式) 8.文件上传(固定方式) 9.页面间传值sessionStorage :适合传多个数据window.location.href:适合传少量数据
