ajax的經常使用函數；

時間 2020-09-29

標籤 ajax 經常使用函數欄目 Ajax 简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>javascript

<h1>The Jquery ajax</h1>
<fieldset>
    <legend>jquery</legend>
    <button onclick="doGet()">$get(...)</button>
    <form>
        輸入:<input type="text" name="name"> <input type="button"
            onclick="doPost()" value="提交 ">
    </form>

    <span id="resultId"></span>
</fieldset>
<!-- 引入jquery包 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
    
    1.這個是get提交函數；
    function doGet() {
        //請求url
        var url = "/jquery/doAjaxGet";
        //請求參數
        var params = "msg=hello jquery ahax get method";//將代碼轉爲大寫的字母
        //發送異步請求
        $.get(url, params, function(result) {
            //document.querySelector("#resultId").innerHTML =result;
            $("#resultId").html(result);//
        })
    }
    
   
   2.post提交函數
    function doPost() {
        //請求url
        var url = "/jquery/doAjaxPost";
        //請求參數
        var name = document.forms[0].name.value;//獲取name的值；
        var params = "name=" + name;//將代碼轉爲大寫的字母
        //發送異步請求
        $.post(url, params, function(result) {
            //document.querySelector("#resultId").innerHTML =result;
            $("#resultId").html(result);//
        })
    }

    
    
    3.這個是ajax提交函數
    function doAjax() {
        //1.定義請求的url
        var url = "doAjaxGet";
        //2.定義請求的參數
        var params = "msg=hello jquery ajax request";
        //3.發送異步Get請求
        //這裏的$符號爲jQuery中的一個對象
        $.ajax({
            //左邊的東西是系統定義的不能隨便亂改 ；
            type : "GET",//能夠省略默認爲get請求
            url : url,
            data : params,//無需向服務端傳參時能夠不寫
            async : true,//能夠補寫（由ajax函數neibu基於返回值進行匹配處理）
            success : function(result) { //處理服務端返回的正常信息
                $("#result").html(result);
            },
            error : function(xhr) {//處理服務端返回的異常信息
                console.log(xhr.statusText);
                $("#result").html(xhr.statusText);
            }
        })
    }
    
    
   
   4.這個是load提交函數
    function doLoad() {
        //1.定義請求的url
        var url = "doAjaxGet";
        //2.定義請求的參數
        var params = "msg=hello jquery ajax request";
        //3.發送異步Get請求
        //經過load函數向服務端發送異步請求，將服務端響應的結果異步更新到
        //resultId對應的位置
        $("#result").load(url);//
    }
    
</script>

</body>
</html>html