Jquery工作常用实例 使用AJAX使网页进行异步更新

AJAX = Asynchronous JavaScript and XML.，是一种创建快速动态网页的技术。
AJAX 通过在后台与服务器交换少量数据的方式，允许网页进行异步更新。这意味着有可能在不重载整个页面的情况下，对网页的一部分进行更新。
通过 jQuery AJAX，你可以直接把远程数据载入网页被选HTML元素中。
Jquery Ajax常用的函数有三种，分别是：
$.post(url,data,callback,type)：使用 HTTP POST 来加载远程数据；
$.get(url,data,callback,type)：使用 HTTP GET 来加载远程数据；
$.ajax(options)：把远程数据加载到 XMLHttpRequest 对象中；
如果需要对以上三种ajax函数做深入了解的，可以参考我的博文“jQuery AJAX 函数详解与实例应用”。
实例：
ajax_load.html文件内容：


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ajax_load.html</title>
</head>
<body>
<h2 style="color:#FF0000">我是李云，Jquery很好用！</h2>
</body>
</html>

index.html文件内容：


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用Ajax post、get或Ajax方法来改变HTML内容</title>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
//post方法异步获得ajax_load.html文件内容并显示于当前页：
/*
$.post("ajax_load.html",function(data){
//alert(data);
$("#changeCon").html(data);
});
*/
//get方法异步获得ajax_load.html文件内容并显示于当前页：
/*
$.get("ajax_load.html",function(data){
$("#changeCon").html(data);
});
*/
//ajax方法异步获得ajax_load.html文件内容并显示于当前页：
$.ajax({
url:"ajax_load.html",
async:false,
success:function(data)
{
$("#changeCon").html(data);
}
})
});
})
</script>
</head>
<body>
<div id="changeCon"><h2>通过Ajax load改变此处内容</h2></div>
<input type="button" id="button" value="Click me" />
</body>
</html>

如上，以上三种方法都能达到同样的效果，此实例比较简单，对刚入门学Jquery ajax函数的朋友还是有一定的帮助的，更多的还要自己多动手去尝试。

赞 (0)

