JQuery中的Ajax,請求後臺接口返回指定數據的實例

Ajax基本概念

Ajax(Asynchronous JavaScript And XML)，異步 JavaScript 和 XML，用於異步請求數據，在不刷新網頁的情況下更新頁面數據，提升用戶體驗

Ajax優缺點

優點：

Ajax最大的優點就是能在不刷新整個頁面的情況下維持與服務器通信

使用異步的方式與服務器通信，不打斷用戶的操作

可將一些後端的工作移到前端，減少服務器與帶寬的負擔

Ajax使得界面與應用分離，也就是數據與呈現分離

缺點：

Ajax幹掉了Back與History功能，即對瀏覽器機制的破壞，在動態更新頁面的情況下，用戶無法回到前一頁的頁面狀態，因爲瀏覽器僅能記憶歷史紀錄中的靜態頁面

AJAX技術給用戶帶來很好的用戶體驗的同時也對IT企業帶來了新的安全威脅，Ajax技術就如同對企業數據建立了一個直接通道。這使得開發者在不經意間會暴露比以前更多的數據和服務器邏輯

對搜索引擎支持較弱

JQuery中的Ajax使用實例

$.ajax()方法

$(function(){
    $('#send').click(function(){
         $.ajax({
             type: "GET",
             url: "test.json",
             data: {username:$("#username").val(), content:$("#content").val()},
             dataType: "json",
             contentType: "application/x-www-form-urlencoded"
             async: true,
             cache: true,
             timeout: 5000,
             success: function (data) {},
             error: function () {},
             complete: function () {}
         });
    });
});

參數解釋

url String類型，請求的地址
type String類型，請求方式，一般爲get或者post請求，但是http的其他請求當然也可以
timeout Number類型，超時時間，單位爲毫秒
async Boolean類型，是否異步，默認設置爲true，所有請求均爲異步請求。如果需要發送同步請求，設置爲false
cache Boolean類型，是否從瀏覽器緩存中加載請求信息，默認爲true，表示會從瀏覽器緩存中加載請求信息
data Object或者String類型，發送到服務器的數據。如果已經不是字符串，將自動轉換爲字符串格式
dataType String類型，希望服務器返回的數據類型，如果不是，就轉化爲指定的數據類型，如果不指定，JQuery將自動根據http包mime信息返回responseXML或responseText，並作爲回調函數參數傳遞。可用的類型如下：

xml：返回XML文檔，可用JQuery處理

html：返回純文本HTML信息；包含的script標籤會在插入DOM時執行

script：返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。注意在遠程請求時（不在同一個域下），所有post請求都將轉爲get請求

json：返回JSON數據

jsonp：JSONP格式

text：返回純文本字符串

8. beforeSend Function類型，表示發送數據之前，進行的操作，例如想在發送數據之前設置請求頭

beforeSend: function(request) {
     request.setRequestHeader("Header", "x-www-***");
},

9. contentType String類型，發送信息至服務器時，內容編碼類型默認爲"application/x-www-form-urlencoded"

10. dataFilter Function類型，過濾數據（預處理數據），例如時間格式的預處理等，2個參數，參數一：Ajax返回的原始數據，參數二：dataType參數

dataFilter: function (data, type) {
    return data
}

11. global Boolean類型，默認爲true，表示觸發全局ajax事件，改爲false則不會觸發ajax全局事件

12. success Function類型，請求數據成功回調，2個參數，參數一：必需，服務器返回後經過dataType參數處理後的數據，參數二：可選，描述狀態的字符串

success: function (data, dataStatus) {}

13. error Function類型，請求數據成功回調，3個參數，參數一：必需，XMLHttpRequest對象，參數二：必需，錯誤信息，參數三：可選，捕獲的錯誤對象

error: function (XMLHttpRequest, status, error) {}

14. complete Function類型，只要請求數據完成就回調，不管成功不成功，2個參數，參數一：必需，XMLHttpRequest對象，參數二：可選，描述請求類型的字符串

complete: function (XMLHttpRequest, status) {}

15. jsonp String類型，在一個jsonp請求中重寫回調函數的名字。該值用來替代在"callback=?"這種GET或POST請求中URL參數裏的"callback"部分

16. username String類型，用於響應HTTP訪問認證請求的用戶名

17. password String類型，響應HTTP訪問認證請求的密碼

實例：

1.向後臺接口傳兩個參數activityTemplateNo, uiStyleNo ，後臺返回一個對象

function showRecentStyle(activityTemplateNo, uiStyleNo) {
	<%--var activityTemplateNo = '${activityTemplateStyle.activityTemplateNo}';--%>
	// alert("tempalte:" + activityTemplateNo);
	// var uiStyleNo = $('#uiStyleNo').val();
	// alert("style:" + uiStyleNo);
	$.ajax({
		type: "post",  //請求方式
		url: "/activity/activityTemplateStyle/getStyleInfo",   //後臺接口url
		data: {
			templateNo: activityTemplateNo,    // 傳遞的參數
			uiStyleNo: uiStyleNo
		},
		dataType: "json",  // 返回數據類型
		success: function (data) { 
		// if 返回的是List集合
		/*
                if(data.length == 0 || data == null || data == ''){
                      return;
                 }
		for(int i = 0; i < data.length; i++){
		    var perTr= data[i];
		    document.getElementById('popUpImg').src = perTr.popUpsUrl;   // 彈窗url
		}
                 */
			alert("data:" + data);
			if (data == null || data == '') {
				return;
			} else {
				var styleInfo = data;
				document.getElementById('popUpImg').src = styleInfo.popUpsUrl;
				document.getElementById('adBannerImg').src = styleInfo.adBannerUrl;
			}
		},
		error: function (date) {
			console.log(date);
		}
	})
}

