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


相关文章
|
28天前
|
开发框架 JavaScript 前端开发
揭秘:如何让你的asp.net页面变身交互魔术师——先施展JavaScript咒语,再引发服务器端魔法!
【8月更文挑战第16天】在ASP.NET开发中,处理客户端与服务器交互时,常需先执行客户端验证再提交数据。传统上使用ASP.NET Button控件直接触发服务器事件,但难以插入客户端逻辑。本文对比此法与改进方案:利用HTML按钮及JavaScript手动控制表单提交。后者通过`onclick`事件调用JavaScript函数`SubmitForm()`来检查输入并决定是否提交,增强了灵活性和用户体验,同时确保了服务器端逻辑的执行。
34 5
|
3天前
|
JavaScript 前端开发
js怎么定位不同的页面元素
在JavaScript中,有多种方法定位和选择页面元素。
|
19天前
|
JavaScript 前端开发
【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例
【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例
|
21天前
|
JavaScript 前端开发
使用js生成表格标题、表格内容并且每行附带删除按钮然后插入到页面中
使用js生成表格标题、表格内容并且每行附带删除按钮然后插入到页面中
28 2
|
21天前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
27 2
|
Web App开发 JSON JavaScript
JavaScript及jQuery入门 【下】
什么是JavaScript 概述 JavaScript是一门世界上最流行的脚本语言 Java、JavaScript 历史 ECMAScript可以理解为是JavaScript的一个标准 最新版本已经到es6~ 但是大部分浏览器还停留在支持es5代码上 开发环境--线上环境,版本不一致 快速入门 引入
|
存储 JavaScript 前端开发
JavaScript及jQuery入门【上】
什么是JavaScript 概述 JavaScript是一门世界上最流行的脚本语言 Java、JavaScript 历史 ECMAScript可以理解为是JavaScript的一个标准 最新版本已经到es6~ 但是大部分浏览器还停留在支持es5代码上 开发环境--线上环境,版本不一致 快速入门 引入
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
69 2
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
62 4
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
54 4