初学Ajax(二)
$.get()和$.post()
.load()方法是局部方法，因为它需要一个包含元素的jQuery对象作为前缀。而$.get()和$.post()是全局方法，无须指定某个元素。对于用途而言，.load()适合做静态文件的异步获取，而对于需要传递参数到服务器页面的，$.get()和$.post()更加合适。
$.get()方法有四个参数，前面三个参数和.load()一样，多了一个第四参数type，即服务器返回的内容格式：包括xml、html、script、json、jsonp和text。第一个参数为必选参数，后面三个为可选参数。
html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax</title>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
<input type="button" value="异步加载数据" />
<div id="box"> </div>
</body>
</html>
get方式接受的PHP：
<?php
if($_GET['url'] == 'ycku') {
echo "瓢城Web俱乐部";
} else {
echo "木有！";
}
?>
jQuery代码如下：
①通过直接在url问号后紧跟着传参
$("input").click(function() {
$.get("test.php?url=ycku", function(response, status, xhr) {
$("#box").html(response);
});
});
②通过第二个参数data，字符串形式的键值对传参，然后自动转换为问号后紧跟着传参
$("input").click(function() {
$.get("test.php","url=ycku", function(response, status, xhr) {
$("#box").html(response);
});
});
③通过第二个参数data，对象形式的键值对传参，然后自动转换为问号后紧跟着传参
$("input").click(function() {
$.get("test.php",{url:"ycku"}, function(response, status, xhr) {
$("#box").html(response);
});
});
post方式接受的PHP：
<?php
if($_POST['url'] == 'ycku') {
echo "瓢城Web俱乐部";
} else {
echo "木有！";
}
?>
jQuery代码：
①post提交不能使用问号传参
$("input").click(function() {
$.post("test.php?url=ycku", function(response, status, xhr) {
$("#box").html(response);
});
});
②post提交可以使用字符串形式的键值对传参，自动转换为http消息实体传参
$("input").click(function() {
$.post("test.php","url=ycku", function(response, status, xhr) {
$("#box").html(response);
});
});
③post提交可以使用对象键值对
$("input").click(function() {
$.post("test.php",{url:"ycku"}, function(response, status, xhr) {
$("#box").html(response);
});
});
使用$.post()异步返回html类型：
$("input").click(function() {
$.post("test.php",{url:"ycku"}, function(response, status, xhr) {
$("#box").html(response);
}, "html"); //php文件返回的是纯文本，默认是html或text
});
注意：第四参数type是指定异步返回的类型。一般情况下type参数是智能判断，并不需要我们主动设置，如果主动设置，则会强行按照指定类型格式返回。
$("input").click(function() {
$.post("test.php",{url:"ycku"}, function(response, status, xhr) {
$("#box").html(response);
},"xml"); //本身是纯文本，如果强行按照xml或者json数据格式返回的话，那么就无法获取数据了
});
服务器有test.xml文件：
<?xml version="1.0"?>
<root>
<url>www.ycku.com</url>
</root>
jQuery代码：
$("input").click(function() {
$.post("test.xml", function(response, status, xhr) {
//$("#box").html(response); //报错
alert(response); //[object XMLDocument]
},"xml");
});
$("input").click(function() {
$.post("test.xml", function(response, status, xhr) {
//$("#box").html(response);
alert(response);
},"html"); //默认type已经是xml，如果默认已经是xml，强行设置为html，则会连xml标签也返回
});
使用$.post()异步返回xml：
$("input").click(function() {
$.post("test.xml", function(response, status, xhr) {
//alert($(response).find("root").find("url").text());
$("#box").html($(response).find("root").find("url").text());
}); //type自动转为xml
});
注意：如果载入的是xml文件，type会智能判断，如果强行设置html类型返回，则会把xml文件当成普通数据全部返回，而不会按照xml格式解析数据。
服务器有test.json文件：
[
{
"url" : "www.ycku.com"
}
]
使用$.post()异步返回json：
$("input").click(function() {
$.post("test.json", function(response, status, xhr) {
alert(response[0].url);
}, "json");
});
$.post()方法的使用和$.get()基本上一致，他们之间的区别也比较隐晦，基本都是背后的不同，在用户使用上体现不出。具体区别如下：
- GET请求是通过URL提交的，而POST请求则是HTTP消息实体提交的
- GET提交有大小限制（2KB），而POST方式不受限制
- GET方式会被缓存下来，可能有安全性问题，而POST没有这个问题
- GET方式通过$_GET[]获取，POST方式通过$_POST[]获取(仅针对php而言)
$.getScript()和$.getJSON()
jQuery提供了一组用于特定异步加载的方法：$.getScript()，用于加载特定的JS文件；$.getJSON()，用于专门加载JSON文件。
有时我们希望能够在特定的情况再加载JS文件，而不是一开始把所有JS文件都加载了，这时就要使用$.getScript()方法。
Ajax.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax</title>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script type="text/javascript" src="demo.js"></script>
<!-- <script type="text/javascript" src="test.js"></script> -->
</head>
<body>
<input type="button" value="异步加载数据" />
<div id="box"> </div>
</body>
</html>
test.js：
alert("我在被呼唤的情况下才被加载");
jQuery代码：
点击按钮后再加载JS文件：
$("input").click(function() {
$.getScript("test.js");
});
$.getJSON()方法是专门用于加载JSON文件的，使用方法和之前的类似。
test.json：
[
{
"url" : "www.ycku.com"
}
]
jQuery代码：
$("input").click(function() {
$.getJSON("test.json", function(response, status, xhr) {
alert(response[0].url);
});
});
$("input").click(function() {
$.getJSON("test.json", function(response, status, xhr) {
alert(response); //[object Object]
},"html");
});
初学Ajax(二)的更多相关文章
- node.js 初学（二）—— 搭建注册/登录服务器
node.js 初学(二)—— 搭建注册/登录服务器 理论上来说,代码实现在理论和实际上是一样的.但实际上来说,他们不是 做一个最简单的用户注册登录功能 1.接口定义: 注册:/user?act=re ...
- Python爬虫初学（二）—— 爬百度贴吧
Python爬虫初学(二)-- 爬百度贴吧 昨天初步接触了爬虫,实现了爬取网络段子并逐条阅读等功能,详见Python爬虫初学(一). 今天准备对百度贴吧下手了,嘿嘿.依然是跟着这个博客学习的,这次仿照 ...
- ajax二次封装之异步加载
ajax二次封装之异步加载 ajax异步加载会导致在数据未加载回来就读取数据,然后出现数据为空的报错.在ajax封装时,将ajax直接改为同步,虽然可以解决报错,但是会导致页面渲染被阻塞,接口反应时间 ...
- 一、Ajax 二、JSON数据格式 三、Ajax+Jquery 四、分页的实现
一.Ajax概述###<1>概述 ###<2>组成 以XMLHttpRequest为核心,发送Ajax请求和接收处理结果 以javascript为语言基础 以XML/JSON作 ...
- 谈谈Ajax(二)
昨天还没有谈完,今天做一个了解. 首先还是以错误,来讲述. 一.AJax常见错误 Ajax常见的错误,除了昨天列举的之外.还有就是如下状态码: 405,请求类型错误,比如请求是POST,你却用GET, ...
- 初学Ajax
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和 ...
- AJAX二
二.简单的dom操作 2.使用js的dom获取页面数据 由于ajax不使用form 而form具有自动收集数据的功能. 不使用form,就需要使用dom手写代码收集数据 ①获得承载数据的元素对象 &l ...
- 初学Ajax(三)
$.ajax() $.ajax()是所有ajax方法中最底层的方法,所有其他方法都是基于$.ajax()方法的封装.这个方法只有一个参数,传递一个各个功能键值对的对象. $.ajax()方法对象参数表 ...
- 初学Ajax(一)
以下文字根据李炎恢——jQuery教程整理而成. Ajax全称为:“Asynchronous JavaScript and XML”(异步JavaScript和XML),它并不是JavaScript的 ...
随机推荐
- o2o的一些看法
最近一段时间o2o(online to offline)真是越来越来热了,尤其是微信支持支付功能之后.现在随便哪个地方都可以看到二维码,然后手机一扫就可以看到跑到线上看到卖家一些产品信息了.看到这里面 ...
- 苹果HomeKit如何牵动全国智能硬件格局
苹果HomeKit如何牵动全国智能硬件格局 2014-06-23 15:48 发表 系统分类:消费电子 自定义分类:默认 标签:智能家居 苹果在6月的WWDC开发者大会上发布了包括 ...
- OC中实例变量可见度、setter、getter方法和自定义初始化方法
在对类和对象有一定了解之后,我们进一步探讨实例变量的可见度等相关知识 实例变量的可见度分为三种情况:public(共有),protected(受保护的,默认),private(私有的),具体的不同和特 ...
- ExtJS 提示
要使ExtJS支持提示,需要在onReady的function中添加如下语句: Ext.QuickTips.init();//支持tips提示 Ext.form.Field.prototype.msg ...
- 45.modelsim仿真include文件
modelsim仿真include文件会出现找不到文件的情况,这是因为include文件路径有两种,一种是相对路径,另一种是绝对路径. 相对路径: 如果 ‘include "primitiv ...
- Oracle把两个空格以上的空格，替换为两个空格
substr( ,instr(,)),)) ) 解释如下: 1. 去掉原字串左右的空格的字符(STR),2.查找STR中空格出现二次的位置(LOC),3.从STR中的第一位到LOC-1截取STR||L ...
- Java-包
定义包用package关键字. 1:对类文件进行分类管理. 2:给类文件提供多层名称空间. 如果生成的包不在当前目录下,需要最好执行classpath,将包所在父目录定义到classpath变量中即可 ...
- hasOwnProperty与isPrototypeOf
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 我给女朋友讲编程html系列(4) -- html常用简单标签
今天似乎有点感冒,浑身无力,在操场上躺了半个小时,好了许多.好了,废话不说了,还是写今天的教程吧. 1,html中的换行标签是 br,写法是: <br /> 2,html中有一些特殊的字符 ...
- makefile常用函数
标签(空格分隔): makefile 1.字符串替换和分析函数 $(subst from,to,text) #在文本"text"中使用"to"替换每一处&quo ...