在我的项目中，我的UI开发人员在js中使用了硬编码的html代码。我想将此代码保存在jsp中，因为我需要使用spring消息标签来获取用户选择的任何语言呈现的文件。
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:amruta.p@exidelife.in"> amruta.p@exidelife.in </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:amruta.p@exidelife.in"> amruta.p@exidelife.in </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文件。 我是UI的初学者，请帮帮我。从过去一周浏览所有可能的来源并学习javascript的基础知识，我很难解决这个问题，但现在我没有太多时间需要尽快交付。请帮忙 提前谢谢。
答案 0 :(得分：1)
您可以通过多种方式从JavaScript调用JSP页面。
1）在单独的弹出窗口中打开JSP页面：
window.open("MyPage.jsp?param1=value1¶m2=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);
});