首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

从头开始学习JAVA 6-引来JQuery

2013-03-10 
从头开始学习JAVA 6--引入JQuery5 JQuery:在Index.jsp中,使用到JQuery。1)添加taglib在页面头部添加如下代

从头开始学习JAVA 6--引入JQuery
5 JQuery:

在Index.jsp中,使用到JQuery。

1)添加taglib

在页面头部添加如下代码:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

Taglib类似于自定义控件。

2)添加Jquery

 

    <scripttype="text/javascript"src="<c:urlvalue="/resources/jquery-1.7.2.min.js"/>"></script>

<script type="text/javascript"src="<c:urlvalue="/resources/json.min.js"/>"></script>

其中,<c:urlvalue="/resources/json.min.js"/>为taglib的应用。

运行后生成的代码为:

<script type="text/javascript" src="/IVSMWebDemo/resources/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="/IVSMWebDemo/resources/json.min.js"></script>

在页面中,添加一个按钮:

3)添加javascript脚本

添加页面加载完成后的函数,window.onload:

$(function(){

    $("#butClick").bind('click',function(){

        alert("button clicked");

    });

  });

4)添加ajax处理

添加一个按钮,在初始化时设置该按钮click事件,代码如下:

  $(function(){

    $("#butClick").bind('click',function(){

    alert("button clicked");

    });

    $("#butAjax").bind('click',function(){

    login() ;

    });

  });

 

  function login() {

    $.post("MyTest/getId","admin", function(sid){

       alert(sid);

    });

};

“$.post("MyTest/getId", "admin", function(sid){”为ajax调用代码。

第一个参数是请求的路径,第二个参数是请求的参数,function(sid)为回调函数

5)页面代码

<%@ page language="java"import="java.util.*"pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core"prefix="c"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

 

<!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <basehref="<%=basePath%>">

   

    <title>My JSP 'Index.jsp' starting page</title>

   

    <metahttp-equiv="pragma"content="no-cache">

    <metahttp-equiv="cache-control"content="no-cache">

    <metahttp-equiv="expires"content="0">   

    <metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">

    <metahttp-equiv="description"content="This is my page">

    <!--

    <link rel="stylesheet" type="text/css" href="styles.css">

    -->

    <scripttype="text/javascript"src="<c:urlvalue="/resources/jquery-1.7.2.min.js"/>"></script>

    <scripttype="text/javascript"src="<c:urlvalue="/resources/json.min.js"/>"></script>

 

  </head>

 

  <body>

    This is my JSP page. <br>

    <inputtype="button"id="butClick"value="click"/>

  </body>

  <scripttype="text/javascript">

  $(function(){

    $("#butClick").bind('click',function(){

    alert("button clicked");

    });

    $("#butAjax").bind('click',function(){

    login() ;

    });

  });

 

  function login() {

    $.post("MyTest/getId","admin", function(sid){

       alert(sid);

    });

};

 

  </script>

</html>

 

6)运行效果

从头开始学习JAVA 6-引来JQuery

 

 

热点排行