前后端數據交互


前后端數據交互以及連接數據庫流程:

首先需要在后台建立數據庫,並且連接數據庫,打開apache服務器確保所有文件代碼在服務器中運行

這里是封裝好的連接數據庫通用模式(一定要確保數據庫是否連接成功)

 

 

1:前端jsp頁面設置form表單或是可以讓用戶提交用戶信息的格式,確定需要傳遞的參數name讓用戶輸入,通過點擊按鈕后submit()提交到后台;

(這里是引用了bootsrap的模態框)

通過ajax傳遞參數(引用已經封裝好的ajax)

自己封裝好的ajax:

function ajax(option) {
    function objtostring(obj){
        if(typeof obj==='object' && !Array.isArray(obj)){
            var arr=[];
            for(var i in obj){
                arr.push(i+'='+obj[i]);
            }
            return arr.join('&');
        }else{
            throw new Error('請輸入對象');
        }
    }
    var ajax = new XMLHttpRequest();
    //默認參數配置
    option.type = option.type || 'get';
    option.data = option.data || '';
    //判斷接口地址是否存在
    if(!option.url) {
        throw new Error('請輸入接口地址');
    }
    //數據傳輸
    if(option.data && typeof option.data === 'object' && !Array.isArray(option.data)) { //對象
        option.data = objtostring(option.data);
    } else { //其他
        option.data = option.data;
    }
    //是否異步
    if(option.async== 'false' || option.async == false) {
        option.async = false;
    } else {
        option.async = true;
    }
    //get方式
    if(option.data && option.type == 'get') {
        option.url += '?' + option.data;
    }
    //post方式
    ajax.open(option.type, option.url, option.async);

    if(option.type == 'post') {
        ajax.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        ajax.send(option.data);
    } else {
        ajax.send();
    }
    if(!option.async) { //同步
        if(ajax.status === 200) {
            option.success && option.success(ajax.responseText);
        } else {
            option.error && option.error('接口地址有誤' + ajax.status)
        }
    } else { //異步
        ajax.onreadystatechange = function() {
            if(ajax.readyState === 4) {
                if(ajax.status === 200) {
                    option.success && option.success(ajax.responseText);
                } else {
                    option.error && option.error('接口地址有誤' + ajax.status)
                }
            }
        }
    }
}
2:前端向后端發送或是添加數據給后端到數據庫,后端是如何接收的

3:后端接收成功數據並且把數據返回給前端

4:通過ajax后端將數據庫的 信息渲染出來

5:這個時候前端當用戶把信息提交的時候,后台數據庫會顯示了用戶信息

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM