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常用操作的更多相关文章

  1. Ajax-04 jQuery Ajax 常用操作

    jQuery jQuery 其实就是一个JavaScript的类库,其将复杂的功能做了上层封装,使得开发者可以在其基础上写更少的代码实现更多的功能. jQuery Ajax a.概述 jQuery 不 ...

  2. python+selenium实现动态爬取及selenuim的常用操作

    应用实例可以参考博客中的12306自动抢票应用 https://www.cnblogs.com/mumengyun/p/10001109.html 动态网页数据抓取 什么是AJAX: AJAX(Asy ...

  3. legend3---lavarel常用操作代码2

    legend3---lavarel常用操作代码2 一.总结 一句话总结: 对于王思cong被执法人的感悟:失意时 莫心伤,得意时 莫膨胀 1.lavarel自动事务? DB::transaction方 ...

  4. legend3---lavarel常用操作代码

    legend3---lavarel常用操作代码 一.总结 一句话总结: 要自己总结一下常用代码,这样才方便,也才有收获 1.路由示例:Route::get('/login','Home\Login\L ...

  5. 【三】用Markdown写blog的常用操作

    本系列有五篇:分别是 [一]Ubuntu14.04+Jekyll+Github Pages搭建静态博客:主要是安装方面 [二]jekyll 的使用 :主要是jekyll的配置 [三]Markdown+ ...

  6. php模拟数据库常用操作效果

    test.php <?php header("Content-type:text/html;charset='utf8'"); error_reporting(E_ALL); ...

  7. Mac OS X常用操作入门指南

    前两天入手一个Macbook air,在装软件过程中摸索了一些基本操作,现就常用操作进行总结, 1关于触控板: 按下(不区分左右)            ＝鼠标左键 control+按下        ...

  8. mysql常用操作语句

    mysql常用操作语句 1.mysql -u root -p   2.mysql -h localhost -u root -p database_name 2.列出数据库: 1.show datab ...

  9. nodejs配置及cmd常用操作

    一.cmd常用操作 1.返回根目录cd\ 2.返回上层目录cd .. 3.查找当前目录下的所有文件dir 4.查找下层目录cd window 二.nodejs配置 Node.js安装包及源码下载地址为 ...

随机推荐

  1. Oracle_insert_delete_update

    Oracle_insert_delete_update --复制表格的结构 create table temp as (select * from emp where 1=2); select * f ...

  2. 解决DEDECMS Call to undefined function dede_htmlspecialchars()

    作者:DEDECMS建站网 关注: 3610 时间:2015-11-18 16:39 内容详情 以下内容您可能感兴趣: 织梦官方在2015年6月18日更新了织梦5.7,为了兼容php5.4+,修改了/ ...

  3. 30分钟学玩转RabbitMQ

    最近在学习RabbitMQ,在网上找了不少资料发现都特高端.动辄集群部署,分布式架构什么的,对于一个初学者实在不够友好.心想求人不如求自己,为什么不自己整理一套资料呢?于是<30分钟学玩转Rab ...

  4. 使用Flink的SavePoint功能

    Flink通过SavePoint功能可以做到程序升级后,继续从升级前的那个点开始执行计算,保证数据不中断. Flink中CheckPoint用于保存状态,是自动执行的,SavePoint是指向Chec ...

  5. ETL工具--kettle篇（17.10.09更新）

    ETL是EXTRACT(抽取).TRANSFORM(转换).LOAD(加载)的简称,实现数据从多个异构数据源加载到数据库或其他目标地址,是数据仓库建设和维护中的重要一环也是工作量较大的一块.当前知道的 ...

  6. asm文件开头的assume意义

    body, table{font-family: Consolas; font-size: 13.5pt} table{border-collapse: collapse; border: solid ...

  7. 解决跨站脚本注入，跨站伪造用户请求，sql注入等http安全漏洞

    跨站脚本就是在url上带上恶意的js关键字然后脚本注入了,跨站伪造用户请求就是没有经过登陆,用超链接或者直接url上敲地址进入系统,类似于sql注入这些都是安全漏洞. sql注入 1.参数化查询预处理 ...

  8. linkin大话面向对象--GC和jar包

    GC java的垃圾回机制是java语言的重要机制之一.当程序创建对象,数组等引用类型实体时,系统都会在堆内存中为之分配一块内存区,对象就保存在这块内存区中.当这块内存不再被任何变量引用时,这块内存就 ...

  9. Linux使用top与free命令查看CPU与内存使用情况

    top命令: 显示内容解释: 第一行top分别为:当前时间:系统运行天数:使用者个数:系统负载的平均值,后面的三个值分别为1分钟前.5分钟前.15分钟前进程的平均数,这个数值超过 CPU 数目时,说明 ...

  10. 小白的Python之路 day5 re正则模块

    re正则模块 一.概述 就其本质而言,正则表达式(或 RE)是一种小型的.高度专业化的编程语言,要讲他的具体用法要讲一本书!它内嵌在Python中,并通过 re 模块实现.你可以为想要匹配的相应字符串 ...