他的回复:
华为id: hw21424327打卡ajax的第四章和第五章第四章 jQuery 中的 AjaxjQuery 介绍jQuery 是 JavaScript 的一个库，它极大地简化了 JavaScript 编程。它广泛地使用一种$符号。一些 JS 是对 DOM 元素的操作，然而这些 JS 代码在执行到它时，DOM 还未加载，这个时候就会出现错误，正确的做法是把这个 JS 写到标签后，或者在 JS 中使用 ready方法等待 DOM 加载完才去执行 DOM 相关的 JS 操作。alert("hello"); $(document).ready(function(){ $("#name").html("hello world");})extends layout block content block(id="name")jQuery 中的 get 与 post 方法jQuery中的get方法使用时写为$.get(url, data, callback, type)，括号中是它的参数，除了url其余三个可以省略。这四个参数详解为：url：请求的地址data：请求的参数callback：请求成功时的回调函数type：请求返回的数据格式请求参数可以是 JSON，可以是字符串。返回的数据格式可以是：JSON，HTML，Text等。post方法使用时写为$.post(url, data, callback, type)，post请求参数放在请求体中，其余用法与get方法大致相同。案例$(function){ $("#name").html("classroom"); $.get("/ajax", function(){ console.log(variable); },"script")}需要修改koa中app.js的内容，这样get请求成功时才能打印出variable（app.js是服务器的内容，我们需要使用get方法访问服务器，并得到相应数据，这里是一个模拟）。koa中的app.js增加下述内容：app.use(async function(ctx){ if(ctx.path=="/ajax"){ ctx.body="var variable='hello world'"; }})jQuery 中的 ajax 方法jQuery的ajax方法是post和get方法底层方法。它使用的格式为$.ajax(option)，option是JSON格式的配置参数，用于设置ajax的请求。常用配置有：url：发送请求的地址，type：请求方式（get和post)，data：请求参数，dataType：返回的数据类型（JSON、html、xml）。success：请求成功后的回调函数，error：请求失败后的回调函数，complete：请求不论成功或者失败后返回的函数布尔类型的请求：async：是否为异步，cache：进行缓存，timeout：请求超时时间（毫秒）案例（对上节get方法的内容使用ajax方法重写）$.ajax({ url: '/ajax', dataType: 'script', success: function(){ console.log(variable); }})第五章 AJAX实战案例第一节 登陆页面案例Node.js初始化项目 koa2 login cd login && cnpm install npm startviews/index.pugblock content h1 登陆华为帐号 div 华为帐号： input(type='text' id='account') div 帐号密码： input(type='password' id='pwd') button(type='button' id='btn') 登陆 加载资源login.js 登陆提交及ajax请求发送views/layout.pug block content javascripts/login.js //alert('login') // 测试login.js是否能在首而成功加载 var btn = document.getElementById("btn");var account = '';var pwd = '';btn.onclick = function(){ account = document.getElementById("account").value; pwd = document.getElementById('pwd').value; ajax({ type: 'post', url: '/login', data:{ account: account, pwd: pwd }, success: function(data){ alert(data) } }) function ajax(opt){ var defaultParam = { type: 'get', url: '#', data: {}, async: true, success: function(){} } for(var key in opt){ defaultParam[key] = opt[key]; } var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); } var paramStr = ""; for(var k in defaultParam.data){ paramStr += k + '=' + defaultParam.data[k] + '&'; } paramStr = paramStr.substr(0,paramStr.length - 1); console.log(paramStr); if(defaultParam.type == 'get'){ xhr.open(defaultParam.type,defaultParam.url + '?' + paramStr,defaultParam.async); xhr.send() }else{ xhr.open(defaultParam.type,defaultParam.url,defaultParam.async); // post请求 xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); xhr.send(paramStr) } xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ defaultParam.success(xhr.responseText); } } } }}项目接口配置在login.js中我们自定义ajax()方法中url对应的接口，在此配置app.js// 未尾添加app.use(async function (ctx){ if(ctx.path == "/login"){ if(ctx.request.body.account == 'zhou' && ctx.request.body.pwd == '123'){ ctx.body = '登陆成功 ！' }else{ ctx.body = '登陆失败 ！' } }})module.exports = app
