標籤：查詢 常用 keyword cep input head nbsp url 成功
在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 /> <inputtype="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實現非同步重新整理
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
