在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：请求成功后的回调方法

代码：

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<script type="text/javascript">

	// 取得事件的方法

	function callback() {

		// 得到font标签对象

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

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

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

	}

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

	function referTime() {

		// 进行刷新操作

		setInterval(callback, 1000);

	};

</script>

<script type="text/javascript">

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

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

	}, 1000));

</script>

<script type="text/javascript">

	function find(id) {

		var ele = document.getElementById(id);

		$.ajax({

			　　　　type : "POST",

			　　　　url : "<c:url value='/AjaxServlet'/>?method=findByName",

			　　　　data : 'username=' + ele.value,

			　　　　success : function(msg) {

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

			}

		});

	}

</script>

　　jsp页面：

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

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

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

<html>

<head>

<title>JQuery实现异步刷新</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="table.css">

<!-- 实现javascript的时间跳动，局部刷新操作 -->

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<script type="text/javascript">

	// 取得事件的方法

	function callback() {

		// 得到font标签对象

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

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

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

	}

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

	function referTime() {

		// 进行刷新操作

		setInterval(callback, 1000);

	};

</script>

<script type="text/javascript">

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

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

	}, 1000));

</script>

<script type="text/javascript">

	function find(id) {

		var ele = document.getElementById(id);

		$.ajax({

			type : "POST",

			url : "<c:url value='/AjaxServlet'/>?method=findByName",

			data : 'username=' + ele.value,

			success : function(msg) {

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

			}

		});

	}

</script>

</head>

<body>

	<table cellspacing="0" border="1">

		<tr class="tab-4">

			<td colspan="3" align="center" style="font-size: 20">局部刷新操作</td>

		</tr>

		<tr class="tab-3">

			<td>Javascript实现局部刷新（时间跳动）</td>

			<td><font color="red" size="5px" id="time1"></font></td>

			<td><input type="button" value="刷新时间" height="30px"

				onclick="referTime()" /></td>

		</tr>

		<tr class="tab-3">

			<td>jquery实现局部刷新（时间跳动）</td>

			<td><font color="red" size="5px" id="time2"></font></td>

			<td><input type="button" value="刷新时间" id="btn" /></td>

		</tr>

		<tr class="tab-3">

			<td width="200px">ajax方法从数据库查询内容</td>

			<td><font color="black" size="2px" id="font"></font></td>

			<td>Name: <input type="text" id="user" /><br /> <input

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

			</td>

		</tr>

	</table>

</body>

</html>

　　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>(Hero.class), string);

	}

}

　　photo:

Jquery的Ajax实现异步刷新的更多相关文章

  1. JQuery中Ajax的操作

    JQuery   Ajax异步操作的方式: $.ajax,$.post, $.get, $.getJSON. 一, $.ajax,这个是JQuery对ajax封装的最基础步,通过使用这个函数可以完成异 ...

  2. 原生态AJAX详解和jquery对AJAX的封装

    AJAX: A :Asynchronous [eI`sinkrenes] 异步 J :JavaScript    JavaScript脚本语言 A: And X :XML 可扩展标记语言 AJAX现在 ...

  3. jquery中ajax的使用

    Java软件开发中,后台中我们可以通过各种框架,像SSH等进行对代码的封装,方便我们对Java代码的编写,例如,Struts,SpringMVC对从前台到action的流程进行封装控制,使我们只需要进 ...

  4. jQuery 第六章 jQuery在Ajax应用

    1.本章目标 ajax 2.ajax 异步刷新技术,我们的网页不需要全部刷新,按需实现局部刷新,上线后台的交互 用户体验好 地图,前台验证,表单提交,修改,查询等等 原生的js和ajax packag ...

  5. 用jQuery实现ajax总结以及跨域问题

    本文为作者原创,未经博主允许,不可转载 ajax请求的常用的参数设置: type:请求类型,"POST","GET",默认为geturl:发送请求的地址data ...

  6. js原生ajax与jquery的ajax的用法区别

    什么是ajax和原理? AJAX 是一种用于创建快速动态网页的技术. 通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据 XMLHttpRequest对象的基本属性: onre ...

  7. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  8. 【原创经验分享】JQuery（Ajax）调用WCF服务

    最近在学习这个WCF,由于刚开始学 不久,发现网上的一些WCF教程都比较简单,感觉功能跟WebService没什么特别大的区别,但是看网上的介绍,就说WCF比WebService牛逼多少多少,反正我刚 ...

  9. jQuery版AJAX简易封装

    开发过程中,AJAX的应用应该说非常频繁,当然,jQuery的AJAX函数已经非常好用,但是小编还是稍微整理下,方便不同需求下,可以简化输入参数,下面是实例代码: $(function(){ /** ...

随机推荐

  1. app防攻击办法

    方法一 要求请求端带上一个随机字符串state(也可以是特定规则生成的,甚至是从服务器上请求过来的),服务端(用过滤/拦截器之类的实现不会影响业务代码)收到之后缓存一定的时间(长短视业务和硬件),每次 ...

  2. Simple GB28181 System

    I. Deployment  / Architecture Block Diagram II. Resources Used 1. freeswitch —— sip server and media ...

  3. linux加大服务器文件描述符

    最简单的说,在 unix/liux 里面,你的服务只要开启一个进程,就要占用文件描述符的.liunx 默认 是 1024,如果描述符少了,你的访问量多了,你的服务器支撑不了,所以要把描述符加大. #e ...

  4. 88-基于FMC接口的2路CameraLink Base输入子卡模块

    基于FMC接口的2路CameraLink Base输入子卡模块 1.板卡概述 FMC连接器是一种高速多pin的互连器件,广泛应用于板卡对接的设备中,特别是在xilinx公司的所有开发板中都使用.该Ca ...

  5. MySQL concat函数里面单引号的使用

    通过concat拼字符串的时候,如果语句里面需要使用单引号,可以使用两个单引号来代替一个引号

  6. CF429E Points and Segments

    链接 CF429E Points and Segments 给定\(n\)条线段,然后给这些线段红蓝染色,求最后直线上上任意一个点被蓝色及红色线段覆盖次数之差的绝对值不大于\(1\),构造方案,\(n ...

  7. LOJ2540「PKUWC2018」随机算法

    又是一道被咕了很久的题 貌似从WC2019之前咕到了现在 我们用f[i][s]表示现在最大独立集的大小为i 不可选集合为s 然后转移O(n)枚举加进来的点就比较简单啦 这个的复杂度是O(2^n*n^2 ...

  8. Python---基础-运算符int和range函数

    这行代码是什么意思 if not (money<100) money >= 100 -------------------------------假设有x = 1, y = 2, z = ...

  9. Jenkins插件--通知Notification

    参考来源:http://blog.csdn.net/wangmuming/article/details/22925357 ============================ 题外话 邮箱配置需 ...

  10. [洛谷P3145] CQOI2009 循环赛

    问题描述 n队伍比赛,每两支队伍比赛一次,平1胜3负0. 给出队伍的最终得分,求多少种可能的分数表. 输入格式 第一行包含一个正整数n,队伍的个数.第二行包含n个非负整数,即每支队伍的得分. 输出格式 ...