菜鸟蔡之Ajax复习第二篇(JQuery中的load()方法实现Ajax功能)
在上一篇博客中写到的是在传统的Javascript中使用XMLHttpRequest对象异步加载数据的,唉,童鞋.......看到那些代码是不是有点头疼啊!呵呵......不仅是你,我都有点反感了,不仅要判断浏览器,还要......反正就是有一大坨代码,看起来毫不爽,现在,让我们忘记拿一大坨吧(记住:这里不是真的忘记哦!好像许多公司面试Ajax这块内容时,都会让你不用拖控件的方式写一个原生态的Ajax程序呢,所以它的重要性,你懂的!)!好了,说了这么多,应该“忘记”了吧你!呵呵......见证奇迹的时刻到了(呜呜......不要说我在吹牛啊!这不是我说的,这刘谦说的,有什么事找他啊!)!在JQuery中,使用load()方法就可以轻松的实现获取异步加载数据的功能了,现在让几行代码代替这一大坨吧!(首先, 还是和以前一样,先新建1.htm和2.htm两个页面吧!)
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> //注意:这个可别忘记加啊!
<script type="text/javascript">
$(function () {
$("#btnGet").click(function () {//按钮的点击事件
$("#divMsg").load("2.htm");//调用load()方法 ; load语法格式:load(url,[data],[callback]):其中url为被加载的页面地址;可选参数data为要发送到服 //务器的数据,其格式是一个key/value;callback为加载成功后,返回至加载页面的回调函数
})
}) //这里一定要注意了哦!括号一定要 “ 成对的 同时 ”打好哦,当你写的代码多的时候,在这个点上一不小心就会出错的!
</script>
</head>
<body>
<input type="button" id="btnGet" value="获取数据" />
<div id="divMsg">
</div>
</body>
</html>
在2.htm中的代码如下:
<head>
<title></title>
</head>
<body>
姓名:小菜<br />
性别:男<br />
邮箱:cj1161059871@163.com
</body>
</html>
写完了,在这里希望大侠们不要见笑啊!因为我本来就是菜牛蔡,写出来的东西就有点二了,只当给自己复习一下吧!
相关推荐
-
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
jQuery插件AjaxFileUpload可以实现ajax文件上传,该插件使用非常简单,首先了解一下正确使用AjaxFileUpload插件的方法,然后再了解一些常见的错误信息和解决方法. 使用说明 需要使用jQuery库文件 和AjaxFileUpload库文件 使用实例 一,包含文件部分 复制代码 代码如下: <script type="text/javascript" src="jquery.js"></script> <scr
-
jquery中页面Ajax方法$.load的功能使用介绍
load语法 $(".selector").load("url", function(responseText, statusText, xmlhttprequest)); 可以做到加载一个页面的时候,如果发生错误,根据statusText给出的状态,显示对应的提示,这对用户来说非常重要. 例子,load post 代码如下 复制代码 代码如下: <div id=btnAjaxPost>点击我</div> <div id=divResu
-
如何让浏览器支持jquery ajax load 前进、后退功能
一般在做 ajax load 的时候,很多人都不会考虑到需要浏览器支持前进后退功能,因为大部分人都不知道可以实现. 最近遇到这个问题,经过一小段研究,发现github已经有现成的开源工具使用,主要实现原理是利用html的锚点,即<a href="#xxx"> 主要demo代码如下: html 复制代码 代码如下: <ul> <li><a href="#ttt">ttttttttttttttt</a><
-
jquery之ajaxfileupload异步上传插件(附工程代码)
点我下载工程代码 由于项目需求,在处理文件上传时需要使用到文件的异步上传.这里使用Jquery Ajax File Uploader这个组件下载地址:http://www.phpletter.com/download_project_version.php?version_id=6 服务器端采用struts2来处理文件上传. 所需环境: jquery.js ajaxfileupload.js struts2所依赖的jar包 及struts2-json-plugin-2.1.8.1.jar 编写文
-
jQuery Ajax之load()方法
load()方法是jQuery中最为简单和常用的Ajax方法,能载入远程HTML代码并插入到DOM中.它的语法结构为: load( url [, data][, callback] ) load()方法参数解释见下表: 参数名称 类 型 说 明 url String 请求HTML页面的URL地址 data(可选) Object 发送至服务器的key/value数据 callback(可选) Function 请求完成时的回调函数,无论请求成功或失败 1. 载入HTML文档首先创建一个名为test
-
jQuery中Ajax的load方法详解
先来看一个Ajax例子 复制代码 代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="Ajax提交" onc
-
为jquery的ajaxfileupload增加附加参数的方法
直接说方法: 复制代码 代码如下: $.ajaxFileUpload({data:{"a":123,"b":456};//附加参数,json格式}); 然后在ajaxFileUpload.js文件中修改两个函数,其实就是一个函数(给函数添加新的参数) 第一处: 复制代码 代码如下: createUploadForm: function(id, fileElementId,data){}大于在26行吧. 然后在在函数体中加入以下代码: 复制代码 代码如下: if (d
-
防止jQuery ajax Load使用缓存的方法小结
一.用法 jquery的load函数是请求另一个文件并加载到当前DOM里的调用,load方法的完整格式是:load( url, [data], [callback] )(注意没有参数是GET方式请求,有参数则是 POST方法). * url:是指要导入文件的地址. * data:可选参数:因为Load不仅仅可以导入静态的html文件,还可以导入动态脚本,例如PHP文件,所以要导入的是动态文件时,我们可以把要传递的参数放在这里. * callback:可选参数:是指调用load方法并得到服务器响应
-
jquery 读取页面load get post ajax 四种方式代码写法
load 复制代码 代码如下: $("#result").load("aaaa.asp #ccc"); get 复制代码 代码如下: $.get("aaaa.asp", { action:"get",name:"lulu" }, function(data, textStatus){ $("#result").html(data); //alert(this); //alert(data
-
菜鸟蔡之Ajax复习第二篇(JQuery中的load()方法实现Ajax功能)
在上一篇博客中写到的是在传统的Javascript中使用XMLHttpRequest对象异步加载数据的,唉,童鞋.......看到那些代码是不是有点头疼啊!呵呵......不仅是你,我都有点反感了,不仅要判断浏览器,还要......反正就是有一大坨代码,看起来毫不爽,现在,让我们忘记拿一大坨吧(记住:这里不是真的忘记哦!好像许多公司面试Ajax这块内容时,都会让你不用拖控件的方式写一个原生态的Ajax程序呢,所以它的重要性,你懂的!)!好了,说了这么多,应该"忘记"了吧你!呵呵....
-
禁止JQuery中的load方法装载IE缓存中文件的方法
使用方法如下: 复制代码 代码如下: $("#panel").load("test.asp"); //在页面装载时,在ID为#panel的DOM元素里test.asp的内容. 但是,当你修改test.asp文件的内容以后,在IE浏览器下,再利用以上方法重新装载该文件时,你会发现ID为#panel的DOM元素的内容并未发生变化,问题究竟出现在什么地方呢?原来是重新加载以后,IE浏览器并没有从服务器端重新下载修改以后的test.asp,而是直接从IE缓存中读取没有修改之
-
ajax在js中和jQuery中的用法实例详解
目录 原生 JS 怎么发送一个 get 请求 怎么发送一个 post 请求 发送一个带有参数的 get 请求 发送一个带有参数的 post 请求 jQuery $.get 几个参数,怎么使用 $.post 几个参数,怎么使用 $.ajax 几个参数,怎么使用 JSONP $.ajax 怎么发送 jaonp 请求 总结 原生 JS 怎么发送一个 get 请求 创建一个 ajax 对象 var xhr = new XMLHttpRequest() 设置请求方式和请求地址[,是否异步] xhr.ope
-
浅谈jQuery中的$.extend方法来扩展JSON对象
$.extend方法可以扩展JSON对象,用一个或多个其他对象来扩展一个对象,返回被扩展的对象. 例一 合并 settings 和 options,修改并返回 settings var settings = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; jQuery.extend(settings, options); 结果 set
-
使用JQuery中的trim()方法去掉前后空格
如下所示: function bt_submit(){ var $title = $.trim($("#title").val()); if($title=='') { ShowMessage("运营商名称不能为空","#ff0000"); return; } document.all.form1.submit(); } html代码如下: <tr> <td width="18%" align="r
-
分析了一下JQuery中的extend方法实现原理
很久没有发表帖子了,今天突然分析了一下JQuery中的extend方法实现原理.目的为了提高自己对JQuery的认识,也想了解JavaScript高手是如何编写JS的,如有不足请指正.谢谢! 下面是JQuery.extend方法源代码: 复制代码 代码如下: jQuery.extend = jQuery.fn.extend = function() { var options, name, src, copy, copyIsArray, clone, target =
-
浅谈jquery中的each方法$.each、this.each、$.fn.each
jquery.each 方法 方法一 $("img").each(function(i,elem){ // i 下标 从零开始, // elem == this // $(elem).toggleClass("example"); $(this).toggleClass("example"); }); 方法二 $.each([1,2,3,4],function(){ //$(this)==数组中的每一个数组(如果数组是对象,就是对象) }); 方
-
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
根据大体上的意思我感觉js setAttribute与jquery中attr工作是完全一样的,只是jquery中简写了并且工能更强大了,下面我来分别介绍一下他们的用法. attribute 是原生js dom 对象上的一个属性,这个属性有很多子属性,比如 isId(判断属性是否是Id) , name (获取属性名称) , value (获取属性值),attributes 用来获取dom元素 的所有属性集合. 话不多说,上例子了: <input type="text" name=&
-
关于jQuery中的each方法(jQuery到底干了什么)
1. 估计很多人都会用到jQuery中的each方法. 那就来看一看jQuery都干了些什么. 找到jquery中的each源码: 复制代码 代码如下: each: function( object, callback, args ) { var name, i = 0, length = object.length, isObj = length === undefined || jQuery.isFunction( object ); if ( args ) { if ( isObj ) {
-
JQuery中节点遍历方法实例
本文实例讲述了JQuery中节点遍历方法.分享给大家供大家参考.具体如下: <!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&
随机推荐
- 用Webpack构建Vue项目的实践
- vuejs绑定class和style样式
- 利用Javascript裁剪图片并存储的简单实现
- 正则表达式(regex)错误使用导致功能漏洞分析
- UITableViewCell在编辑状态下背景颜色的修改方法
- php实现的百度搜索某地天气的小偷代码
- 一篇不错的PHP基础学习笔记
- MySQL中把varchar类型转为date类型方法详解
- php设计模式 Decorator(装饰模式)
- JS选项卡动态替换banner图片路径的方法
- JavaScript 拖放效果代码
- python开发之list操作实例分析
- javascript 两种声明函数的方式的分析
- 在Mac OS上编译安装Nginx+PHP+MariaDB开发环境的教程
- SQL语句实现删除ACCESS重复记录的两种方法
- jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
- javascript父、子页面交互技巧总结
- ASP小贴士/ASP Tips javascript tips可以当桌面
- Windows下搭建PHP开发环境(Apache+PHP+MySQL)
- Debian7编译安装nginx简明教程