初学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的 ...
随机推荐
- .net 面试问题 汇总
用.net做B/S结构的系统,您是用几层结构来开发,每一层之间的关系以及为什么要这样分层? 答: 从下至上分别为:数据访问层.业务逻辑层(又或成为领域层).表示层 数据访问层:有时候也称为是持久层,其 ...
- XAML特殊字符
此部分只限制在XAML中,代码中不受此类限制. 1.特殊字符转义 XAML 特殊字符转义 特殊字符 转义 小于号 < < 大于号 > > 取址符 & & 引号 ...
- Swift Tips - Array 类型
在开发中,数组这个概念我们应该很熟悉了,Objective-C 中为我们提供了 NSArray 作为数组的实现.大家应该对很熟悉了.而在 Swift 中,为我们提供了它自己对于数组的实现,也是这里我们 ...
- 64位Windows2003下如何正确发布VesnData.Net(VDN)
64位windows2003下发布VDN,按照正常的步骤会出现:试图加载格式不正确的程序. (异常来自 HRESULT:0x8007000B)的错误. 按照下面的步骤进行处理: 1.如果安装了64位F ...
- asp.net自带的异步刷新控件使用
一直都是使用jquery的$.ajax,由于刚刚加入的公司是用asp.net的,webform与之前的ajax加在一起显得很混乱,后来发现asp.net已经封装了一下ajax功能,就查了一下,并且做了 ...
- UIScrollView缩放图片操作
要想ScrollView缩放,必须告诉缩放那个控件,它自身的大小是不会缩放的: 并且ScrollView只能缩放自己内部的子控件: 1:这时就要用到代理,代理告诉ScrollView缩放哪个控件.(设 ...
- SQL-AdventureWorks样例数据库
1. 下载样例数据库文件 输入网址:http://www.codeplex.com/ , 搜索:microsoft sql server product samples 下载对应数据库的Adventu ...
- java加载机制整理
本文是根据李刚的<疯狂讲义>作的笔记,程序有的地方做了修改,特别是路径,一直在混淆,浪费了好多时间!!希望懂的同学能够指导本人,感激尽............ 1.jvm 和 类的关系 当 ...
- hdu 4005 The war
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4005 In the war, the intelligence about the enemy is ...
- noi2006day2_最大获利 网络流
这道题是上一题的数据加强版,dinic表示毫无压力: #include<iostream> #include<cstdio> #include<cstring> # ...