一)jQuery常用AJAX-API

目的:简化客户端与服务端进行局部刷新的异步通讯

(1)取得服务端当前时间

简单形式:jQuery对象.load(url)

返回结果自动添加到jQuery对象代表的标签中间

如果是Servlet的话,采用的是GET方式

复杂形式:jQuery对象.load(url,sendData,function(backData,textStatus,ajax){... ...})

sendData = {"user.name":"jack","user.pass":"123"};

以JSON格式文本方式发送,使用POST方式发送,服务端能收到数据

注意:对于load方法而言,如果请求体无参数发送的话,load方法

采用GET方式提交

注意:对于load方法而言,如果请求体有参数发送的话,load方法

采用POST方式提交

注意:使用load方法时,自动进行编码,无需手工编码

<script type="text/javascript">

$(":button").click(function(){

var url = "${pageContext.request.contextPath}/loadTimeRequest?time"+new Date().getTime();

var sendData = null;

$.load(url,sendData,function(a,b,ajax){

var jsonJAVA = ajax.responseText;

var jsonJS = eval("("+jsonJAVA+")");

var strTime = jsonJS.strTime;

$("span:first").html(strTime).css("color","red");

$("span:last").html(strTime).css("color","blue");

});

//$("span").load(url);

});

</script>

load()方法参数解释:

参数一:url发送到哪里去

参数二: sendData发送请求体中的数据,符合JSON格式,例如:{key:value,key:value}

参数三:function处理函数,类似于传统方式ajax.onreadystatechange = 处理函数

其中参数三为function处理函数最多可以接收三个参数,含义如下

第一个参数:服务端返回的数据,例如:backData

第二个参数:服务端状态码的文本描述,例如:success、error、

第三个参数:ajax异步对象,即XMLHttpRequest对象

以上所有参数的名字可以任意,但必须按顺序书写,尽量做到见名知意

(2)检查注册用户名和密码是否存在

$.get(url,sendData,function(backData,textStatus,ajax){... ...})

$.post(url,sendData,function(backData,textStatus,ajax){... ...})赵君提倡

注意:使用get或post方法时,自动进行编码,无需手工编码

(3)jQuery对象.serialize()

作用:自动生成JSON格式的文本

注意:为每个jQuery对象设置一个name属性,因为name属性会被认为请求参数名

注意:必须用<form>标签元素

适用:如果属性过多,强烈推荐采用这个API

<script type="text/javascript">

//定位按钮,同时添加单击事件

$(":button").click(function(){

//获取用户名和密码

var username = $(":text:first").val();

var password = $(":text:last").val();

//去空格

username = $.trim(username);

password = $.trim(password);

//异步发送到服务端

var url = "${pageContext.request.contextPath}/checkRequest?time="+new Date().getTime();

/*手工书写JSON文本

var sendData = {

"user.username":username,

"user.password":password

};

*/

/*工具生成JSON文本*/

var sendData = $("form").serialize();

$.post(url,sendData,function(backData,textStatus,ajax){

//backData是一个JSON文本/对象,你得通过.号访问其属性值

var tip = backData.tip;

//创建img节点

var $img = $("<img src='" + tip + "' height='18px' widht='18px'/>")

//清空span节点中的内容

$("span").text("");

//将img节点添加到span节点中

$("span").append( $img );

});

});

</script>

public class RegisterAction extends ActionSupport{

private User user;

public User getUser() {

return user;

}

public void setUser(User user) {

this.user = user;

}

/**

* 检查注册用户名和密码是否存在

*/

public String checkMethod() throws Exception {

tip = "images/MsgSent.gif";

if("帅帅".equals(user.getUsername()) && "123".equals(user.getPassword())){

tip = "images/MsgError.gif";

}

return "ok";

}

private String tip;

public String getTip() {

return tip;

}

/**

* var backData = {

*              "tip":"images/MsgError.gif"

*             }

*/

}

(4)jQuery解析XML

<?xml version="1.0" encoding="UTF-8"?>

<root>

<city>广州</city>

<city>中山</city>

<city>深圳</city>

<city>佛山</city>

<city>珠海</city>

</root>

<script type="text/javascript">

$(":button").click(function(){

var url = "${pageContext.request.contextPath}/03_city.xml";

var sendData = null;

$.get(url,sendData,function(backData,textStatus,ajax){

/*

//将xml文件转成jquery对象,目的是用jquery api解析xml文件

var $xml = $(backData);

var $city = $xml.find("city");

$city.each(function(){

//获取每一个city节点

var city = $(this).text();

alert(city);

});

*/

var xml = ajax.responseXML;

var $xml = $(xml);

var $city = $xml.find("city");

$city.each(function(){

//获取每一个city节点

var city = $(this).text();

alert(city);

});

});

});

</script>

(5)省份-城市,基于jQuery的AJAX二级联动,用Struts2整合AJAX【非数据库版】

$.ajax(

{

type:"POST",

url:"${pageContext.request.contextPath}/findCityByProvinceRequest?id="+new Date().getTime(),

data:{"province":province},

success:function(backData,textStatus,ajax){}

}

);

