jsp에서 jquery로 가득 찬 데이터를 Java 클래스로 전달하는 방법

Question

나는 todo 목록 포틀릿을 liferay에 작성하고 있는데, jsp 페이지를 사용하여 시각적 인 부분을 완성했다. JavaScript, HTML 및 CSS로 채워야한다. 비즈니스 논리를 작성하십시오. 우선해야 할 일은 jquery에서 java 클래스로 개체를 전달하여 liferay 용 커넥터를 작성한 다음 지속성 모델을 만들 수 있도록하는 것입니다. 아무도 이것으로 도울 수 있습니까?

Query.noConflict(); 

function Todo (pMainFoldersDivId) { 
    this.mainFoldersDivId = pMainFoldersDivId; 
    this.folders = new Array(); 
    this.addFolderPopup; 
    this.editFolderPopup; 
    this.manageFoldersPopup; 
    this.quickNotesPopup; 

    this.addQuickNote = function() { 
    this.quickNotesPopup = new QuickNotesPopup(); 
    this.quickNotesPopup.show(); 
} 

this.saveQuickNote1 = function() { 
    var qnote1 = jQuery('#quicknote1 textarea').val(); 
} 
this.saveQuickNote2 = function() { 
    var qnote2 = jQuery('#quicknote2 textarea').val(); 
} 
this.saveQuickNote3 = function() { 
    var qnote3 = jQuery('#quicknote3 textarea').val(); 
} 

this.addNote = function() { 
    alert('addNote'); 
} 

this.addFolder = function() { 
    if(typeof this.manageFoldersPopup != 'undefined') { 
     this.manageFoldersPopup.hide(); 
    } 

    this.addFolderPopup = new AddFolderPopup(); 
    this.addFolderPopup.show(); 
} 

this.createFolder = function() { 
    var folderTitle = jQuery('#input-folder-title').val(); 
    var folderIcon = jQuery('#select-folder-icon').val(); 
    var folderBgImage = jQuery('#select-folder-bgimage').val(); 

    var folder = new TwFolder('10', folderIcon, folderTitle, folderBgImage); 
    this.folders.push(folder); 

    this.addFolderPopup.hide(); 
    this.renderFolders(); 
} 

this.updateFolder = function() { 
    var folderId = jQuery('#input-folder-id').val(); 
    var folderTitle = jQuery('#input-folder-title').val(); 
    var folderIcon = jQuery('#select-folder-icon').val(); 
    var folderBgImage = jQuery('#select-folder-bgimage').val(); 

    var arrFolder = jQuery.grep(this.folders, function(folder,idx) { 
     return folder.id == folderId; 
    }); 
    if(arrFolder.length > 0) { 
     var folder = arrFolder[0]; 
     folder.title = folderTitle; 
     folder.icon = folderIcon; 
     folder.bgImage = folderBgImage; 

     this.renderFolders(); 
     this.editFolderPopup.hide(); 
     this.manageFolders(); 
    } 
} 

this.editFolder = function(pFolderId) { 
    var arrFolder = jQuery.grep(this.folders, function(folder,idx) { 
     return folder.id == pFolderId; 
    }); 
    if(arrFolder.length > 0) { 
     this.manageFoldersPopup.hide(); 

     var folder = arrFolder[0]; 
     this.editFolderPopup = new EditFolderPopup(folder); 
     this.editFolderPopup.show(); 
    } 
} 

this.deleteFolder = function(pFolderId) { 
    var safe = confirm('Are you sure ?'); 
    if(safe) { 
     for(var i=0; i<this.folders.length; i++) { 
      if(pFolderId == this.folders[i].id) { 
       this.folders.splice(i,1); 
       break; 
      } 
     } 

     this.renderFolders(); 
     this.manageFoldersPopup.hide(); 
     this.manageFolders(); 
    } 
} 

this.manageFolders = function() { 
    this.manageFoldersPopup = new ManageFoldersPopup(this); 
    this.manageFoldersPopup.show(); 
} 

this.renderFolders = function() { 
    var mainFoldersDiv = jQuery('#'+this.mainFoldersDivId); 
    mainFoldersDiv.empty(); 

    var fLength = this.folders.length; 
    jQuery(this.folders).each(function(index, folder) { 
     var folderDivClass = 'inner-folder'; 
     if(index == 0) folderDivClass = 'first-folder'; 
     else if(index == fLength-1) folderDivClass = 'bottom-folder'; 
     var folderDiv = '<div id="'+'tfolder-'+folder.id+'" class="'+folderDivClass+'">'; 
     folderDiv += folder.getHtmlDiv(); 
     folderDiv += '</div>'; 

     mainFoldersDiv.append(folderDiv); 
     var titleLink = jQuery('#tfolder-'+folder.id+' .folder-title a'); 
     titleLink.click(function() { 
      folder.onClick(); 
     });  
    }); 
} 

// Constructor 
this.folders.push(new Folder('1','clock.png', 'Travel Diary', 'folder_blue.png')); 
this.folders.push(new Folder('2','tag_blue.png', 'Secret Diary', 'folder_brown.png')); 
this.folders.push(new Folder('3','post_note.png', 'My Ideas', 'folder_yellow.png')); 
this.folders.push(new Folder('4','lock.png', 'Shopping Dubai Mall', 'folder_mov.png')); 
this.folders.push(new Folder('5','report.png', 'To-Do List', 'folder_orange.png')); 

this.renderFolders(); 
} 

    function Folder(pId, pIcon, pTitle, pBgImage) { 
    this.id = pId; 
    this.icon = pIcon; 
    this.title = pTitle; 
    this.bgImage = pBgImage; 
    this.items = new Array(); 

    this.getHtmlDiv = function() { 
    var result = '<div style="background-image: url(\'<%= request.getContextPath() %>/images/'+this.bgImage+'\');" class="folder-image">'; 
    result += '<span class="folder-icon"><img src="<%= request.getContextPath() %>/images/icons/'+this.icon+'" width="40" height="40" /></span>'; 
    result += '<span class="folder-title"><a href="#">'+this.title+'</a></span>'; 
    result += '<span class="folder-item-number">'+this.items.length+'</span>'; 
    result += '</div>'; 
    return result; 
} 

this.onClick = function() { 
    var popup = new OpenFolderPopup(this); 
    popup.show(); 
} 
} 

