在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. 23、前端知识点--webpack的使用详解

    Webpack 是当下最热门的前端资源模块化管理和打包工具. https://www.cnblogs.com/zhangruiqi/p/7656206.html

  2. MicroPython 的优势

    定位的场景 MicroPython 在设计上最初就是为了嵌入式微处理器运行,例如在 nRF51822 (256kB flash + 16kB RAM) 的芯片上也可以运行起来,也有人肾得慌在 STM3 ...

  3. git常用相关操作

    // 账号密码克隆远程项目 git clone http://账号:密码@项目地址 // 查看当前状态 git status // 查看修改内容 git diff // 添加并提交 git add . ...

  4. JavaScript数组为什么是对象

    有过PHP编程经验的程序员学习JavaScript的时候,会发现数组也是对象,这和PHP是不同的,在PHP中数组就是数组类型,并不是是对象.究竟为什么在JavaScript中数组会是对象呢? var ...

  5. 全局解释锁GIL

    ''' 定义: In CPython, the global interpreter lock, or GIL, is a mutex that prevents multiple native th ...

  6. Postman初探

    缘起 今天要测试一个新接口,返回值应该是现有6个接口返回值中data.CountNum之和.麻烦处有: 1.用户角色不同,接口返回值也有不同.因此要用到的接口很多. 2.要对所有接口的返回值求和,再与 ...

  7. 伪类和伪元素，review

    总是分不太清楚,然后容易忘记这个概念,项目中又遇到了,复习一遍 问题 1.哪些常用的伪类?伪元素? 怎么记: 除了4个伪元素,其他都是伪类 哪四个伪元素?:before :after :first-l ...

  8. RABBITMQ 协议 AMQP协议

    https://baike.baidu.com/item/rabbitmq/9372144?fr=aladdin https://github.com/CopernicaMarketingSoftwa ...

  9. pandas数据读取（DataFrame & Series）

    1.pandas数据的读取 pandas需要先读取表格类型的数据,然后进行分析 数据说明 说明 pandas读取方法 csv.tsv.txt 用逗号分割.tab分割的纯文本文件 pd.read_csv ...

  10. FreeRTOS之taskYIELD()

    摘自:http://www.mcuchina.com/article/2007/1227/article_59.html 1.taskYIELD()   比如我创建了8个优先级一样的task,并且没有 ...