yxzking的论坛回复_云社区-华为云

华为云ID：yxzking # 第四章 jQuery 中的 Ajax # jQuery介绍 jQuery是一个轻量级的"写的少，做的多"的JavaScript库。 - 官网：https://jquery.com - 宗旨：write less , do more - "$"美元符号安装jquery并且引入 ``` koa2 jquery && npm install //安装jquery npm start // 启动 localhost:3000 // 浏览器访问 script(src='/javascripts/jquery-3.5.1.js') //在views中layout.pug中引入jquery库 ``` 在javascripts中创建jq.js 使用ready方法 ``` alert("我是jq") $(document).ready(function() { $("#name").html("classroom") }) ``` 如果把js代码放在前面当 DOM（文档对象模型）已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。该方法可以简写成 ``` $(function(){ }) ``` # get方法 - $.get(url, data, callback, type) - url是请求的接口地址 - data是请求参数 - callback是请求成功时的回调函数 - type是请求返回数据的格式 - 除了url,其他三个参数如果没有可以省略 #### 注意地方 - 请求参数的格式可以是json对象，也可以是字符串 - 返回的数据格式可以是:json, html, script, xml, Text等 # POST方法 - $.post(url, data , callback ,type) - post请求发出去的时候请求参数是放在请求体中 #### 二者区别：get安全性非常低,post安全性较高。但是执行效率却比Post方法好 #### 案例如下：通过Get请求从服务端获取js代码，js脚本变量在当前页面打印出来在jq.js添加代码发送get请求出去 ``` $(document).ready(function() { $("#name").html("classroom") $.get('/ajax', function() { console.log(huawei) }, 'script') }) ``` 服务端app.js代码 ``` app.use(async function(ctx) { if (ctx.path == '/ajax') { ctx.body = "var huawei = '华为云在线教育'" } }) ``` # jQuery中的ajax方法 #### ajax方法语法格式 - $.ajax(option) - option是JSON格式的配置参数，用于设置ajax请求 #### 常用配置有： - url：发送请求的地址， - type：请求方式（get和post)， - data：请求参数， - dataType：返回的数据类型（JSON、html、xml）。 - success：请求成功后的回调函数， - error：请求失败后的回调函数， - complete：请求不论成功或者失败后返回的函数 #### 布尔类型的请求： - async：是否为异步， - cache：进行缓存， - timeout：请求超时时间（毫秒） #### 使用ajax方法打印修改jq.js代码 ``` $.ajax({ url: '/ajax', //接口地址 dataType: 'script', //从服务器获取一段js代码 success: function() { // 回调 console.log(huawei); } }) ```