在我的项目中，我的 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 的基础知识，但现在我没有太多时间需要很快交付它。请帮忙 提前致谢。
最佳答案
可以通过多种方式从 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);
});
关于javascript - js中如何调用外部jsp，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31903075/