jquery实例,jquery实训

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

jQuery中ajax - get() 方法实例详解

在jquery中使用get，post和ajax方法给服务器端传递数据，在上篇文章给大家分享了jquery中ajax-post()方法实例，下面通过本文继续学习jQuery中ajax

get()

方法，具体介绍请看下文。

jQuery

Ajax

参考手册

实例

使用

AJAX

的

GET

请求来改变

div

元素的文本：

$("button").click(function(){

$.get("demo_ajax_load.txt",

function(result){

$("div").html(result);

});

亲自试一试

定义和用法

get()

方法通过远程

HTTP

GET

请求载入信息。

这是一个简单的

GET

请求功能以取代复杂

$.ajax

。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用

$.ajax。

语法

$(selector).get(url,data,success(response,status,xhr),dataType)

详细说明

该函数是简写的

Ajax

函数，等价于：

$.ajax({

url:

url,

data:

data,

success:

success,

dataType:

dataType

});

根据响应的不同的

MIME

类型，传递给

success

回调函数的返回数据也有所不同，这些数据可以是

XML

root

元素、文本字符串、JavaScript

文件或者

JSON

对象。也可向

success

回调函数传递响应的文本状态。

对于

jQuery

1.4，也可以向

success

回调函数传递

XMLHttpRequest

对象。

示例

请求

test.php

网页，忽略返回值：

$.get("test.php");

更多示例

例子

请求

test.php

网页，传送2个参数，忽略返回值：

$.get("test.php",

{

name:

"John",

time:

"2pm"

}

);

例子

显示

test.php

返回值(HTML

或

XML，取决于返回值)：

$.get("test.php",

function(data){

alert("Data

Loaded:

data);

});

例子

显示

test.cgi

返回值(HTML

或

XML，取决于返回值)，添加一组请求参数：

$.get("test.cgi",

{

name:

"John",

time:

"2pm"

function(data){

alert("Data

Loaded:

data);

});

jquery

ajax

的

$.get（）用法详解

js文件

$(document).ready(function(){

$("form").submit(function(event)

{event.preventDefault()})//取消submit的默认行为

$("form

input[type='submit']").click(function(){

var

url

$('form').attr('action');

取Form中要提交的链接

var

param

{};

组装发送参数

param['name']

$('form

input[name=name]').val();

param['age']

$('form

input[name=age]').val();

$.get(url,

param,

function(dom)

{

$('div.get').append(dom)

})

;

发送并显示返回内容

});

})

html文件

form

action="ajax.php"

method="get"

Name:

input

type="text"

name="name"

Age:

input

type="text"

name="age"

input

type="submit"

/form

div

class="get"这是ajax的get方法/div

php文件

error_reporting(0);

if($_GET["name"]=="kitty")

{

$name=

"you

are

the

lucky";

}

else

$name=$_GET["name"];

$age=$_GET["age"];

echo

"div

".$name."

".$age."/div";

以上介绍就是本文给大家分享的jQuery中ajax

get()

方法实例详解，希望大家喜欢。

相关问答

Q1: JQuery中基础过滤选择器用法实例分析

本文实例讲述了JQuery中基础过滤选择器用法。分享给大家供大家参考。具体如下：

!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

html

xmlns=""

head

meta

http-equiv="Content-Type"

content="text/html;

charset=utf-8"

title基础过滤选择器/title

style

type="text/css"

#main{

width:600px;

border:1px

solid

green;

margin:auto;

padding:10px;

}

#tbl{

border-collapse:collapse;

border-top:1px

solid

red;

border-left:1px

solid

red;

margin:auto;

}

#tbl

td{

width:60px;

height:60px;

border-collapse:collapse;

border-bottom:1px

solid

red;

border-right:1px

solid

red;

}

/style

script

src="jquery-1.6.2.min.js"

type="text/javascript"/script

script

type="text/javascript"

$(function

()

{

//=============举例1========================

//:first

说明:

匹配找到的第一个元素

//....1修改第一个单元格的背景色

//var

$tds

$("#tbl

td:first");

//$tds.css("backgroundColor",

"blue");

//....2修改第一行的背景色

//var

$trs

$("#tbl

tr:first");

//$trs.css("backgroundColor",

"blue");

//=============举例2========================

//:last

说明:

匹配找到的最后一个元素.与

:first

相对应.

//...1修改随后一个单元格的背景色

//var

$tds

$("#tbl

td:last");

//$tds.css("backgroundColor",

"blue");

//=============举例3========================

//:not(selector)

去除所有与给定选择器匹配的元素.有点类似于”非”

//...1把所有class不为tdClass的列的文本进行修改

//var

$tds

$("#tbl

td:not(.tdClass)");

//$tds.text("Not

tdClass");

//=============举例4========================

//:even

说明:

匹配所有索引值为偶数的元素，从

开始计数.js的数组都是从0开始计数的.

//例如要选择table中的行,因为是从0开始计数,所以table中的第一个tr就为偶数0.

//...1把索引值为偶数的行变成黄色

//var

$trs

$("#tbl

tr:even");

//$trs.css("backgroundColor",

"yellow");

//=============举例5========================

//:

odd

说明:

匹配所有索引值为奇数的元素,和:even对应,从

开始计数.

//var

$trs

$("#tbl

tr:odd");

//$trs.css("backgroundColor",

"yellow");

//=============举例6========================

//:eq(index)

说明:

匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数.

//...1设置第二个单元格的背景色

//var

$tds

$("#tbl

td:eq(1)");

//$tds.css("backgroundColor",

"gray");

//=============举例6========================

//:gt(index)

说明:

匹配所有大于给定索引值的元素.

//...1把下标索引大于1的所有单元格背景色设置为灰色

//var

$tds

$("#tbl

td:gt(1)");

//$tds.css("backgroundColor",

"gray");

//=============举例7========================

//:lt(index)

说明:

匹配所有小于给定索引值的元素.

//...1把下标索引小于3的所有单元格背景色设置为灰色

var

$tds

$("#tbl

td:lt(3)");

$tds.css("backgroundColor",

"gray");

//=============举例8========================

//:header(固定写法)

说明:

匹配如

h1,

h2,

h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素.

//...1把所有的h标签背景色进行修改

var

$hs

$(":header");

$hs.css("backgroundColor",

"gold");

//=============举例8========================

//slice

获取下标范围内元素

var

$trs

$("#tbl

tr").slice(1,

3);

$trs.css("backgroundColor",

"gold");

});

/script

/head

body

div

id="main"

h1我是h1/h1

h2我是h2/h2

h3我是h3/h3

table

id="tbl"

td1/tdtd1/tdtd1/td

/tr

class="tdClass"2/tdtd2/tdtd2/td

/tr

td3/tdtd3/tdtd3/td

/tr

td4/tdtd4/tdtd

class="tdClass"4/td

/tr

td5/tdtd5/tdtd5/td

/tr

td6/tdtd6/tdtd

class="tdClass"6/td

/tr

/table

/div

/body

/html

希望本文所述对大家的jQuery程序设计有所帮助。

Q2: JQuery解析XML数据的几个简单实例

用JavaScript解析XML数据是常见的编程任务，JavaScript能做的，JQuery当然也能做。下面我们来总结几个使用JQuery解析XML的例子。

第一种方案：

script

type="text/javascript"

$(document).ready(function()

{

$.ajax({

url:

'',

dataType:

'xml',

success:

function(data){

//console.log(data);

$(data).find("channel").find("item").each(function(index,

ele)

{

var

titles

$(ele).find("title").text();

var

links

$(ele).find("link").text();

console.log(titles+'-----');

$("#noticecon").find('ol').append('lia

href="'+links+'"'+titles+'/a/li');

});

}

});

})

/script

div

id="noticecon"

/ol

/div

第二种方案：

script

type="text/javascript"

$.get("",

function(data){

$(data).find('channel').find('item').each(function(index,

ele){

var

titles

$(ele).find('title').text();

var

links

$(ele).find('link').text();

$("#noticecon").find('ol').append('lia

href="'+links+'"'+titles+'/a/li');

})

});

/script

div

id="noticecon"

/ol

/div

一般步骤如下：

读取xml文件

$.get("xmlfile.xml",function(xml){

//xml即为可以读取使用的内容，具体读取见第2点

});

读取xml内容

如果读取的xml是来于xml文件，这结合上面的那点，处理如下：

$.get("xmlfile.xml",function(xml){

$(xml).find("item").length;

});

如果读取的是xml字符串，则要注意一点，xml字符串的必然被"xml"和"/xml"包围才可以被解析

$("xmlrootitem/item/root/xml").find("item").length;

解析xml内容：

示例xml：

?xml

version="1.0"

encoding="utf-8"

fields

field

Name="Name1"

fieldnamedsname/fieldname

datatype字符/datatype

/field

field

Name="Name2"

fieldnamedstype/fieldname

datatype字符/datatype

/field

/fields

以下是解析示例代码：

$(xml).find("field").each(function()

{

var

field

$(this);

var

fName

field.attr("Name");//读取节点属性

var

dataType

field.find("datatype").text();//读取子节点的值

});

以上这篇JQuery解析XML数据的几个简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

Q3: jQuery动画特效实例教程

本文以实例形式详细讲述了jQuery动画特效的实现方法。分享给大家供大家参考之用。具体方法如下：

1.自制折叠内容块

内容块如下：

div

class="module"

div

class="caption"

span标题/span

img

src="rollup.gif"

alt="rollup"

title="rolls

this

module"/

/div

div

class="body"

近日，《体坛周报》记者马德兴在接受天津体育频道《体坛新视野》节目采访时表示自己对恒大[微博]的情况比较担忧，恒大统治力比上赛季下降了很多，恒大外援存在位置重叠的问题，客场不输给西悉尼流浪者就是一个可以接受的结果。该节目称恒大联赛3连胜胜之不武，恒大的惹不起不过尔尔，恒大失去了对其它球队压倒性的优势，能力下降是恒大霸主地位有所动摇的根源所在。

/div

给img元素绑定点击事件。

$(function()

{

$('div.caption

img').click(function

()

{

//先找到img的父级元素，再找该父级元素的子元素

var

$body

$(this).closest('div.module').find('div.body');

($body.is(':hidden'))

{

$body.show();

}

else

{

$body.hide();

}

});

运行效果如下图所示：

切换元素的显示状态，还可以用toggle方法。

$(function()

{

$('div.caption

img').click(function

()

{

$(this).closest('div.module').find('div.body').toggle();

});

以上是没有动画效果的，有时候感觉会很唐突。实际上，show,hide,toggle方法都可以有动画效果。比如：

$(function()

{

$('div.caption

img').click(function

()

{

$(this).closest('div.module').find('div.body').toggle('slow');

});

又比如：

$(function()

{

$('div.caption

img').click(function

()

{

$(this).closest('div.module').find('div.body').toggle('slow',

function()

{

$(this).closest('div.module').toggleClass('rolledup',

$(this).is(':hidden'))

});

2.使元素淡入淡出

fadeIn(speed,

callback)

fadeOut(speed,

callback)

fadeTo(speed,

opacity,

callback)

3.上下滑动元素

slideDown(speed,

callback)

slideUp(speed,

callback)

slideToggle(speed,

callback)

4.停止动画

stop(clearQueue,

gotoEnd)

5.创建自定义动画

animate(properties,

duration,

easing,

callback)

$('.classname').animate({opacity:'toggle'},'slow')

如果写一个扩展函数。

$.fn.fadeToggle

function(speed){

return

this.animate({opacity:'toggle'},'slow');

}

6.自定义缩放动画

$('.classname').each(function(){

$(this).animate({

width:

$(this).width()

height:

$(this).height()

});

7.自定义掉落动画

$('.classname').each(function(){

$(this)

.css("position","relative")

.animate({

opacity:

top:

$(window).height()

$(this).height()

$(this).position().top

},'slow',function(){

$(this).hide();

})

});

8.自定义消散动画

$('.classname').each(function(){

var

position

$(this).position();

$(this)

.css({

position:

'absolute',

top:

position.top,

left:position.left

})

.animate({

opacity:

'hide',

width:

$(this).width()*5,

height:

$(this).height()*5

top:

position.top

($(this).height()

2),

left:

position.left

($(this).width()

/2)

},'normal');

});

9.队列中的动画

//动画插入队列

$('img').queue('chain',

function(){});

$('img').queue('chain',

function(){});

$('img').queue('chain',

function(){});

$('img').queue('chain',

function(){});

$('button').click(function(){

$('img').dequeue('chain');

//删除队列中的动画

})

cleaeQueue(name)//删除所有未执行的队列中的动画

delay(duration,

name)//为队列中所有未执行的动画添加延迟

相信本文所述对大家的jQuery程序设计有一定的借鉴价值。

Q4: jQuery层次选择器用法示例

本文实例讲述了jQuery层次选择器用法。分享给大家供大家参考，具体如下：

!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

html

xmlns=""

head

正文

jQuery中ajax - get() 方法实例详解

相关问答

相关阅读

ipad视频支持什么格式的视频，ipad里的视频一般是什么格式

如何关闭PPT转场动画，如何关闭ppt转场动画功能

excel时钟符号怎么打，excel表格中加时钟

敏捷开发如何做计划，敏捷开发如何做计划表

go语言string报，go语言 string

c语言函数参数中的 c语言函数参数有什么用

敏捷开发是过程还是方法，敏捷开发的原理

excel标题怎么制作，excel怎样制作标题

目录[+]