java使用ajax异步刷新_Jquery的Ajax实现异步刷新

在Jquery中提供了一套ajax的方法,有:

$.ajax([data],fn)

load(url, [data], [callback])

$.get(url, [data], [callback], [type])

$.getJSON(url, [data], [callback])

$.getScript(url, [callback])

上面的这些方法,均是jquery提供的支持ajax的方法,其中get,getJSON,getScript这几个方法使用差不多,ajax()方法的使用,相对于其他的方法有较多的参数,具体的参数得看api,下面是ajax()方法的常用参数:

type: 请求方式(post,get)

url:请求地址

data:请求参数

success:请求成功后的回调方法

代码:

// 取得事件的方法

function callback() {

// 得到font标签对象

var eleF = document.getElementById("time1");

// 将时间直接插入到font标签中进行显示

eleF.innerHTML = new Date().toTimeString();

}

// 点击时候,进行刷新时间

function referTime() {

// 进行刷新操作

setInterval(callback, 1000);

};

$("#btn").click(setInterval(function() {

$("#time2").html(new Date().toTimeString());

}, 1000));

function find(id) {

var ele = document.getElementById(id);

$.ajax({

type : "POST",

url : "?method=findByName",

data : 'username=' + ele.value,

success : function(msg) {

$("#font").html(msg);

}

});

}

jsp页面:

JQuery实现异步刷新

// 取得事件的方法

function callback() {

// 得到font标签对象

var eleF = document.getElementById("time1");

// 将时间直接插入到font标签中进行显示

eleF.innerHTML = new Date().toTimeString();

}

// 点击时候,进行刷新时间

function referTime() {

// 进行刷新操作

setInterval(callback, 1000);

};

$("#btn").click(setInterval(function() {

$("#time2").html(new Date().toTimeString());

}, 1000));

function find(id) {

var ele = document.getElementById(id);

$.ajax({

type : "POST",

url : "?method=findByName",

data : 'username=' + ele.value,

success : function(msg) {

$("#font").html(msg);

}

});

}

局部刷新操作
Javascript实现局部刷新(时间跳动)

οnclick="referTime()" />

jquery实现局部刷新(时间跳动)
ajax方法从数据库查询内容Name:

type="button" value="查询" id="button" οnclick="find('user')" />

dao&servlet:

public void findByName(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

String username = request.getParameter("username");

try {

Hero hero = dao.findByName(username);

System.out.println(hero);

if(hero!=null) {

response.getWriter().print(hero);

} else {

response.getWriter().print("此用户不存在...");

}

} catch (SQLException e) {

throw new RuntimeException(e);

}

}

package cn.geore.ajax;

import java.sql.SQLException;

import org.apache.commons.dbutils.QueryRunner;

import org.apache.commons.dbutils.handlers.BeanHandler;

import priv.geore.toolutils.jdbc.FirmQueRunner;

public class AjaxDao {

private QueryRunner runner = new FirmQueRunner();

public Hero findByName(String string) throws SQLException {

String sql = "SELECT * FROM hero WHERE heroname=?";

return runner.query(sql, new BeanHandler(Hero.class), string);

}

}

photo:

f8df5da4c8d1c05403382bda6482037b.png

c5cf7f8ff32099fa3aade63e4a2e2882.png

96def7416da6abf50df903fb9689fcca.png

3b7ce9ee4baedd19baeb3a9527c497fa.png

96214a75a9f8f0d28ca691be848265d2.png

25a9adc96a131fac24c063acaacc02ea.png

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值