初学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的 ...
随机推荐
- linux之iptables总结
netfilter/iptables概述: netfilter/iptables是Linux内核防火墙架构,由netfilter实现功能,由iptables提供接口. iptables ...
- ssh 安装
一 ssh 1.查看ssh服务的状态 输入以下命令: sudo service sshd status 如果出现 Loaded: error (Reason: No such file or dire ...
- < java.lang >-- StringBuilder字符串缓冲区
JDK1.5出现StringBuiler:构造一个其中不带字符的字符串生成器,初始容量为 16 个字符.该类被设计用作 StringBuffer 的一个简易替换,用在字符串缓冲区被单个线程使用的时候( ...
- 如何设置potplayer播放时总在最前端
1.测试平台:potplayer 64位 2.步骤:在播放器界面上点击右键->选项->基本->最前端方式-选播放视频时在最前端(或是总在最前端) 3.选择:基本->最前端方式- ...
- VS2013 help viewer搜索结果显示源码以及桌面独立运行help viewer
安装好VS2013后,启动help viewer2.1在搜索栏中搜搜时结果会出现HTML源码. 要解决这个问题先来看看MINE,即Multipurpose Internet Mail Extensio ...
- 使用usb+preseed在virtualbox上安装ubuntu（一）
1.制作usb boot盘,在ubuntu上使用startup disk creater将ubuntu-server12.04.iso写入到usb中: 2.修改syslinux文件夹中的syslinu ...
- Eclipse中的常用快捷键
快捷修复 Command+1 //int a=100L; //int a=(int) 100L; 快捷删除行 Command+D 快速起新行 Shift+Enter (当本行代码很长时,将光标定在本行 ...
- TF-IDF与余弦相似性的应用（三）：自动摘要
有时候,很简单的数学方法,就可以完成很复杂的任务. 这个系列的前两部分就是很好的例子.仅仅依靠统计词频,就能找出关键词和相似文章.虽然它们算不上效果最好的方法,但肯定是最简便易行的方法. 今天,依然继 ...
- python-转换成exe文件（py2exe）
一.简介: py2exe是一个将python脚本转换成windows上的可独立执行的可执行程序(*.exe)的工具,这样,你就可以不用装python而在windows系统上运行这个可执行程序.py2e ...
- hdu 1028 Ignatius and the Princess III
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1028 题目大意:3=1+1+1=1+2=3 :4=4=1+1+1+1=1+2+1=1+3:所以3有3种 ...