ajax常用操作
load的方法的使用（现在已不常用）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<!-- 引进jQuery -->
<script src="jquery.js"></script>
<style type="text/css">
input{
margin-top: 30px;
}
div{
margin-top: 20px;
width: 150px;
height: 60px;
border:2px solid red;
}
</style>
</head>
<body>
<input type="button" value="button-1" id="button1" />
<div id="content1"></div>
<input type="button" value="button-2" id="button2" />
<div id="content2"></div>
<input type="button" value="button-3" id="button3" />
<h2 style="display:none" id="img">加载中...</h2>
<div id="content3"></div>
<script type="text/javascript">
$('#button1').click(function () {
//Math.random()能够解决严重的缓存问题，特别对于ie
$('#content1').load('demo1.php?'+Math.random(),function(msg){
$('#content1').html(msg);
})
});
$('#button2').click(function () {
//在html中获取地址栏中传递的参数
$('#content2').load('demo2.html#one?'+Math.random(),function(msg){
$('#content2').html(msg);
})
});
$('#button3').click(function () {
//在html中获取地址栏中传递的参数
$('#content3').load('demo3.php?'+Math.random(),function(msg){
$('#content3').html(msg);
})
});
</script>
</body>
</html>
demo1.php的内容是：
<?php
echo '这是php文件返回的内容，将会返回到div里';
?>
demo2.html的内容是：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo2</title>
</head>
<body>
<span id="one" style="color:red">我是id为one里span里的内容</span>
<span id="two" style="color:blue">我是id为two里span里的内容</span>
</body>
</html>
demo3.php的内容是：
<?php
sleep(3);//3秒后响应
echo '111';
?>
ajax----表单序列化
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<!-- 引进jQuery -->
<script src="jquery.js"></script>
</head>
<body>
<form method="post">
a项:<input type="text" name="a" /><br/>
b项:<input type="text" name="b" /><br/>
c项:<input type="text" name="c" /><br/>
d项:<input type="text" name="d" /><br/>
e项:<input type="text" name="e" /><br/>
f项:<input type="text" name="f" /><br/>
<input type="button" id="submit" value="提交" />
</form>
<script type="text/javascript">
//表单序列化,一定要包含在form里，每个元素要有name属性
$('#submit').click(function () {
//表单序列化得到所有数据
var data = $('form').serialize();
$.ajax({
type: "POST",
url:'demo4.php',
data:data,// 要提交的表单
success: function(ms) {
alert($('form').serialize());
alert(ms);
},
error:function(jqXHR,textStatus,errorThrown){
if(errorThrown == 'Not Found'){
console.log('请求地址不存在');
}
if(textStatus == 'timeout'){
console.log('请求超时');
}
}
});
})
</script>
</body>
</html>
demo4.php的内容是：
<?php
echo $_POST['a'];
?>
ajax操作xml，json
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<!-- 引进jQuery -->
<script src="jquery.js"></script>
</head>
<body>
<input type="button" value="button-5" id="button5" />
<input type="button" value="button-6" id="button6" />
<script type="text/javascript">
//ajax操作xml
$('#button5').click(function(){
$.ajax({
url:'stu.xml?'+Math.random(),
type:'get',
dataType:'xml',
success:function(xml){
$(xml).find('title').each(function(){
//操作xml文件是，html()方法不可用
alert($(this).children("li").text())
});
}
})
})
//ajax操作json,eval的妙用
$('#button6').click(function(){
$.ajax({
url:'demo6.php?'+Math.random(),
type:'get',
dataType:'json',
success:function(rs){
alert(eval(rs));//object
alert(eval(rs[0].AreaId));//123
}
})
})
</script>
</body>
</html>
stu.xml的内容是：
<?xml version="1.0" encoding="UTF-8"?>
<stu>
<title>
<li>aa</li>
</title>
<title>
<li>bb</li>
</title>
<title>
<li>cc</li>
</title>
</stu>
demo6.php的内容是：
<?php
$strJSON = '[{"AreaId":"123"},{"AreaId":"345"}]';
echo $strJSON;
?>
ajax常用操作的更多相关文章
- Ajax-04 jQuery Ajax 常用操作
jQuery jQuery 其实就是一个JavaScript的类库,其将复杂的功能做了上层封装,使得开发者可以在其基础上写更少的代码实现更多的功能. jQuery Ajax a.概述 jQuery 不 ...
- python+selenium实现动态爬取及selenuim的常用操作
应用实例可以参考博客中的12306自动抢票应用 https://www.cnblogs.com/mumengyun/p/10001109.html 动态网页数据抓取 什么是AJAX: AJAX(Asy ...
- legend3---lavarel常用操作代码2
legend3---lavarel常用操作代码2 一.总结 一句话总结: 对于王思cong被执法人的感悟:失意时 莫心伤,得意时 莫膨胀 1.lavarel自动事务? DB::transaction方 ...
- legend3---lavarel常用操作代码
legend3---lavarel常用操作代码 一.总结 一句话总结: 要自己总结一下常用代码,这样才方便,也才有收获 1.路由示例:Route::get('/login','Home\Login\L ...
- 【三】用Markdown写blog的常用操作
本系列有五篇:分别是 [一]Ubuntu14.04+Jekyll+Github Pages搭建静态博客:主要是安装方面 [二]jekyll 的使用 :主要是jekyll的配置 [三]Markdown+ ...
- php模拟数据库常用操作效果
test.php <?php header("Content-type:text/html;charset='utf8'"); error_reporting(E_ALL); ...
- Mac OS X常用操作入门指南
前两天入手一个Macbook air,在装软件过程中摸索了一些基本操作,现就常用操作进行总结, 1关于触控板: 按下(不区分左右) ＝鼠标左键 control+按下 ...
- mysql常用操作语句
mysql常用操作语句 1.mysql -u root -p 2.mysql -h localhost -u root -p database_name 2.列出数据库: 1.show datab ...
- nodejs配置及cmd常用操作
一.cmd常用操作 1.返回根目录cd\ 2.返回上层目录cd .. 3.查找当前目录下的所有文件dir 4.查找下层目录cd window 二.nodejs配置 Node.js安装包及源码下载地址为 ...
随机推荐
- X-Windows桌面
提到X-Windows桌面,人们最先想到的一般都是KDE和GNOME.目前大多数的Linux发行版上的桌面环境都采用了这两个东西.确实,KDE和GNOME做得很好,界面美观.使用方便,而且现在Bug越 ...
- UE4/Unity3D中同时捕获多高清摄像头的高效插件
本文主要讲实现过程的一些坑. 先说下要实现的目标,主要功能在UE4/Unity中都要用,能同时捕获多个摄像头,并且捕获的图片要达到1080p25桢上,并且需要经过复杂的图片处理后丢给UE4/Unity ...
- 一分钟搭建Vue2.0+Webpack2.0多页面项目
想要自己一步步搭建的比较麻烦,不是很推荐,最少也要使用vue-cli,在其基础上开始搭建,今天我的主题是一分钟搭建,那么常规方法肯定不能满足的, 而我用的方法也很简单,就是使用已经配置完成的demo模 ...
- JavaScript 变量、类型与计算
变量类型 变量计算 变量 题目: JavaScript 中使用typeof能得到的有哪些类型? ``` 1.1 变量类型 (1).js中的数据类型:字符串.数字.布尔.数组.对象.Null.Undef ...
- python_print和input
什么是输入? --用户从键盘.鼠标或其他终端 输入 的数据 -- input("提示信息") --python 2.7 rqw_input("提示信息") 如何 ...
- Linux用户登录记录日志和相关查看命令汇总
# 1 utmp.wtmp.btmp文件 Linux用户登录信息放在三个文件中: 1 /var/run/utmp:记录当前正在登录系统的用户信息,默认由who和w记录当前登录用户的信息,uptime记 ...
- Maven的Archetype简介
Archetype,骨架的意思. 文章出处:http://m.blog.csdn.net/blog/FireOfStar/42526027 Archetype是什么? 简单的说,Archetype是M ...
- 00_HTML入门第二天
PS切图 快捷键操作无效,原因是没有切换到英文输入状态 常用快捷键新建 CTRL+N 打开 CTRL+O关闭 CTRL+W保存 CTRL+S 另存为 CTRL+SHIFT+S ...
- openvpn服务端与客户端网段互通
http://www.softown.cn/post/140.html OpenVPN安装.配置教程 http://www.softown.cn/post/137.html openvpn的serve ...
- CSS继承、层叠和特殊性
1.继承 (1)样式应用于某个特定的HTML标签元素,而且应用于其后代. (2)但某些标签不适用,如border: (3)例子:p{color:red;}设置了颜色 <p class=" ...