function Note(pId, pTitle, pContent, pDueDate, pFolder) { 
    this.id = pId; 
    this.title = pTitle; 
    this.content = pContent; 
    this.dueDate = pDueDate; 
    this.folder = pFolder; 
} 

function OpenFolderPopup(pFolder) { 
     this.folder = pFolder; 
     this.jqmdialog = jQuery('#tw-show-folder'); 

     jQuery('#tw-show-folder .open-folder-header').css('background-image','url("<%= request.getContextPath() %>/images/'+this.folder.bgImage+'")'); 
     jQuery('#tw-show-folder .open-folder-header .open-folder-icon img').attr('src','<%= request.getContextPath() %>/images/icons/'+this.folder.icon); 
     jQuery('#tw-show-folder .open-folder-title').html(this.folder.title); 

     this.jqmdialog.jqm({ modal: false }); 

     this.show = function() { 
     this.jqmdialog.jqmShow(); 
} 
} 

    function AddFolderPopup() { 
    this.jqmdialog = jQuery('#tw-add-folder'); 
    this.jqmdialog.css('height','150px'); 
    this.jqmdialog.css('top','15%'); 
    this.jqmdialog.jqm({ modal: false }); 

try { 
    jQuery('#tw-add-folder .add-folder-update-icon').css('display','none'); 
    jQuery('#tw-add-folder .add-folder-save-icon').css('display','block'); 

    jQuery('#input-folder-title').val(''); 
    jQuery('#select-folder-icon').val('accept.png'); 
    jQuery('#select-folder-bgimage').val('folder_blue.png'); 
    jQuery("#select-folder-icon, #select-folder-bgimage").msDropDown(); 
} catch(e) { 
    alert(e.message); 
} 

this.show = function() { 
    this.jqmdialog.jqmShow(); 
} 

this.hide = function() { 
    this.jqmdialog.jqmHide(); 
} 
} 

    function ManageFoldersPopup(pTodoObj) { 
     this.jqmdialog = jQuery('#tw-manage-folders'); 
     this.jqmdialog.css('width','450px'); 
     this.jqmdialog.css('height','400px'); 
     this.jqmdialog.css('margin-left','-200px'); 
     this.jqmdialog.css('top','10%'); 
     this.jqmdialog.jqm({ modal: false }); 

      var folderTable = jQuery('#table-manage-folders'); 
     folderTable.empty(); 
     jQuery(pTodoObj.folders).each(function(index, folder) { 
     var result = '<tr id="'+'tfolder-'+folder.id+'">'; 

     result += '<td>'; 
     result += '<div style="background-image: url(\'<%= request.getContextPath() %>/images/'+folder.bgImage+'\');" class="folder-image">'; 
     result += '<span class="folder-icon"><img src="<%= request.getContextPath() %>/images/icons/'+folder.icon+'" width="40" height="40" /></span>'; 
     result += '<span class="folder-title">'+folder.title+'</span>'; 
     result += '<span class="folder-item-number">'+folder.items.length+'</span>'; 
     result += '</td>'; 

     result += '<td>'; 
     result += '<a class="edit_folder" href="#"><img src="<%= request.getContextPath() %>/images/icons/process.png" width="40px"/></a>'; 
     result += '</td>'; 

     result += '<td>'; 
     result += '<a class="delete_folder" href="#"><img src="<%= request.getContextPath() %>/images/icons/delete.png" width="40px"/></a>'; 
     result += '</td>'; 

     result += '</tr>'; 

     folderTable.append(result); 

     jQuery('#table-manage-folders #tfolder-'+folder.id+' .edit_folder').click(function() { 
     pTodoObj.editFolder(folder.id); 
    }); 

     jQuery('#table-manage-folders #tfolder-'+folder.id+' .delete_folder').click(function() { 
     pTodoObj.deleteFolder(folder.id); 
    });  
}); 

this.show = function() { 
    this.jqmdialog.jqmShow(); 
} 

this.hide = function() { 
    this.jqmdialog.jqmHide(); 
} 
    } 


    function EditFolderPopup(pFolder) { 
    this.jqmdialog = jQuery('#tw-add-folder'); 
    this.jqmdialog.css('height','150px'); 
    this.jqmdialog.css('top','15%'); 
    this.jqmdialog.jqm({ modal: false }); 

    try { 
    jQuery('#tw-add-folder .add-folder-update-icon').css('display','block'); 
    jQuery('#tw-add-folder .add-folder-save-icon').css('display','none'); 

    jQuery('#input-folder-id').val(pFolder.id); 
    jQuery('#input-folder-title').val(pFolder.title); 
    jQuery('#select-folder-icon').val(pFolder.icon); 
    jQuery('#select-folder-bgimage').val(pFolder.bgImage); 
    jQuery("#select-folder-icon, #select-folder-bgimage").msDropDown(); 
     } catch(e) { 
    alert(e.message); 
} 

this.show = function() { 
    this.jqmdialog.jqmShow(); 
} 

this.hide = function() { 
    this.jqmdialog.jqmHide(); 
} 
} 

    function QuickNotesPopup() { 
    this.jqmdialog = jQuery('#tw-quicknotes-popup'); 
    this.jqmdialog.css('width','445px'); 
    this.jqmdialog.css('height','300px'); 
    this.jqmdialog.css('margin-left','-220px'); 
    this.jqmdialog.jqm({ modal: false }); 

    jQuery('#quicknotes').tabify(); 

    this.show = function() { 
    this.jqmdialog.jqmShow(); 
} 

this.hide = function() { 
    this.jqmdialog.jqmHide(); 
} 
} 

Answer 1

당신은 매개 변수로 전달하려는 정보를 전달하는, 다시 서버에서 다른 JSP/서블릿에 JQuery Ajax method를 사용하여 전화를 할 : 여기에 코드입니다.

보안 문제로, JSP가 오류 코드와 함께 응답을 전송하는지 확인하여 전송이 잘되었는지 확인하십시오.