相关推荐

  • jquery ajax 局部无刷新更新数据的实现案例

    要更新的页面 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>&l

  • 基于jQuery实现的百度导航li拖放排列效果，即时更新数据库

    index.php中 var autoSave = false; 控制不自动提交. index.php 复制代码 代码如下: <?php require 'db.php'; $query = "SELECT `id`,`order`,`name` FROM `limove` ORDER BY `order`"; $lis = mysql_query($query,$conn); $li_count = mysql_num_rows($lis); ?> <!DOCTYP

  • ajax更新数据后，jquery、jq失效问题

    给元素绑定click事件 ,但是遇到一个问题 就是 当我执行一些ajax请求后 这个click事件就失效了 比如说 我的分页是一个ajax请求 但我点下一页时 后生成的元素a就没有了click事件了 其实 原因很简单 ajax加载内容是在$(document).ready()之后的操作,这个时候给绑定函数的时候,找到的元素集合中还不包括ajax加载的内容,所以原来的没有问题,后加载的就没有绑定 解决方法 有两个 : 1. 在ajax请求成功之后重新绑定 2. 用live方法 复制代码 代码如下:

  • jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法

    本文实例讲述了jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法.分享给大家供大家参考,具体如下: JS鼠标双击事件 onDblClick <td width="10%" title="双击修改" ondblclick="ShowElement(this,<%#Eval("id") %> </td> 这里的本人用绑定的值是传的当前行对应的ID号 function ShowEle

  • Jquery easyUI 更新行示例

    更新指定的行, param 参数包含下列特性: index:更新行的索引. row:行的新数据. 复制代码 代码如下: var grid = $("#QualityAdd").datagrid("updateRow", { index: gridIndex, row: { Url: "<a href=\"#\">"+r[0].html+"</a>" } }); datagrid 内置

  • 巧妙使用JQuery Clone 添加多行数据，并更新到数据库的实现代码

    web前端代码: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="BatchAdd.aspx.cs" Inherits="BatchAdd" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www

  • JQuery DataTable删除行后的页面更新利用Ajax解决

    使用Jquery的DataTable进行数据表处理非常方便,常遇到的一个问题就是删除一行后页面必须进行更新,需要注意的方法如下:前台页面中初始化table时注意: 复制代码 代码如下: var table = $('#sorting-advanced'); table.dataTable({ 'bServerSide': true, 'sAjaxSource': 'servlet/UserList<%=queryString%>', 'bProcessing': true, 'bStateSa

  • jquery实现触发时更新下拉列表内容的方法

    本文实例讲述了jquery实现触发时更新下拉列表内容的方法.分享给大家供大家参考,具体如下: 服务端假如有个请求地址用来返回所需数据 url:/hello 返回类似: 复制代码 代码如下: [{"西瓜":10},{"苹果":12},{"香蕉":13},{"芒果":14}] 这样的json数据 html: 按钮:<input type="button" id="btn" value=

  • jQuery学习总结之元素的相对定位和选择器(持续更新)

    jQuery学习总结之元素的相对定位和选择器(持续更新)

    ①jQuery元素的相对定位. jQuery中不仅可以使用选择器就行绝对定位,而且还可以进行相对定位,只要在$()中指定第二个参数,第二个参数就是相对的元素.第二个参数传递一个jQuery对象,则相对于这个对象为基准进行相对的选择. 复制代码 代码如下: <html> <head> <title>jQuery元素的相对定位和选择器</title> <script type="text/javascript" src="jQ

  • Jquery工作常用实例 使用AJAX使网页进行异步更新

    AJAX = Asynchronous JavaScript and XML.,是一种创建快速动态网页的技术. AJAX 通过在后台与服务器交换少量数据的方式,允许网页进行异步更新.这意味着有可能在不重载整个页面的情况下,对网页的一部分进行更新. 通过 jQuery AJAX,你可以直接把远程数据载入网页被选HTML元素中. Jquery Ajax常用的函数有三种,分别是: $.post(url,data,callback,type):使用 HTTP POST 来加载远程数据: $.get(ur

  • web前端开发JQuery常用实例代码片段(50个)

    本文给大家展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快又好地把事情完成.这些都是我尽量记住的有着最佳性能的代码段,因此如果你发现你任何可以做得更好的地方的话,欢迎把你的版本粘贴在评论中!我希望你在这一文章中能找到有帮助的东西. 1. 如何创建嵌套的过滤器 //允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分.在这种情况下

  • jQuery+json实现的简易Ajax调用实例

    本文实例讲述了jQuery+json实现的简易Ajax调用.分享给大家供大家参考,具体如下: Userservlet.java代码: package com.iss.servlet; import org.json.JSONException; import org.json.JSONObject; import com.iss.pojo.User; import com.iss.util.JSONUtil; public class UserServlet extends HttpServle

  • 轻量级网页遮罩层jQuery插件用法实例

    轻量级网页遮罩层jQuery插件用法实例

    本文实例讲述了轻量级网页遮罩层jQuery插件用法.分享给大家供大家参考.具体如下: 使用jQuery的好处是很多人为它写一些组件,而在项目所需用到功能也都可以找到一些组件去完成. 现在又这样一个需求当用户点击一个按钮后不允许用户进行任何的操作,取而代之的是弹出一个遮罩层显示一个loading提示框,效果如下. 其实这个需求很简单,但很多组件体积相对这个需求来说太大了,在网上瞎溜达了找到了一个还不错的组件,作者是上面也没有写.现在就来分析一下这个组件的源码和使用 /** * @部分参数说明 */

  • jQuery Ajax 实例代码 ($.ajax、$.post、$.get)

    $.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$.ajax的一般格式 $.ajax({ type: 'POST', url: url , data: data , success: success , dataType: dataType }); 二.$.ajax的参数描述 参数 描述 url 必需.规定把请求发送到哪个 URL. data 可选.映射或字符串值.规定连同请求发送到服务器的数据. success(data, textS

  • jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解

    jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解

    简单的两个步骤即可实现分页功能 <script src="<%=basePath%>/resources/js/jquery-1.7.1.min.js"></script> <script src="<%=basePath%>/resources/js/jquery.loehpagerv1.0.js"></script> <script type="text/JavaScript

  • jQuery中常用的遍历函数用法实例总结

    本文实例总结了jQuery中常用的遍历函数用法.分享给大家供大家参考.具体如下: 1. children()函数 children()函数用于选取每个匹配元素的子元素,并以jQuery对象的形式返回. 你还可以使用选择器进一步缩小筛选范围,筛选出符合指定选择器的元素. 用法示例如下: // 返回jQuery对象所有匹配元素的标识信息数组 // 每个元素形如:tagName或tagName#id(如果有id的话) function getTagsInfo($doms){ return $doms.

  • jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法

    本文实例讲述了jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法.分享给大家供大家参考.具体分析如下: jQuery通过load()方法载入另外一个网页文件内的指定标签内容到div标签,如果我们可以加载网页b.html中的id为p1的标签内容到网页a.html的div标签内 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> <

  • jQuery 学习第五课 Ajax 使用说明

    jQuery 学习第五课 Ajax 使用说明

    jQuery提供了若干个ajax函数,他们大同小异,只是为了处理不同类型的数据而分开来.最简单的是get(url,parameters,callback),这个函数发起一个GET请求,将服务器返回的数据传递给callback处理. 下面的例子实现了当鼠标悬浮在超链接上的时候,就发起一个ajax请求,从服务器端返回关于此超链接的更多介绍的效果.先看服务器端代码,新建一个ajaxload.ashx,仅作为示例,获得查询参数为word的值,并返回: 复制代码 代码如下: <%@ WebHandler

  • JQuery的常用选择器、过滤器、方法全面介绍

    1.jQuery对象转换成DOM对象 a. var $cr = $("#cr"); //jQuery对象 var cr=$cr[0]; //DOM对象 alert(cr.checked); //检测checkbox是否被选中了 b. var $cr=$("#cr"); //jQuery对象 var cr=$cr.get(0); //DOM对象 alert(cr.checked); //检测checkbox是否被选中了 2.DOM对象转换成jQuery对象 var c

随机推荐