注意:这里每个key值不能乱写

<select id="province">

<option>选择省份</option>

<option>广东</option>

<option>湖南</option>

</select>

<select id="city">

<option>选择城市</option>

</select>

<script type="text/javascript">

$("#province").change(function(){

//删除原城市下拉框中的内容,除第一项外

$("#city option:gt(0)").remove();

var province = $("#province option:selected").text();

if("选择省份" != province){

$.ajax({

"type":"POST",

"url":"${pageContext.request.contextPath}/findCityByProvince?time="+new Date().getTime(),

"sendData":{"province":province},

"success":function(backData,textStatus,ajax){

//js对象

var city = backData.cityList;

//jquery对象

var $city = $(city);

//each()

$city.each(function(){

//this表示每个城市

var $option = $("<option>" + this + "</option>");

$("#city").append( $option );

});

}

});

}

});

</script>

public class ProvinceCityAction extends ActionSupport{

private String province;//广东

public void setProvince(String province) {

this.province = province;

}

public String findCityByProvince() throws Exception {

cityList = new ArrayList<String>();

if("广东".equals(province)){

cityList.add("湛江");

cityList.add("汕头");

}else if("湖南".equals(province)){

cityList.add("邵阳");

cityList.add("浏阳");

}

return "ok";

}

private List<String> cityList;

public List<String> getCityList() {

return cityList;

}

/**

* var backData = {

*                "cityList":["邵阳","浏阳"]

*             }

*/

}

<struts>

<package name="timePackage" extends="json-default" namespace="/">

<global-results>

<result name="ok" type="json"/>

</global-results>

<!-- 获取服务端时间 -->

<action

name="loadTimeRequest"

class="cn.itcast.javaee.js.time.TimeAction"

method="loadTimeMethod"/>

<!-- 检查用户名和密码是否存在 -->

<action

name="checkRequest"

class="cn.itcast.javaee.js.register.RegisterAction"

method="checkMethod"/>

<!-- 根据省份查询城市 -->

<action

name="findCityByProvince"

class="cn.itcast.javaee.js.provincecity.ProvinceCityAction"

method="findCityByProvince"/>

</package>

</struts>

二)掌握Java调用Oracle过程与函数

写一个计算个人所得税的应用

--定义过程

create or replace procedure get_rax(salary in number,rax out number)

as

--需要交税的钱

bal number;

begin

bal := salary - 3500;

if bal<=1500 then

rax := bal * 0.03 - 0;

elsif bal<=4500 then

rax := bal * 0.1 - 105;

elsif bal<=9000 then

rax := bal * 0.2 - 555;

elsif bal<=35000 then

rax := bal * 0.25 - 1005;

elsif bal<=55000 then

rax := bal * 0.3 - 2755;

elsif bal<=80000 then

rax := bal * 0.35 - 5505;

else

rax := bal * 0.45 - 13505;

end if;

end;

/

--调用过程

declare

--交税

rax number;

salary number := &salary;

begin

get_rax(salary,rax);

dbms_output.put_line(salary||'元工资需要交'||rax||'元税');

end;

/

public class TestCallOracleProc {

public static void main(String[] args) throws Exception{

String sql = "{call get_rax(?,?)}";

Connection conn = JdbcUtil.getConnection();

CallableStatement cstmt = conn.prepareCall(sql);

cstmt.setInt(1,10000);

cstmt.registerOutParameter(2,Types.INTEGER);

cstmt.execute();

Integer rax = cstmt.getInt(2);

System.out.println("10000元需要交" + rax + "元税");

JdbcUtil.close(cstmt);

JdbcUtil.close(conn);

}

}

查询7788号员工的的姓名,职位,月薪

--定义函数

create or replace function findEmpNameAndJobAndSal(pempno in number,pjob out varchar2,psal out number)

return varchar2

as

pename emp.ename%type;

begin

select ename,job,sal into pename,pjob,psal from emp where empno = pempno;

return pename;

end;

/

--调用函数

declare

pename emp.ename%type;

pjob   emp.job%type;

psal   emp.sal%type;

begin

pename := findEmpNameAndJobAndSal(7788,pjob,psal);

dbms_output.put_line('7788'||'--'||pename||'--'||pjob||'--'||psal);

end;

/

public class TestCallOracleFunc {

public static void main(String[] args) throws Exception{

String sql = "{?=call findEmpNameAndJobAndSal(?,?,?)}";

Connection conn = JdbcUtil.getConnection();

CallableStatement cstmt = conn.prepareCall(sql);

cstmt.registerOutParameter(1,Types.VARCHAR);

cstmt.setInt(2,7788);

cstmt.registerOutParameter(3,Types.VARCHAR);

cstmt.registerOutParameter(4,Types.INTEGER);

cstmt.execute();

String ename = cstmt.getString(1);

String job = cstmt.getString(3);

Integer sal = cstmt.getInt(4);

System.out.println(ename+":"+job+":"+sal);

JdbcUtil.close(cstmt);

JdbcUtil.close(conn);

}

}

