首页 > 解决方案 > 如何在 JSP 页面中加载远程 JavaScript 文件

问题描述

我正在尝试从远程 API 执行一些脚本。当我上传到我的服务器时,.js不会执行。尽管localhost它们工作得很好。

这是我的 JSP:

<!DOCTYPE html>
<%@ page import="client.Errors"%>
<html lang="en">
   <head>
      <meta charset="UTF-8"/>
      <title>Phill Login-In</title>
      <link rel="stylesheet" href="./style.css"/>
      <script type="text/javascript">
         function formSubmit(form) {
             setTimeout(function () {
                 form.submit();
             },
             3000);// 3 seconds
             return false;
         }
      </script>
   </head>
   <%
      String reqId = request.getParameter("request_id");       
      %>
   <body>
      <form name="phillLogin" id="formData" action="/oam/server/auth_cred_submit" method="POST" onsubmit="return formSubmit(this);">
         <div class='login'>
            <div class='login_title'>
               <%String err = request.getParameter("p_error_code");%>
               <%if (err==null){%>
               <h3>
                  <b>Login to your account</b>
               </h3>
               <% }%>
               <%if(err!=null)
                  {
                     Errors errors=new Errors();
                     Object simpleMessage[][]=(Object[][])errors.getContents(); 
                     String temp[]=err.split("-");
                     int pos=Integer.parseInt(temp[1]);
                  %>
               <h3>
                  <%=simpleMessage[pos-1][1].toString()%>
               </h3>
               <%}%>
            </div>
            <div class='login_fields'>
               <div class='login_fields__user'>
                  <div class='icon'>
                     <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/user_icon_copy.png'/>
                  </div>
                  <input placeholder='Username' type="text" name="username" id="user" style="font-size:medium;"/>
                  <div class='validation'>
                     <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/tick.png'/>
                  </div>
               </div>
               <div class='login_fields__password'>
                  <div class='icon'>
                     <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/lock_icon_copy.png'/>
                  </div>
                  <input placeholder='Password' type="password" name="password" id="pass"
                     style="font-size:medium;"/>
                  <div class='validation'>
                     <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/tick.png'/>
                  </div>
               </div>
               <div class='login_fields__submit'>
                  <input type="submit" value="Log In" id="Submit" style="font-size:small;"/>
               </div>
            </div>
            <%
               if(reqId != null && reqId.length() > 0) { %>
            <input type="hidden" name="request_id" value="=reqId%>"/>
            <% } %>
         </div>
      </form>
      <div class='authent'>
         <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/puff.svg' />
         <p>Proccessing Data...</p>
      </div>
      <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
      <script src="./script.js"></script>
      <script></script>
   </body>
</html>

请注意,这些是无法从服务器远程访问的脚本

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>

如何正确地将这些脚本加载到我的文件中?

我已经尝试在其中包含以下内容,<head>但它似乎不起作用:



<script>
   (function (d, s, id) {
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {
         return;
     }
     js = d.createElement(s);
     js.id = id;
     js.onload = function () {
         // remote script has loaded
     };
     js.src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js";
     fjs.parentNode.insertBefore(js, fjs);
   }
   (document, 'script', 'first'));
</script>
<script>
   (function (d, s, id) {
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {
         return;
     }
     js = d.createElement(s);
     js.id = id;
     js.onload = function () {
         // remote script has loaded
     };
     js.src = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js";
     fjs.parentNode.insertBefore(js, fjs);
   }
   (document, 'script', 'first'));
</script>


标签: javascriptjqueryjsp

解决方案


推荐阅读