2.前段傳遞相關參數，後臺保存

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/bootstrap/easyui.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/demo/demo.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">

    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/script/Calendar3.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/layer/layer.js"></script>

<table class="easyui-datagrid" id="datagriddata" title="信息列表" style="width:100%;height:600px;"
               data-options="rownumbers:true,
                            singleSelect:true,
                            collapsible:false,
                            url:'${pageContext.request.contextPath}/purchaseverify/informationlist',
                            method:'get',
                            toolbar: '#tb',
                            pagination:true,
                            pageSize:20,
                            pageList:[10,20,30,50,80,100,200]">
            <thead>
            <tr>
                <th data-options="field:'product'">product</th>
                <th data-options="field:'areaname'">areaname</th>
                <th data-options="field:'amount'">amount</th>
                <th data-options="field:'phone'">phone</th>
                <th data-options="field:'updateTime'" formatter="formatDatebox2">updateTime</th>
                <th data-options="field:'createTime'" formatter="formatDatebox2">createTime</th> 
            </tr>
            </thead>
            <tbody></tbody>
        </table>


<div id="button">
            <button type="button" class="btn btn-primary" style="margin-right:40px;" onclick="comeBack()">
                返回
            </button>
            <button type="button" class="btn btn-primary" style="margin-right:40px;" onclick="saveInformation()">保存更改</button>
            <button type="button" class="btn btn-primary" style="margin-right:40px;" onclick="removeRecord()" >移除信息</button>
</div>

function formatDatebox2(value) {
        if (value == null || value == '') {
            return '';
        }
        var dt;
        if (value instanceof Date) {
            dt = value;
        } else {
            dt = new Date(value);
        }
        return dt.format("yyyy-MM-dd hh:mm"); //擴展的Date的format方法(上述插件實現)
    }

function saveInformation(){
    var rows = $('#datagriddata').datagrid('getSelections');
    var item = rows[0];
    var id = item.id;
    var productList = [];
    var formatList = [];
    var amountList = [];
    
    var linker = $("input[name ='linker']").val();
    var phone = $("input[name ='phone']").val();        
    var area = item.areaname;        
    var province = $(".province>option:selected").text();       
    var city = $("select[name = 'city' ]").val();       
    $("input[name='product']").each(function () {
        productList.push($(this).val());
    });               
    $("input[name='productFormat']").each(function () {
        formatList.push($(this).val());
    });
    console.log('formatList:'+formatList);
    $(" input[name='amount']").each(function () {
        amountList.push($(this).val());
    });       
    var purchasestyle = $("input[name='purchasestyle']:checked").val();       
    var btime = $("#begintime").val();
    var begintime ;
    if (btime = "" || btime.length == 0){
        begintime = new Date().format("yyyy-MM-dd ");
    } else {
        begintime = $("#begintime").val();
    }       
    var etime =$("#endtime").val();
    var endtime;
    if (etime = '' || etime.length == 0){
        endtime = '2090-12-31';
    } else {
        endtime = $("#endtime").val();
    }
    var dataParams=[]; dataParams.push({'id':id,'linker':linker,'phone':phone,'areaname':area,'product':productList,'productFormat':formatList,'amount':amountList,'purchaseStyle':purchasestyle,'beginTime':begintime,'endTime':endtime});
    dataParams = JSON.stringify(dataParams);
    $.messager.confirm('提示信息', "確定要保存嗎？", function (r) {
        if(r){
            $.ajax({
                url: "${pageContext.request.contextPath}/demo/save",
                type: "post",
                dataType: "json",
                data:{"dataParams":dataParams} ,
                success: function (data) {
                    if (data.code == "0") {
                        $.messager.confirm('提示信息', '保存信息成功！');
                    } else {
                        $.messager.confirm('提示信息', '保存信息失敗！');
                    }
                    $("#datagriddata").datagrid("reload", jQuery("#datagriddata").serializeObject());
                }
            });
        }
    });
}

function validateRecord() {
    var rows = $('#datagriddata').datagrid('getSelections');
    if(rows.length!=1){
        $.messager.alert('提示信息','請選擇要覈實的採購信息！');
        return;
    }
    var id = rows[0].id;
    var memberid = rows[0].memberid;
    var source = rows[0].source;
    $.messager.confirm('提示信息',"是否對該信息進行覈實？",function(r){
        if (r){
            $.ajax({
                url:"${pageContext.request.contextPath}/demo/shenhe",
                type:"post",
                dataType:"json",
                data:{
                    "memberid":memberid,
                    "id":id,
                    "name":"<%=name %>",
                    "source":source
                },
                success:function(data){
                    if(data.code == "0"){
                        $.messager.alert('提示信息','變更成功');
                    }else{
                        $.messager.alert('提示信息','變更失敗');
                    }
                    $("#datagriddata").datagrid("reload", jQuery("#datagriddata").serializeObject());
                },
                error:function(data){
                    console.log(data)
                }
            })

        }
    });
}

JQuery中的Ajax,請求後臺接口返回指定數據的實例

Ajax基本概念

Ajax優缺點

JQuery中的Ajax使用實例

$.ajax()方法

參數解釋

實例：

虛擬機Linux(Centos)上用戶密碼忘記了如何修改？

2019 JAVA面試題附答案

windows/linux下mongoDB安裝包

Java 延時常見的幾種方法

JQuery中的Ajax,請求後臺接口返回指定數據的實例

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結