双11狂欢大促

盲盒赢 定制羽绒服

开启惊喜盲盒，抽取你的专属好礼

— 惊喜奖品抢先看 —

超级年卡50元券

周边70元券

手机支架

一拖三数据线

雨伞

运动毛巾

电动牙刷

VIP月卡

机械键盘

定制羽绒服

超级年卡50元券

周边70元券

手机支架

一拖三数据线

雨伞

运动毛巾

电动牙刷

VIP月卡

机械键盘

定制羽绒服

个人技术总结-Ajax实现前后端交互

2023-06-08 19:52:01 566 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

方然frontier 墨衍会员 · AI 创作全网分发关注 + 加入社区

Ajax实现前后端交互这里的前后端交互主要以，前段ajax技术发送.php文件地址和.php文件建立连接；php接收前端发送的数据放在对应变量中，然后以mysql地址连接mysql做相应操作，接着把mysql改变后的数据返给ajax；ajax接收数据并通过js渲染页面。一般网站的数据处理分三层：表示层、业务层、数据层表示层：可以用HTML代码，CSS/Javascript代码来实现等。业务层：这层是负责处理数据... 阅读详情

这个作业属于哪个课程	软件工程-23年春季学期
这个作业要求在哪里	软件工程实践总结&个人技术总结
这个作业的目标	<个人技术总结>
其他参考文献	《构建之法》

一、技术概述

运用vue.js Ajax实现前后端交互。我们小组是采用的vue技术来实现前端，其中前后端交互的部分，我们选择使用Ajax技术来向后端发送post和get请求。

二、技术详述

1.发送post请求附带参数

发送Post请求时，参数可直接赋在请求中

this.$axios.post('http://124.71.33.160:8000/reward/getRewardDetail', {
      r_id: this.r_id,
    })
       
    var socket = new SockJS('http://124.71.33.160:8000/ws');
    this.stompClient = Stomp.over(socket);
    this.stompClient.connect({}, this.onConnected, this.onError);
  },

2.发送Get请求附带参数

发送Post请求时，参数需用params打包

this.$axios.get('http://124.71.33.160:8000/Worker/getApplyReward', {
            params: {
              u_id: this.user.u_id
            }
          })
             
        },

3.获取返回值

用'.then(response=>{}'指向返回值

 .then(response => {
                // console.log(response.data[0])
                // 处理响应数据

                this.Tasks = response.data.data;
                console.log(response.data);
              })
              .catch(error => {
                // 处理错误
                console.log(error);
              });