前端与后端交互的方法


方法一:原生Ajax

function delete1(str1) {
            var xmlhttp;
            if (str1 == "") {
                document.getElementById("test_id").innerHTML = "";
                return;
            }
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            }
            else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            var u_id = str1.split('deleteID')[1];
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                }
            }
            xmlhttp.open("GET", "icinga/host/delete/?host=" + u_id, true);
            xmlhttp.send();
        }
<td>
       <button id="deleteID{{ host.attrs.name }}" onclick="delete1(this.id)"
       class="btn btn-primary btn-sm demo3">删除
       </button>
</td>

方法二:jQuery ajax

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
$(document).ready(function(){
  $("#b01").click(function(){
  htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
  $("#myDiv").html(htmlobj.responseText);
  });
});
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button id="b01" type="button">Change Content</button>

方法三:axios

https://www.kancloud.cn/yunye/axios/234845、

http://www.axios-js.com/zh-cn/docs/

方法四:fetch

https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch