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>