在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. TAB切换与内容伸展闭合的结合

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. MVC中easyui的easyui-combobox的使用

    一,如下代码,赋值 @{string json = ""; foreach (var dic in EnumCouponDic) //EnumCouponDic是一个字典类型Dic ...

  3. 前端写代码自动刷新神器Browsersync

    Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面. 更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项调试 ...

  4. vim插件YouCompleteMe安装

    这里在ubuntu16.4下安装的需要提前安装cmake clang python3sudo apt-get install clang  因为不能访问google,安装时,安装go的插件会访问goo ...

  5. log4j常用的配置文件

    # priority :debug<info<warn<error #you cannot specify every priority with different file fo ...

  6. Git命令——提交、查看、后退、前进

    Git常用命令 1. 命令git init把这个目录变成Git可以管理的仓库: 2. 命令git commit把文件提交到仓库 这里需要注意的是,Git只能跟踪文本文件的改动,如txt文件,网页,所有 ...

  7. sublime下载emmet

    Emmet是一款Web前端开发工具Sublime非常有用的插件,使用仿CSS选择器的语法来生成代码,大大提高了HTML和CSS代码编写的速度.只需按住Tab键即可把一个简写展开成HTML和CSS的代码 ...

  8. [python 学习] sax

    #!/usr/bin/python # -*- coding: UTF-8 -*- import xml.sax class MovieHandler( xml.sax.ContentHandler ...

  9. java8-Stream集合操作快速上手

    java8-Stream集合操作快速上手   目录 Stream简介 为什么要使用Stream 实例数据源 Filter Map FlatMap Reduce Collect Optional 并发 ...

  10. Nginx-配置负载均衡实例

    配置负载均衡实例 实现效果: 配置负载均衡 实验代码 1) 首先准 备两个同时启动的 Tomcat 2) 在 nginx.conf 中进行配置 随着互联网信息的爆炸性增长,负载均衡(load bala ...