jQuery添加到JSP页面答案

【问题标题】：jQuery adding to JSP pagejQuery添加到JSP页面
【发布时间】：2013-06-27 01:27:16
【问题描述】：

我在网上找到了一段 jQuery 代码，我想将它集成到我的 jsp 页面中，我使用 Spring 表单标签。

这里是 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);

用于 jQuery 的 CSS 文件 - 我将其命名为 test.css 并将其应用到我的 jsp 页面：

#test {
    width: 300px;
}

我的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>

我想将我的 jQuery 脚本与我的 jsp 和 Spring 表单标签集成。

对不起，我是 jQuery 新手。

谢谢

【问题讨论】：

嗨，整合是什么意思？
您好，先生。我想将 jQuery+CSS 集成到我的 JSP（最后我的问题选项卡正是以及我想使用 jQuery 的选择标签之间的所有内容。代码如您所见，我有这是我的属性 ${listOfInstitutionsNames} 获取，我想将它们放入 jQuery 代码 insted 中，用于 jQuery 属性 -var test- 示例。
jQuery 是一个 JavaScript 库。您不应该使用 jQuery 添加 HTML 代码。我不知道您所说的集成是什么意思...但是您可以像这样将脚本添加到页面中：<script src="path_to_jquery"></script>
是的先生...我的意思是代替我的
@java_user：你知道如何将 jQuery 添加到一个普通的 HTML 页面吗？如果是这样，那么在 JSP 和 HTML 中这样做并没有太大区别。事实上，jQuery 就像任何 JS (javascript) 一样，您可以在 HTML 中的任何标签中使用它（无论是 Spring 还是非 Spring）。

标签： javascript jquery css jsp spring-mvc

【解决方案1】：

如果你的意思是你想将 Java 边信息绑定到 JS var，你可以像我一样做：

在 Java 端，使用 Google 的 Gson 将 Java 对象编码为 Json 字符串。
在 Java 端，使用 org.apache.commons.lang.StringEscapeUtils.escapeJavaScript(String) 将 Json 字符串转义为 JavaScript。
在 JSP 端，执行如下操作：

    <script>
    var jsonObject = JSON.parse("<%=yourJsonString%>");
    </script>

【讨论】：

【解决方案2】：

用于动态Web项目（使用MVC模型设计）

在头部添加这样的：

<script type="text/javascript" src="${pageContext.request.contextPath}/jQuery.js"/></script>

我将 jQuery.js 保存在 WebContent 文件夹中（带有 jsp 页面）。

【讨论】：

jQuery.js 文件里面有什么？这是一个标准文件，我们需要放入我们的Web项目并使用<script type="text/javascript"> </script>下的jQuery函数吗？

【解决方案3】：

jQuery 与任何 JavaScript 一样，被添加到 JSP 页面的 <head> 标记中的 <script> 标记中。您要么添加所有代码，要么只添加指向包含 jQuery 的 .js 文件的链接，例如：

<script src="./libs/jquery/1.10.1/jquery.min.js"></script>

完成之后，您现在想要在 HTML 标记中利用您的 jQuery，您可以对任何 HTML 页面执行此操作。也就是说，在您的情况下，您不必拿走弹簧标签。让它通过您的${listOfInstitutionsNames} 生成选择/选项，只需将class="testclass" 添加到您的弹簧表单标签中，如下所示：

<form:form  cssClass="testclass" id="myform" modelAttribute="fboAttribute" method="post" action="add" >

在浏览器上渲染表单时，Spring 会在生成的 HTML 中包含值为 testclass 的 class 属性。

希望对您有所帮助，祝您好运。

【讨论】：

谢谢你的回答......我确实像你说的那样它不起作用。哦。我没有课程我有 cssClass 而不是 Spring 表单。我为您编辑上面的问题
jquery.min.js 文件里面有什么？这是一个标准文件，我们需要放入我们的Web项目并使用<script type="text/javascript"> </script>下的jQuery函数吗？