jQuery 添加到 JSP 页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17378829/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery adding to JSP page
提问by java_user
I have a piece of jQuery code which I found on the internet and I want to integrate it to my jsp page, I use Spring form tags.
我有一段在互联网上找到的 jQuery 代码，我想将它集成到我的 jsp 页面中，我使用 Spring 表单标签。
Here is the jQuery code:
这是jQuery代码：
(function ($) {
//тут превращаем select в input
var id = "test",
$id = $('#' + id),
choices = $id.find('option').map(function (n, e) {
var $e = $(e);
return {
id: $e.val(),
text: $e.text()
};
}),
width = $id.width(),
realClass = $id.get(0).className,
realId = $id.get(0).id,
$input = $('<input>',{width: width});
$id.after($input);
$id.hide();
$id.find('option').remove();
//превратили
$input.select2({
query: function (query) {
var data = {}, i;
data.results = [];
// подтставим то что искали
if (query.term !== "") {
data.results.push({
id: query.term,
text: query.term
});
}
// добавим остальное
for (i = 0; i < choices.length; i++) {
if (choices[i].text.match(query.term) || choices[i].id.match(query.term)) data.results.push(choices[i]);
}
query.callback(data);
}
}).on('change',function()
{
var value=$input.val();
$id.empty();
$id.append($('<option>').val(value))
$id.val(value);
}
);
})(jQuery);
CSS file for jQuery - I name it test.css and apply it to my jsp page:
jQuery 的 CSS 文件 - 我将其命名为 test.css 并将其应用到我的 jsp 页面：
#test {
width: 300px;
}
My jsp page
我的jsp页面
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Страница выборки</title>
<link rel="stylesheet" href="resources/cssFiles/jquery-ui.css"/>
<link rel="stylesheet" href="resources/cssFiles/test.css"/>
<script type="text/javascript" src="resources/jsFiles/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="resources/jsFiles/jquery-ui.js"></script>
<script type="text/javascript" src="resources/jsFiles/jquery-ui-i18n.js"></script>
<script type="text/javascript" src="./resources/jsFiles/selecter.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#parctdate, #chldAdmitDate, #chldSchlDate, #name, #type, #daySchdl, #workSchdl, #rotation, #numbch, #chUnder3, #chUpper3, #chGoSchool, #chAdmitted").mouseenter(function() {
$(this).css("background-color", "gainsboro");
});
$("#parctdate, #chldAdmitDate, #chldSchlDate, #name, #type, #daySchdl, #workSchdl, #rotation, #numbch, #chUnder3, #chUpper3, #chGoSchool, #chAdmitted").mouseleave(function() {
$(this).css("background-color", "white");
});
var enabledDays = ["6-1-2013", "7-1-2013", "8-1-2013", "9-1-2013", "10-1-2013", "11-1-2013"];
function nationalDays(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
for (i = 0; i < enabledDays.length; i++) {
if($.inArray((m+1) + '-' + d + '-' + y,enabledDays) != -1 || new Date() > date) {
return [true];
}
}
return [false];
}
$(function(){
$.datepicker.setDefaults($.extend($.datepicker.regional["ru"]));
$("#datepicker1, #datepicker2, #datepicker3").datepicker({dateFormat: "yy-mm-dd",
duration: "normal",
numberOfMonths: [ 1, 2 ],
constrainInput: true,
beforeShowDay: nationalDays});
});
});
</script>
</head>
<body>
<spring:message code="label.input.button" var="labelbutton"/>
<h3 align="center"><spring:message code="label.input.topLabel"/></h3>
<form:form id="myform" cssClass="testClass" modelAttribute="fboAttribute" method="post" action="add" >
<table align="center">
<tr id="name">
<td><form:label path="institution.nameOfInstitution"><spring:message code="label.input.nameOfInstitution"/></form:label>
<form:select id="test" path="institution.nameOfInstitution">
<form:option value=""><spring:message code="label.select.msg" />-</form:option>
<form:options items="${listOfInstitutionsNames}"/>
</form:select>
<tr>
<td><input type="submit" value="${labelbutton}"/></td>
</table>
</form:form>
I would like to integrate my jQuery scripts with my jsp and Spring form tags.
我想将我的 jQuery 脚本与我的 jsp 和 Spring 表单标签集成在一起。
I'm sorry I'm new in jQuery.
对不起，我是 jQuery 新手。
Thank you
谢谢
回答by Akheloes
jQuery, like any JavaScript, is added in a <script>tag in the <head>tag of your JSP page. You either add all the code or just a link to the .jsfile containing your jQuery, like for example :
与任何 JavaScript 一样，jQuery 被添加到JSP 页面的<script>标记中的<head>标记中。您要么添加所有代码，要么只添加指向.js包含 jQuery的文件的链接，例如：
<script src="./libs/jquery/1.10.1/jquery.min.js"></script>
Having done that, you want now to leverage your jQuery in the HTML tags, you do that as for any HTML page. Namely, in your case, you don't have to take away the spring tags. Let it generate the select/options via your ${listOfInstitutionsNames}, just add class="testclass"to your spring form tag, like this :
完成此操作后，您现在希望在 HTML 标签中利用您的 jQuery，就像对任何 HTML 页面一样。也就是说，在你的情况下，你不必拿走弹簧标签。让它通过您的 生成选择/选项${listOfInstitutionsNames}，只需添加class="testclass"到您的 spring 表单标签中，如下所示：
<form:form cssClass="testclass" id="myform" modelAttribute="fboAttribute" method="post" action="add" >
When rendering the form on a browser, Spring will include in the generated HTML the class attribute with value of testclass.
在浏览器上呈现表单时，Spring 将在生成的 HTML 中包含值为 testclass 的 class 属性。
Hope that helps, best of luck.
希望能帮到你，祝你好运。
回答by Jagraj Singh
For Dynamic Web Project(designed using MVC Model)
用于动态 Web 项目（使用 MVC 模型设计）
Add like this in head section:
在头部部分添加如下：
<script type="text/javascript" src="${pageContext.request.contextPath}/jQuery.js"/></script>
I kept my jQuery.js in WebContent folder(with jsp pages).
我将 jQuery.js 保存在 WebContent 文件夹中（带有 jsp 页面）。
回答by Hopesun
if what you mean is that you want to bind Java side information to JS var, you can do as I did:
如果你的意思是你想将 Java 边信息绑定到 JS var，你可以像我一样做：
At Java side, use Google's Gson to encode Java object to Json string.
At Java side, use org.apache.commons.lang.StringEscapeUtils.escapeJavaScript(String) to make you Json string escaped as JavaScript.
At JSP side, do something like this:
在 Java 端，使用 Google 的 Gson 将 Java 对象编码为 Json 字符串。
在 Java 端，使用 org.apache.commons.lang.StringEscapeUtils.escapeJavaScript(String) 使您的 Json 字符串转义为 JavaScript。
在 JSP 端，做这样的事情：
<script> var jsonObject = JSON.parse("<%=yourJsonString%>"); </script>
<script> var jsonObject = JSON.parse("<%=yourJsonString%>"); </script>
