在JQ中使用Ajax

最新推荐文章于 2022-04-27 12:20:25 发布

meahu

最新推荐文章于 2022-04-27 12:20:25 发布

阅读量645

点赞数

分类专栏： JQuery Ajax Json

本文链接：https://blog.csdn.net/u014181418/article/details/40078183

版权

JQuery 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

Ajax

1 篇文章 0 订阅

订阅专栏

Json

1 篇文章 0 订阅

订阅专栏

Ajax（Asynchronous JavaScript and XML）是异步 JavaScript 和 XML，可以用于无刷新状态更新页面，并且实现异步处理数据。

在JQuery中如何使用Ajax呢？JQuery 对 Ajax 做了封装，我们使用起来也较为方便，不需要去考虑浏览器兼容性。最底层的封装方法为：$.ajax()，第二层封装有三种方：.load()、$.get()和$.post()，最高层是$.getScript()和$.getJSON()方法。

$.load()方法是局部方法，需要一个包含元素的 jQuery 对象作为前缀。而$.get()和$.post()是全局方法，无须指定某个元素。对于用途而言， .load()适合做静态文件的异步获取，而对于需要传递参数到服务器页面的，$.get()和$.post()更加合适。

$.ajax()

该方法仅有一个参数，是一个一个键值对的对象，默认是get方式传递数据，如下是post方式传递数据

$('input').click(function(){
	$.ajax({
		type:'POST',
		url:'test.php',
		data:{variable:'book'},
		success:function(res,sta,xhr){ $('#box').html(res); }
	});
});

结果：遇见最美的你

$.load()

改方法有3个参数：url（请求数据的路劲，String类型）、data（请求的数据，键值对表示，Object类型）、回调函数（成功或失败的的回调，函数类型），后2个参数可有可无。

文件的准备1：test.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" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>

<body>
<input type="button" value="异步加载数据" />
<div id="box"></div>
</body>
</html>

文件的准备2：test.php

<?php
	if($_POST && $_POST['variable'] == 'book') {
		echo '遇见最美的你';
	}else if($_GET && $_GET['variable'] == 'book') {
		echo '台湾单车环岛笔记';
	} else{
		echo '没有数据';
	}	
?>

现在编写test.js

1、用get方式请求数据

$('input').click(function () {
      $('#box').load('test.php?variable=book');
});

结果：台湾单车环岛笔记

2、用post方式请求数据

$('input').click(function () {
    $('#box').load(
        'test.php', 
        {variable : 'book'}
    );
});

结果：遇见最美的你

$.get()

$.get()方法有四个参数，url、data、回调函,比起.load()多了一个参数 type，即服务器返回的内容格式：包括 xml、html、script、json、jsonp 和 text，第4个默认可不写，系统会根据类型智能选择，如果人为选择不当，就会把放回的数据强制转化为人为的类型。第一个参数为必选参数，后面三个为可选参数。

$('input').click(function(){
		$.get(
		'test.php',
		{variable:'book'},
		function(res,sta,xhr){$('#box').html(res);},
		'html'
	);
});

结果：台湾单车环岛笔记

接下来演示该方法请求xml文件的数据

xml文件：

<?xml version="1.0"?>
<root>
	<book>遇见最美的你</book>
</root>

test.js的代码：

$('input').click(function(){
	$.get(
		'test.xml',
		function(res,sta,xhr){ $('#box').html($(res).find('root').find('book').text()); }
	);
});

结果：遇见最美的你

接下来演示该方法请求json文件的数据

json文件：

[
	{
		"book" : "台湾单车环岛游",
		"price": 45
	},
	{
		"book" : "遇见最美的你",
		"price": 23
	}
]

test.js的代码：

$('input').click(function(){
	$.get(
<span style="white-space:pre">	</span>	'test.json',
		function(res,sta,xhr){ $('#box').html($(res)[0].price); },
		'json'
	);
});

结果： 45

$.post()

该方法与$.get()用法基本一样，也可以用于请求xml，json文件

$('input').click(function(){
	$.post(
		'test.php',
		{url:'ycku'},
		function(res,sta,xhr){$('#box').html(res);},
		'html'
	);
});

结果：遇见最美的你

$.getScript()

用于加载特定情况下指定的 JS 文件，比如用户点击了某个按键，触发了某个事件才把该js文件加载进来，否则不加载，以节省资源。

$('input').click(function(){
	$.getScript('test.js');
});

$.getJSON()

用于专门加载 JSON 文件。

被请求的json文件

[
	{
		"book" : "台湾单车环岛游",
		"price": 45
	},
	{
		"book" : "遇见最美的你",
		"price": 23
	}
]

test.js文件：

$('input').click(function(){
		$.getJSON(
			'test.json',
			function(res,sta,xhr){ $('#box').html( res[1].book); }
		);
	});

结果：遇见最美的你

meahu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在JQ中使用Ajax

水电费
复制链接

扫一扫

专栏目录

在JQ中使用Ajax

$.ajax()

$.load()

1、用get方式请求数据

2、用post方式请求数据

$.get()

$.post()

$.getScript()

$.getJSON()

“相关推荐”对你有帮助么？