jquery的load加载js页面到指定div中

简介:
4<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'test.jsp' starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <script src="js/jquery-2.1.1.min.js">
        
    </script>
    <style>
        #div,#div2{
            background-color:#bef3f3;
            width:400px;
            height:300px;
            margin:10px;
            position:relative;
            overflow:hidden;
        }
        #div3,#div4{
            background-color:#bff7f0;
            width:150px;
            height:100px;
            margin:10px;
            position:relative;
            display:inline;
        }
        #div3{
            float:left;
            overflow:hidden;
        }
        #div4{
            float:right;
        }
    </style>
  </head>
  
  <body>
   
    <div id="div">
        <input type="button" value="jquery加载js文件" id="button"><br>
        <input type="button" value="jquery加载下拉框" id="button1"><br>
    </div>
    <div id="div2">
        <div id="div3">
            div3
        </div>
        <div id="div4">
            div4
        </div>
    </div>
  </body>
  <script language="JavaScript">
      $("#button").click(function(){
        $("#div3").load("test2/test3.jsp");
    });
    $("#button1").click(function(){
        $("#div4").load("test2/test2.jsp");
    });
  </script>
</html>

wKioL1gQbtKRVHRjAAA_jWxpCG8765.png-wh_50


本文转自 matengbing 51CTO博客,原文链接:http://blog.51cto.com/matengbing/1865963


相关文章
|
Web App开发 数据采集 JavaScript
动态网页爬取:Python如何获取JS加载的数据?
动态网页爬取:Python如何获取JS加载的数据?
1863 58
|
JSON JavaScript 数据格式
jqtimeline.js-简单又好用的jquery时间轴插件
jqtimeline.js-简单又好用的jquery时间轴插件
|
JavaScript 前端开发
js+jquery实现贪吃蛇经典小游戏
本项目采用HTML、CSS、JavaScript和jQuery技术,无需游戏框架支持。通过下载项目文件至本地,双击index.html即可启动贪吃蛇游戏。游戏界面简洁,支持方向键控制蛇移动,空格键实现游戏暂停与恢复功能。
588 14
|
JavaScript
jQuery+css3制作精美的2024圣诞节倒计时页面
jQuery+css3制作精美的2024圣诞节倒计时页面动画
198 0
jQuery+css3制作精美的2024圣诞节倒计时页面
|
缓存 前端开发 JavaScript
JavaScript加载优化
JavaScript加载优化
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
优化CSS和JavaScript加载
359 1
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
|
Web App开发 JavaScript iOS开发
基于jquery开源的页面内模拟滚动条特效插件scrollbar
abcrollBar是一个基于jquery运行的开源滚动条特效插件,体积小巧使用简单的滚动条小插件,它可以通过鼠标中轴滑动页面内的模拟滚动条,或鼠标拖动滚动条查看滚动框架里的内容。支持自定义滚动条的样式,滚动条可选择横或竖呈现,默认也可选择显示或隐藏滚动条。
224 0
|
JavaScript 前端开发 API
深入了解jQuery:快速、高效的JavaScript库
【10月更文挑战第11天深入了解jQuery:快速、高效的JavaScript库
297 0