文档章节

Ajax之load,get,post方式和getJSON

骑着毛驴来编程
 骑着毛驴来编程
发布于 2016/07/18 15:15
字数 821
阅读 24
收藏 3

    首先是load方法能载入html代码并插入DOM中,获取静态文件

    load方法详解:

         load( String url,Object data(可选),Function callback(可选))

         其中url加载的是html页面

         data发送至服务器的key/value数据

         callback是指注册的回调函数

注:至始至终不知道这个data是干啥的,我想这个应该是提交到后台的数据参数,利用getParameter方法可以在后台里面获取,如果有知道的可以联系我

function loadFunction(){
	$("#divText").load('../html/LoadHtml1.html .class2',{name:"姓名"},callback);
	
}
function callback(responseText,textStatus,XMLHttpRequest){
	alert("调用了回调函数"+"1."+responseText+",2."+textStatus+",3."+XMLHttpRequest);
}

其中load方法参数url里有个.class2,这里指的是只加载LoadHtml1.html页面中的class=”class2”的所有元素结点的内容

Callback传入的参数:

    responseText:请求返回的内容,这里就是加载的html页面

    textStatus:请求状态,success,errir,notmodified,timeout等4种

    XMLHttpRequest:XMLHttpRequest对象

    只要请求完成(complete)后,回调函数(callback)就会被触发

 

 

如果是非静态传递一些参数给服务器页面,则需要$.get()或$.post()方法

$.get(String url (可选),Object data(可选),Function callback(可选),String type(可选))

其中,url 指的是提交的地址

data:发送到服务器端的数据(key/value),附加到url上

Callback:载入成功后回调的函数,当responseStatus为success时回调该方法,

Type:服务器端返回内容的格式,xml,html,script,json,text和_default

 

get方式提交的回调函数在书上写只有两个函数,但是根据官方文档和本人测验实际是有三个参数

Callback回调函数会在get方式提交成功后才会调用.

 

如果返回数据是xml格式,我们要对返回的内容进行处理,例

$(data).find(“comment”).attr(“username”)

我们需要在服务器端设置:response.setHeader(“COntent-Type:text/xml;charset=utf-8”)

 

Post方式:

$.post(String url (可选),Object data(可选),Function callback(可选),String type(可选))

 

$.post("postJsp.jsp",{name:$("#username").val(),age:$("#userage").val()},callback);

Get和post方式的最大的区别:get方式url后面会以?的形式添加key=value(&)

而post的参数会封装到消息的实体内容而不可见,会更加安全

一般get的url体积大小为2-4KB,具体也没有测过

$("#send").click(function(){
	//一般get和post方式提交到actionServlet去处理业务逻辑,返回内容,而不是提交到某一页面,将页面内容全部返回
	
	//1.这个是可以的,返回的内容responseText是getJsp.jsp页面的所有内容
	//$.post("getJsp.jsp",{username:$("#username").val(),userage:$("#userage").val()},callback);
	
	//2.这个是OK的,和下面的一样
	//$.get("../AjaxServletDemo",{username:$("#username").val(),userage:$("#userage").val()},callback);
	
	var username=$("#username").val();;
	//3.可以提交,并且获取的内容是后台response.getWriter()打印出来的
	$.get("../AjaxServletDemo?username="+username,null,callback);
	
});
function callback(responseText,textStatus,XMLHttpRequest){
	alert("调用了回调函数"+"1."+responseText+",2."+textStatus+",3."+XMLHttpRequest.readyState);
}

getJSON:

$.getJSON(String url,Function callback);
Url:提交地址
Callback:回调函数.


function ver1(){
	$.getJSON("testJson.json",callback);
}
function callback(data){
	alert(data.username[1]+data.userage);
}
testJson.json文件数据:
{"username":["GY","GY1"],"userage":"30"}
Json文件就是格式非常严格的纯文本

 

© 著作权归作者所有

骑着毛驴来编程
粉丝 3
博文 11
码字总数 5391
作品 0
杭州
程序员
私信 提问
JQuery——实现Ajax应用

实现Ajax应用 1 .load()异步请求数据,通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,调用格式为load(url,[data],[callback]) 2 参数url为加载服务器地址,可选项dat...

拉考的考拉
2017/11/23
0
0
Ajax中的load()方法实现指定区域加载或刷新html与jsp

梳理知识方法的时候,笔者还是有数的,就不闲扯了。 一、Jquery中的Ajax Jquery对Ajax操作进行了封装,在Jquery中: 最底层的是$.ajsx(), 第二层是load()、$.get()、$.post() 第三层是$.getJS...

Red_Ant_hoyl
2018/08/26
0
0
AJAX知识总结

jQuery Ajax总结 jQuery对Ajax的操作进行了封装。jQuery中属于最底层的方法,这个放在后面说,首先看看封装了.ajax()属于最底层的方法,这个放在后面说,首先看看封装了.ajax()的方法。 load...

aiTCR
2017/11/27
0
0
六、jQuery与Ajax的应用

Ajax全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),它并不是指一种单一的技术,而是有机地利用了一系列交互式网页应用相关的技术所形成的结合体。它的出现,揭开了无刷新...

Winnie007
2015/11/21
131
0
JQuery AJAX 方法总结:

JQuery中主要AJax方法: 一、load: $(selector).load(url,[data],[callback]);从服务器中加载数据并将返回数据放入被选元素中。 参数含义: url : 为希望加载URL,可以将JQuery的选择器添加...

wait106427
2015/08/10
289
0

没有更多内容

加载失败,请刷新页面

加载更多

debian10使用putty配置交换机console口

前言:Linux的推广普及,需要配合解决实际应用方能有成效! 最近强迫自己用linux进行实际工作,过程很痛苦,还好通过网络一一解决,感谢各位无私网友博客的帮助! 系统:debian10 桌面:xfc...

W_Lu
38分钟前
10
0
aelf Enterprise 0.8.0 beta有奖公测,“Bug奖金计划”重磅开启

2019年9月30日,aelf Enterprise 0.8.0 beta版正式发布。aelf Enterprise 0.8.0 beta是一个完备的区块链系统, 包含完备的区块链系统、开发套件、开发文档、以及配套的基础应用和基础服务。 ...

AELF开发者社区
40分钟前
8
0
oracle 初始化数据库脚本

create user lpf identified by 123456; create tablespace lpf_ts_cms datafile '/opt/app/oracle/product/11.2.0/lpf.dbf' size 200M; alter user lpf default tablespace lpf_ts_cms; sel......

internetafei
44分钟前
7
0
《区块链DAPP开发入门、代码实现、场景应用》笔记1——天外飞仙DAPP

Solidity编程语言解决了编写智能合约的不友好的问题,但是当合约编译并部署之后,对与这些接口的访问,对于一般的使用者来说,门槛有点高, 对普通用户来说也是非常不友好,为了使广大用户理...

柯南和由美
49分钟前
6
0
流程图制作软件推荐_流程图制作软件哪个好

流程图(Flow Chart)是一种表示算法思路的图示,通过特定图形、图表可以直观的说明某一过程。这种过程既可以是生产线上的工艺流程图,也可以标明某项任务必需的管理过程。为了便于识别,绘制...

工具分享
51分钟前
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部