@楠薇薇 来学习

聪明小米

@楠薇薇 来学习
承接上文
今天看到有个论坛网友咨询我个问题，那么我们就来解决一下
### 开始
![]()
我们先拿到上一篇文章的代码复制下来
![image.png]()
新建 img标签和p标签，然后写点样式
![image.png]()
回到JavaScript部分
![image.png]()
从这一块续写，首先我们知道
图片的连接是：`response.data.url`
那么只要把 img的标签里的src 替换成这个链接就行了，我们开始。
我们先用原生的写法来写。
先获取亓素
![image.png]()
![image.png]()
把img标签 和 p 标签 存在简短的变量中
然后打印一下img
![image.png]()
点开
搜索 src
![image.png]()
我们先改一下src
![image.png]()
![image.png]()
然后我们打印pic.src
![image.png]()
![image.png]()
也就是说，修改pic.src 就等于修改 img里面的src
然后我们到ajax里面去草作
![image.png]()
![image.png]()
成功修改，然后我们网友要求的是 旁边还有个链接。
那么就修改一下p标签
我们先到p标签随便输入点字
![image.png]()
然后打印P标签
![image.png]()
![image.png](
看到有两个，
`innerHTML` `innerText`
关于这两个是什么意思，我先不解释，我们先直接测试。
我们先测试 innerText 也就是 `text.innerText`
怎么测试呢？
给它赋值，我们给它赋值
![image.png]()
然后打印
![image.png]()
![image.png]()
然后我们在测试innerHTML 方便对比 我多加了一个p标签
)
没有区别，那么我这边再加一个需求，我需要在打印 你好 的时候 旁边+一个按钮。那么就是这样
这下，应该就能看出 innerText和innerHTML的区别了吧，innerHTML能够输出Html标签，而innerText只能输出纯文本。所以 我们我们暂时没有输出html标签的需求，所以我们用innerText就行，到ajax里面草作。
)
测试完毕。
附上全部代码
```

• <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>演示 - Nice</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
  <style>
  img {
  width: 200px;
  height: 200px;
  border-radius: 12px;
  }
  p {
  background-color: #EEE;
  font-size: 21px;
  }
  </style>
  <img src="https://q1.qlogo.cn/g?b=qq&nk=477737679&s=100&t=" alt="">
  <p>测试</p>
  <p class="p2">测试</p>
  <script>
  var pic = document.querySelector('img');
  var text = document.querySelector('p');
  var text2 = document.querySelector('.p2');
  //2.写全局粘贴事件
  $('html').on('paste', function (e) {
  //3.获取文件并打印
  var fil = event.clipboardData.items[0].getAsFile();
  //4.新建构造函数,存到data中
  var data = new FormData();
  //4.1把 fil 放到 data 里面去
  data.append("image",fil);
  //5. 发起Ajax请求上传文件
  $.ajax({
  method: 'POST',// 请求类型 POST
  url: 'https://ddp.ink/api/upload', // api 地址
  data: data, //data是存的图片数据
  dataType: "json",//服务器返回类型为 json
  //contentType 内容的编码类型。为 false 时将不设置 Content-Type。
  contentType: false,
  //processData 是否把传递进来的数据转换成查询字符串发送 设置false 否。
  processData: false,
  //success 成功返回
  success: function (response) {
  //打印成功后返回的数据
  console.log(response);
  console.log(response.data.url);
  pic.src = response.data.url;
  text.innerText = response.data.url;
  }
  });
  });
  </script>
  </body>
  </html>
  

复制代码

超级小爱

跟着截图敲能跑通，但只换 src 不管宽高，换张图页面就跟着蹦——这教程当引子够用，别当模板抄进項目里。