网站首页 > 技术文章 正文
文章目录
- 前言
- 1.jquery的两种按钮点击和发送请求:
- 2.vue中的按钮定义和axios请求:
- 总结
前言
现在都是前后端分离的开发,很多时候可能后端不会再写html,jquery了,但是一些场景之下后端还是需要掌握下前端的知识,以备不时之需。我曾经在跟前端联调的过程当中遇到前端的支付问题,前段无法解决,直接写的demo页面,还有一些跨域问题,自己写简单的前端界面定位问题结局问题的。本篇来进行总结下我认为后端必须掌握的前端技能。
1.jquery的两种按钮点击和发送请求:
先上代码:
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$(function () {
$("#btn").click(function () {
alert("我是一个按钮哈");
// sendData();
});
$("body").delegate("#btn2", "click", function () {
alert("按钮点击了");
// sendData();
});
})
//外面封装方法
function sendData(){
$.ajax({
type: "POST",
url: "http://localhost:9090/debug/pet/hello/sendTestJson",
contentType: "application/json;charset=utf-8", //发送信息至服务器时内容编码类型。
data: JSON.stringify(arg),
dataType: 'json',
success: function (data) {
alert("保存....");
},
error: function (data) {
alert("失败...");
}
});
}
</script>
</head>
<body>
<input type="button" value="我是一个按钮" id="btn" />
<input type="button" value="我是第二个按钮" id="btn2" />
</body>
好久没写前端了,没想到还能啪啪的写出来,对于jquery可能甚至很多前端同学已经不知道了,但是对于老码农来说仍是满满的回忆,相信我上面的代码你应该能改看懂逻辑。
2.vue中的按钮定义和axios请求:
上代码:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<div>
<button v-on:click="clickMe()">巴拉拉小魔仙,点击就送</button>
<button v-on:click="click2()">按钮2点击</button>
</div>
<div v-for="(value,key) in helloData">
{{ key }} : {{ value }}
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
helloData: {}
},
methods: {
click2:function(){
alert("按钮2点击了");
},
clickMe: function () {
alert("发送请求");
// var obj = this;
// axios.get('http://localhost/ms/balala/1').then(function(response){
// var data = response.data.slice(10,-1);
// let a = JSON.parse(data);
// obj.helloData = a;
// }).catch(function (error) {
// console.log(error);
// });
// var axios = require('axios');
var data = JSON.stringify({
"mobile": "18511585294",
"password": "qaz123456"
});
var url=url;//需要替换成你的url
var config = {
method: 'post',
url: url,
headers: {
'X-Request-BuriedPoint': 'activityCode=SC21HD000108;inviteCode=GS001878',
//'Content-Type': 'application/x-www-form-urlencoded'
'Content-Type': 'application/json'
},
data : data
};
axios(config)
.then(function (response) {
alert("结果:"+response.code);
console.log(JSON.stringify(response.data));
})
.catch(function (error) {
console.log(error);
});
}
}
})
</script>
</body>
上面就是vue的简单的构造和方法请求,逻辑都是比较简单的逻辑,能够和后端实现接口的交互。
总结
上面就是我梳理的后端必须掌握的前端技巧,在线引入jquery,在线引入vue、axios等等实现和后端的交互js逻辑,如果你工作当中有需要就保留下来吧,如果想跟我有更多的交流,欢迎添加公众号:Java时间屋 进行交流。
猜你喜欢
- 2024-10-17 简书看到的技术文档,非常详细解释了axios技术,值得收藏
- 2024-10-17 全面分析前端的网络请求方式 前端网络请求框架
- 2024-10-17 一步一步学测试平台开发-Vue restful请求
- 2024-10-17 前端面试29:什么是fetch?fetch与20年前的ajax有什么不同?
- 2024-10-17 手把手教你全面分析前端如何网络请求方式
- 2024-10-17 实战:整合VueJS、Axios和Jacksons实现JAVA EE 下的数据持久化
- 2024-10-17 前端基础面试:axios的特点和基本使用方法以及拦截器的使用方法
- 2024-10-17 在React项目中使用Axios react-intl
- 2024-10-17 前端金三银四面试必备八股文——JavaScript
- 2024-10-17 Axios是什么?用在什么场景?如何使用?
你 发表评论:
欢迎- 最近发表
- 标签列表
-
- oraclesql优化 (66)
- 类的加载机制 (75)
- feignclient (62)
- 一致性hash算法 (71)
- dockfile (66)
- 锁机制 (57)
- javaresponse (60)
- 查看hive版本 (59)
- phpworkerman (57)
- spark算子 (58)
- vue双向绑定的原理 (68)
- springbootget请求 (58)
- docker网络三种模式 (67)
- spring控制反转 (71)
- data:image/jpeg (69)
- base64 (69)
- java分页 (64)
- kibanadocker (60)
- qabstracttablemodel (62)
- java生成pdf文件 (69)
- deletelater (62)
- com.aspose.words (58)
- android.mk (62)
- qopengl (73)
- epoch_millis (61)
本文暂时没有评论,来添加一个吧(●'◡'●)