js day03的更多相关文章

  1. day-03(js)

    回顾: css: 层叠样式表 作用: 渲染页面 提供工作效率,将html和样式分离 和html的整合 方式1:内联样式表 通过标签的style属性 <xxx style="...&qu ...

  2. 超全面的JavaWeb笔记day03<JS对象&函数>

    1.js的String对象(****) 2.js的Array对象 (****) 3.js的Date对象 (****) 获取当前的月 0-11,想要得到准确的月 +1 获取星期时候,星期日是 0 4.j ...

  3. js下 Day03、DOM操作--节点方法

    语法:parentNode.appendChild(child) 功能:向父节点的子节点列表的末尾添加新的子节点 语法:parentNode.removeChild(child) 功能:从子节点列表中 ...

  4. Node.js 自学之旅

    学习基础,JQuery 原生JS有一定基础,有自己一定技术认知(ps:原型链依然迷糊中.闭包6不起来!哎!) 当然最好有语言基础,C#,java,PHP等等.. 最初学习这个东西的原因很简单,在园子里 ...

  5. Day03 javascript详解

    day03 js 详解 JavaScript的基础 JavaScript的变量 JavaScript的数据类型 JavaScript的语句 JavaScript的数组 JavaScript的函数 Ja ...

  6. JS的解析与执行过程—全局预处理阶段之全局词法环境对象

    问题:有如下代码 var a = 1; function pop() { alert(a); var a = 5; } pop();//执行结果,弹出undefined 这段代码的执行结果为undef ...

  7. Node.js 自学之旅(初稿篇)

    学习基础,JQuery 原生JS有一定基础,有自己一定技术认知(ps:原型链依然迷糊中.闭包6不起来!哎!) 当然最好有语言基础,C#,java,PHP等等.. 最初学习这个东西的原因很简单,在园子里 ...

  8. day03 Django目录结构与reques对象方法

    day03 Django目录结构与reques对象方法 今日内容概要 django主要目录结构 创建app注意事项(重点) djago小白必会三板斧 静态文件配置(登录功能) requeste对象方法 ...

  9. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

随机推荐

  1. effective_java第23条:请不要新代码中使用原生态类型

    从这条开始涉及泛型相关的点. 从JDK5开始Java新增了“泛型”新特性,例如:List<String>,在这之前则只有List不会限定类型. 如今的JDK版本中还是可以写原生类型,但这会 ...

  2. django之Session、Cookie

    Session ·Session存在于服务器端 ·Session的设置: request.session['name'] = value ·Session的获取: dic = request.sess ...

  3. 面向对象 反射 和item系列和内置函数和__getattr__和__setattr__

    反射 反射主要用在网络编程中, python面向对象的反射:通过字符串的形式操作对象相关的属性.python的一切事物都是对象. 反射就是通过字符串的形式,导入模块:通过字符串的形式,去模块寻找指定函 ...

  4. 关于LaTeX公式排版

    [转载请注明出处]http://www.cnblogs.com/mashiqi 2017/10/05 1.居中括号框住多行公式 \begin{equation*} \left\{\begin{alig ...

  5. BZOJ - 3170: 松鼠聚会 (切比雪夫转曼哈顿距离)

    pro:  有N个小松鼠,它们的家用一个点x,y表示,两个点的距离定义为:点(x,y)和它周围的8个点即上下左右四个点和对角的四个点,距离为1.现在N个松鼠要走到一个松鼠家去,求走过的最短距离.0&l ...

  6. latex之矩阵表示

    $ \begin{matrix} 1 & 0 & 0\\ 0 & 1 & 0\\ 0 & 0 & 1 \end{matrix}\quad \begin{ ...

  7. /etc/profile ~/.bash_profile ~/.bashrc 等文件的执行过程 和 区别

    /etc/profile :系统的所有用户共享 ~/.bash_profile:仅针对当前用户有效 我的电脑只用于开发,因此全部配置/etc/profile 参考链接: https://blog.cs ...

  8. Linux双线双网卡双IP双网关设置方法

    机房上架了一台测试机,系统是Ubuntu 9.04 X64的系统,母机IBM X336机器.用户需求是双线,故采用一个网卡配置电信地址,另一个网卡配置联通地址,安装好系统后配置好IP发现联通地址和电信 ...

  9. 我发起了一个 .Net 开源 跨平台 GUI (界面开发框架)项目 HtmlCore

    大家好 , 我发起了一个 .Net 开源 跨平台 GUI (界面开发框架)项目 , 名字叫 HtmlCore  . 项目的一个主要目标是可以用 .Net 在 移动设备 上 开发 GUI 程序 (界面程 ...

  10. exactly-once和kafka

    Exactly-Once的概念是指"恰好一次",简单讲就是同一个数据只会被处理一次,应用有机质保证不会重复处理同一条数据(如果数据因为因为网络业务异常被发送多次):Exactly- ...