2015-08-09 197 views
0

在我的項目中,我的UI開發人員在js中硬編碼了一段html代碼。我想將這段代碼保留在jsp中,因爲我需要使用spring消息標籤來獲取用戶選擇的任何語言所呈現的文件。如何在js中調用外部jsp

render: function() { 
      $("#pageloading").show(); 
      this.$el.html(
       **'<div class="row" id="test_page">' + 
        '<div class="col-xs-12">' + 
         '<div class="panel">' + 
          '<div class="panel-heading">' + 
           '<div class="row">' + 
            '<div class="col-xs-4">' + 
             'SECTION <span id="section"> A </span>' + 
            '</div>' + 
            '<div class="col-xs-4">' + 
             'QUESTIONS : <span id="quesNo"> </span>' + 
            '</div>' + 
            '<div class="col-xs-4">' + 
             'Time Remaining : <span id="timer"></span>' + 
            '</div>' + 
           '</div>' + 
          '</div>' + 
          '<div class="panel-body" style="max-height: 425px; overflow-y: scroll; padding: 25px;">' + 
           '<div class="row">' + 
            '<div class="col-xs-12">' + 
             '<div class="panel-group" id="test_questions"></div>' + 
            '</div>' + 
           '</div>' + 
           '<!-- /.row (nested) -->' + 
          '</div>' + 
          '<!-- /.panel-body -->' + 
          '<div class="panel-footer">' + 
           '<div class="row">' + 
            '<div class="col-xs-3 pull-right">' + 
             '<button id="back_section" type="reset" class="btn btn-default">PREVIOUS</button>' + 
             '<button id="next_section" type="submit" class="btn btn-default pull-right" style="margin-right: 30%;">NEXT</button>' + 
             '<button id="submit_test" type="submit" class="btn btn-default pull-right" style="margin-right: 30%;">Submit</button>' + 
            '</div>' + 
           '</div>' + 
          '</div>' + 
         '</div>' + 
         '<!-- /.panel -->' + 
        '</div>' + 
        '<!-- /.col-xs-12 -->' + 
       '</div>' + 
       '<div class="modal fade" id="instructions_page" tabindex="-1" role="dialog" aria-labelledby="instructions_page" aria-hidden="true" data-backdrop="static" style="margin-top:2%">' + 
        '<div class="modal-dialog" style="width: 80%;">' + 
         '<div class="modal-content">' + 
          '<div class="modal-header">' + 
           '<h4>Instructions <div class="btn goToLastPage"><i class="fa fa-reply-all"></i> Back</div></h4>'+ 
          '</div>' + 
          '<div class="modal-body">' + 
           '<div class="panel-body" style="text-align: justify; padding:0 100px">' + 
            '<div class="row">' + 
             '<div class="col-xs-12">' + 
              '<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> Once the self-assessment is completed and respondents have been assigned in all the various categories, an email will be triggered to the reporting manager informing him/her of the same.</h5>'+ 
              '<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> In case the reporting manager would like to add or delete any respondents, he/she can send a mail directly to you (participant).</h5>'+ 
              '<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> Auto mailers shall be sent to all the respondents selected by the participants with the link to input their responses.</h5>'+ 
              '<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> We request all participants to please pro-actively follow up with the respondents whom they have selected for completion of responses.</h5>'+ 
              '<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> The report, based on the responses received will consist of overall summary report based on the average scores in all the different categories.</h5>'+ 
              '<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> The feedback is anonymous (except from the Direct Manager) and the recipient will receive a \'collated\' report showing all the feedback segregated as Direct Manager, Direct Reportee(s), Peers and Stakeholders. The qualitative comments will be provided as is to the recipient. In case the total number of responses across any category is <= 2, the responses will be clubbed together to retain anonymity. Please feel free to reach '+' <a href="mailto:[email protected]"> [email protected] </a> '+' in case of any clarifications.</h5>'+ 
             '</div>' + 
            '</div>' + 
           '</div>' + 
          '</div>' + 
          '<div class="modal-footer">' + 
           '<div class="startTopicTest btn btn-default"> Test Start </div>' + 
          '</div>' + 
         '</div>' + 
        '</div>' + 
       '</div>'** 
      ); 

      Backbone.ajax({ 
       dataType: "json", 
       url: "topictestquestion", 
       data: "", 
       type: "POST", 
       beforeSend: function(xhr) { 
        xhr.setRequestHeader(header, token); 
       }, 

我想把這個HTML代碼放在一個jsp文件中,這個js文件應該調用我想要創建的jsp文件。

mockTestBegin: function() { 
      $("#pageloading").show(); 
      this.$el.html(
       '<div class="row" id="test_page">' + 
        '<div class="col-xs-12">' + 
         '<div class="panel">' + 
          '<div class="panel-heading">' + 
           '<div class="row">' + 
            '<div class="col-xs-4">' + 
             'SECTION <span id="section"> A </span>' + 
            '</div>' + 
            '<div class="col-xs-4">' + 
             'QUESTIONS : <span id="quesNo"></span>' + 
            '</div>' + 
            '<div class="col-xs-4">' + 
             'Time Remaining : <span id="timer"></span>' + 
            '</div>' + 
           '</div>' + 
          '</div>' + 
          '<div class="panel-body" style="max-height: 425px; overflow-y: scroll; padding: 25px;">' + 
           '<div class="row">' + 
            '<div class="col-xs-12">' + 
             '<div class="panel-group" id="test_questions"></div>' + 
            '</div>' + 
           '</div>' + 
           '<!-- /.row (nested) -->' + 
          '</div>' + 
          '<!-- /.panel-body -->' + 
          '<div class="panel-footer">' + 
           '<div class="row">' + 
             '<button id="mok_submit" type="submit" class="btn btn-danger pull-right" style="margin-right: 3%;">EXIT</button>' + 
             '<button id="preview_test" type="submit" class="btn btn-default pull-right" style="margin-right: 30%;">PREVIEW</button>' + 
            '<div class="col-xs-3 pull-right">' + 
             '<button id="back_section" type="reset" class="btn btn-default">PREVIOUS</button>' + 
             '<button id="next_section" type="submit" class="btn btn-default pull-right" style="margin-right: 30%;">NEXT</button>' + 
            '</div>' + 
           '</div>' + 
          '</div>' + 
         '</div>' + 
         '<!-- /.panel -->' + 
        '</div>' + 
        '<!-- /.col-xs-12 -->' + 
       '</div>' + 
       '<div class="modal fade" id="preview-mock" tabindex="-1" role="dialog" aria-labelledby="preview-mock" aria-hidden="true" data-backdrop="static" style="margin-top:2%">' + 
        '<div class="modal-dialog" style="width: 80%;">' + 
         '<div class="modal-content">' + 
          '<div class="modal-header">' + 
           '<h1 class="page-header"> Questions Numbers </h1>'+ 
          '</div>' + 
          '<div class="modal-body">' + 
           '<div class="panel-body" style="text-align: justify; padding:0 100px">' + 
            '<div class="row">' + 
             '<div class="col-xs-12" id="preview-quession">' + 
             '</div>' + 
            '</div>' + 
           '</div>' + 
          '</div>' + 
          '<div class="modal-footer">' + 
           '<button id="mok_submit" type="submit" class="btn btn-default">Submit</button>' + 
          '</div>' + 
         '</div>' + 
        '</div>' + 
       '</div>' + 
       '<div class="modal fade" id="instructions_page" tabindex="-1" role="dialog" aria-labelledby="instructions_page" aria-hidden="true" data-backdrop="static" style="margin-top:2%">' + 
        '<div class="modal-dialog" style="width: 80%;">' + 
         '<div class="modal-content">' + 
          '<div class="modal-header">' + 
           '<h4>Instructions <div class="btn goToLastPage"><i class="fa fa-reply-all"></i> Back</div></h4>'+ 
          '</div>' + 
          '<div class="modal-body">' + 
           '<div class="panel-body" style="text-align: justify; padding:0 100px">' + 
            '<div class="row">' + 
             '<div class="col-xs-12">' + 
              '<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> Once the self-assessment is completed and respondents have been assigned in all the various categories, an email will be triggered to the reporting manager informing him/her of the same.</h5>'+ 
              '<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> In case the reporting manager would like to add or delete any respondents, he/she can send a mail directly to you (participant).</h5>'+ 
              '<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> Auto mailers shall be sent to all the respondents selected by the participants with the link to input their responses.</h5>'+ 
              '<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> We request all participants to please pro-actively follow up with the respondents whom they have selected for completion of responses.</h5>'+ 
              '<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> The report, based on the responses received will consist of overall summary report based on the average scores in all the different categories.</h5>'+ 
              '<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> The feedback is anonymous (except from the Direct Manager) and the recipient will receive a \'collated\' report showing all the feedback segregated as Direct Manager, Direct Reportee(s), Peers and Stakeholders. The qualitative comments will be provided as is to the recipient. In case the total number of responses across any category is <= 2, the responses will be clubbed together to retain anonymity. Please feel free to reach '+' <a href="mailto:[email protected]"> [email protected] </a> '+' in case of any clarifications.</h5>'+ 
             '</div>' + 
            '</div>' + 
           '</div>' + 
          '</div>' + 
          '<div class="modal-footer">' + 
           '<div class="startMockTest btn btn-default"> Test Start </div>' + 
          '</div>' + 
         '</div>' + 
        '</div>' + 
       '</div>' 
       ); 

      Backbone.ajax({ 
       dataType: "json", 
       url: "mok-testquestion", 
       data: "", 
       type: "POST", 
       beforeSend: function(xhr) { 
        xhr.setRequestHeader(header, token); 
       }, 

同樣在這裏,我的UI開發人員在任何地方硬編碼了html代碼。我需要把所有這些放在一個jsp模板中,這樣我就可以使用spring的特性,並且需要在這個HTML代碼所在的地方調用這個jsp文件。 我是一個初級用戶界面請幫助我。我從過去一週瀏覽所有可能的源代碼並學習javascript基礎知識,但現在我沒有太多時間需要儘快提供它。請提前致謝 。

回答

1

有許多方法可以從JavaScript調用JSP頁面。

1)打開JSP頁在一個單獨的彈出窗口:

window.open("MyPage.jsp?param1=value1&param2=value2","pageName","height=400,width=400"); 

2)提交表單:

document.forms[0].action = "MyPage.jsp"; 
document.forms[0].method = "post"; // "get" 
document.forms[0].submit(); 

3)使用jQuery(AJAX):

$.post("MyPage.jsp", { param1: "Abc", param2: "xyz" }, 
    function(data){ 
    alert("Data Loaded: " + data); 
});