python-book
  • 目录
  • 第2章 Python基础 (旧版)
    • 2.1 上节拾遗
    • 2.2 二进制
    • 2.3 字符编码
    • 2.4 基本数据类型——数字
    • 2.5 基本数据类型——字符串
    • 2.6 基本数据类型——列表
    • 2.7 基本数据类型——元组
    • 2.8 可变、不可变数据类型和hash
    • 2.9 基本数据类型——字典
    • 2.10 基本数据类型——集合
    • 2.11 collections模块
    • 2.12 本章小结
      • 习题答案
  • 第3章 Python基础—文件操作&函数(旧版)
    • 3.1 上节拾遗
    • 3.2 三元运算
    • 3.3 字符编码转换
    • 3.4 文件处理
    • 3.5 函数
    • 3.6 函数进阶
    • 3.7 生成器&迭代器
    • 3.8 本章小节
      • 习题答案
  • 第4章 Python基础—常用模块(旧版)
    • 4.1 模块、包介绍和相关语法
    • 4.2 time & datetime 模块
    • 4.3 random 模块
    • 4.4 os 模块
    • 4.5 sys 模块
    • 4.6 shutil 模块
    • 4.7 json & pickle 模块
    • 4.8 shelve 模块
    • 4.9 xml 模块
    • 4.10 ConfigParser 模块
    • 4.11 hashlib 模块
    • 4.12 subprocess 模块
    • 4.13 logging 模块
      • python日志重复输出
    • 4.14 re 模块
    • 4.15 软件开发目录规范
    • 4.16 本章小结
      • 习题答案
  • 第5章 面向对象编程设计与开发
    • 面向对象介绍
    • 类、实例、属性、方法详解
    • 5.1 什么是面向对象的程序设计
    • 5.2 类与对象
    • 5.3 属性查找与绑定方法
    • 5.4 小结
    • 5.5 继承与派生
    • 5.6 组合
    • 5.7 抽象类
    • 5.8 多态与多态性
    • 5.9 封装
    • 5.10 绑定方法与非绑定方法
    • 5.11 内置方法
    • 5.11 内置方法(补充)
    • 5.12 元类
    • 5.13 面向对象的软件开发
    • 5.14 领域模型
    • 5.15 异常处理
    • 5.16 本章总结
  • 第6章 网络编程-SOCKET开发
    • 6.1 C/S架构介绍
    • 6.2 TCP/IP 各层详解
    • 6.3 Socket介绍
    • 6.4 Socket代码实例
    • 6.5 粘包现象与解决方案
    • 6.6 通过socket发送文件
    • 6.7 本章总结
  • 第7章 并发编程
    • 7.1 操作系统介绍
      • 附录1:操作系统介绍
    • 7.2 并发编程之多进程
      • 7.2.1 进程理论
      • 7.2.2 开启进程的两种方式
      • 7.2.3 join方法
      • 7.2.4 守护进程
      • 7.2.5 互斥锁
      • 7.2.6 队列
      • 7.2.7 生产者消费者模型
    • 7.3 并发编程之多线程
      • 7.3.1 线程理论
      • 7.3.2 开启线程的两种方式
      • 7.3.3 多线程与多进程的区别
      • 7.3.4 Thread对象的其他属性或方法
      • 7.3.5 守护线程
      • 7.4.6 GIL全局解释器锁
      • 7.4.7 死锁现象与递归锁
      • 7.4.8 信号量,Event,定时器
      • 7.4.9 线程queue
      • 7.4.10 进程池与线程池
    • 7.4 并发编程之协程
      • 7.4.1 协程介绍
      • 7.4.2 greenlet模块
      • 7.4.3 gevent模块
    • 7.5 IO模型
      • 7.5.1 IO模型介绍
      • 7.5.2 阻塞IO
      • 7.5.3 非阻塞IO
      • 7.5.4 多路复用IO
      • 7.5.5 异步IO
      • 7.5.6 IO模型比较分析
      • 7.5.7 selectors模块
    • 7.6 本章小结
  • 第8章 MySQL数据库
    • 8.1 初识数据库
      • 8.1.1 数据库管理软件的由来
      • 8.1.2 数据库概述
      • 8.1.3 mysql安装与基本管理
      • 8.1.4 初识sql语句
    • 8.2 库操作
      • 8.2.1 库的增删改查
    • 8.3 表操作
      • 8.3.1 存储引擎介绍
      • 8.3.2 表的增删改查
      • 8.3.3 数据类型
        • 1 数值类型
        • 2 日期类型
        • 3 字符串类型
        • 4 枚举类型与集合类型
      • 8.3.4 完整性约束
    • 8.4 数据操作
      • 8.4.1 数据的增删改
      • 8.4.2 单表查询
      • 8.4.3 多表查询
    • 8.5 Navicat工具与pymysql模块
      • 8.5.1 图形工具Navicat
      • 8.5.2 pymysql模块
    • 8.6 mysql内置功能
      • 8.6.1 视图
      • 8.6.2 触发器
      • 8.6.3 事务
      • 8.6.4 存储过程
      • 8.6.5 函数
      • 8.6.6 流程控制
    • 8.7 索引原理与慢查询优化
      • 8.7.1 索引原理与慢查询优化(1)
      • 8.7.2 索引原理与慢查询优化(2)
    • 8.8 本章小结
      • 8.8.1 章节作业
  • 第9章 前端开发
    • 9.0 前端内容介绍
      • 前端究竟是个什么鬼?
    • 9.1 HTML
      • 9.1.1 HTML简介
      • 9.1.2 开发环境
      • 9.1.3 HTML标签介绍
      • 9.1.4 HTML文档结构(重点)
      • 9.1.5 HTML注释
      • 9.1.6 head标签相关内容
      • 9.1.7 body标签相关内容(重点)
        • 常用标签一
        • 常用标签二
      • 9.1.8 HTML标签属性
      • 9.1.9 HTML标签分类(重点)
      • 9.1.10 标签嵌套规则(重点)
      • 9.1.11 HTML练习题
    • 9.2 CSS
      • 9.2.1 CSS介绍
      • 9.2.2 CSS语法
      • 9.2.3 CSS引入方式
      • 9.2.4 基本选择器
      • 9.2.5 组合选择器
      • 9.2.6 属性选择器
      • 9.2.7 分组选择器
      • 9.2.8 伪类选择器
      • 9.2.9 伪元素选择器
      • 9.2.10 选择器的优先级(重点)
      • 9.2.11 字体属性
      • 9.2.12 文字属性
      • 9.2.13 背景属性
      • 9.2.14 display属性(重点)
      • 9.2.15 盒模型(重点)
      • 9.2.16 浮动与清除浮动(重点)
      • 9.2.17 background属性(侧重点)
      • 9.2.18 定位(重点)
      • 9.2.19 z-index(重点)
      • 9.2.20 css练习题
    • 9.3 JavaScript
      • 9.3.1 JavaScript简介
      • 9.3.2 ECMAScript 5.0
      • 9.3.3 正则表达式
      • 9.3.4 DOM(重点)
      • 9.3.5 client、offset、scroll系列
      • 9.3.6 定时器
      • 9.3.7 BOM
      • 9.3.8 练习题
    • 9.4 jQuery
      • 9.4.1使用js的一些疼处
      • 9.4.2 js和jquery的区别
      • 9.4.3 jquery文件的引入
      • 9.4.4 jquery选择器用法
      • 9.4.5 jquery对象和DOM对象的转换
      • 9.4.6 jquery的效果
      • 9.4.7 jquery的属性操作
      • 9.4.8 操作input的value值
      • 9.4.9 jquery文档操作
      • 9.4.10 jquery的CSS
      • 9.4.11 jquery的筛选方法
      • 9.4.12 jquery的事件
      • 9.4.13 jquery的Ajax
      • 9.4.14 补充内容
      • 9.4.15 练习题
    • 9.5 Bootstrap
      • 9.5.1 Bootstrap的介绍和响应式@metia媒体查询
      • 9.5.2 Bootstrap的引入和使用
      • 9.5.3 Bootstrap插件的一些常用属性介绍
    • 9.6 前端内容流程导图
  • 第10章 Django
    • 10.1 web应用与http协议
      • 10.1.1 web应用与web框架
    • 10.2 http协议简介
    • 10.3 Django简介
    • 10.4 Django-2的路由层(URLconf)
    • 10.5 Django的视图层
    • 10.6 Django模板层
    • 10.7 Django模型层
      • 模型层一单表操作
      • 模型层二多表操作
    • 10.8 Django组件-cookie与session
    • 10.9 Django组件-forms组件
    • 10.10 Django组件-用户认证
    • 10.11 Django组件-中间件
    • 10.12 Django组件-分页器
    • 10.13 Django与Ajax
    • 10.14习题
  • 第11章 BBS项目(博客系统)
    • 11.1 基于Ajax和用户认证系统的登录验证
    • 11.2 基于Ajax和forms组件的实现注册功能
    • 11.3 系统首页的布局渲染
    • 11.4 个人站点的文章,标签,分类查询
    • 11.5 文章详细页的设计
    • 11.6 点赞与踩灭功能的实现
    • 11.7 评论功能的实现
    • 11.8 基于富文本编辑器框和beautifulSoup模块防止xss攻击
  • 第12章 CRM项目
    • 12.1 权限组件之权限控制
  • 第1章 Python基础(旧版)
    • 1.1 编程语言介绍
    • 1.2 Python介绍
    • 1.3 Python安装
    • 1.4 第一个Python程序
    • 1.5 变量
    • 1.6 程序交互
    • 1.7 基本数据类型
    • 1.8 格式化输出
    • 1.9 基本运算符
    • 1.10 流程控制之 if ... else
    • 1.11 流程控制之 循环
    • 1.12 开发工具IDE
    • 1.13 本章小节
      • 习题答案
    • 1.14 Python开发规范指南
      • 1.14.1 Python风格规范
      • 1.14.2 Python语言规范
  • 第1章 Python基础语法(new)
    • 1.1 编程语言介绍与分类
    • 1.2 Python介绍、发展趋势
    • 1.3 Python环境安装
    • 1.4 开发你的第一个Python程序
    • 1.5 选择最好用的PyCharm IDE
    • 1.6 变量
    • 1.7 注释
    • 1.8 基本数据类型
    • 1.9 读取用户指令
    • 1.10 格式化打印
    • 1.11 运算符
    • 1.12 流程控制之if...else
    • 1.13 流程控制之while循环
    • 1.14 本章练习题&作业
  • 第2章 Python基础-数据类型和文件操作(new)
    • 2.1 上章补充-Bytes类型
  • 第3章 Python基础-函数编程(new)
  • 第4章 Python基础 常用模块(new)
Powered by GitBook
On this page

Was this helpful?

  1. 第9章 前端开发
  2. 9.4 jQuery

9.4.13 jquery的Ajax

AJAX = 异步的javascript和XML(Asynchronous Javascript and XML)

简言之,在不重载整个网页的情况下,AJAX通过后台加载数据,并在网页上进行显示。

通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

1.jQuery的load()方法

jQuery load()方法是简单但强大的AJAX方法。

load()方法从服务器加载数据,并把返回的数据放入被选元素中。

语法:

$("selector").load(url,data,callback);
必须的url参数规定记载的url地址
可选的data参数规定与请求一同发送的查询字符串键/值对的集合
可选的callback参数是load()方法完成后所执行的函数名称
1、
$('#btn').click(function(){

    //只传一个url,表示在id为#new-projects的元素里加载index.html
    $('#new-projects').load('./index.html');
})
2、
$('#btn').click(function(){
    //只传一个url,导入的index.html文件含有多个传递参数,类似于:index/html?name='张三'
    $('#new-projects').load('./index.html',{"name":'张三',"age":12});
})
3、
    //加载文件之后,会有个回调函数,表示加载成功的函数
    $('#new-projects').load('./index.html',{"name":'张三',"age":12},function(){

});
注意:load函数最好在服务器网页中应用,也就是说要在服务器上运行,本地调试需要搭建后端本地环境。

2. jquery的getJSON方法

jQuery的AJAX中使用getJSON()方法异步加载JSON格式数据。获取服务器中的数据,并对数据进行解析,显示到页面中

语法: $.getJSON(url,[data],[callback])

url参数为请求加载json格式文件的服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后执行的函数
  $.getJSON("./data/getJSON.json", function (data) {
       var str = "";//初始化保存内容变量
       $.each(data, function(index,ele) {
          $('ul').append("<li>"+ele.name+"</li>")

          });
       })

3.jquery的$.get()方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据

语法:$.get(URL,callback);

url参数规定你请求的路径,是必需参数,callback参数为数据请求成功后执行的函数
                $.get('./data/getJSON.json',function(data,status){
    console.log(status);   //success    200状态码 ok的意思              
})

4.jquery的post()方法

与get()方法相比,post()方法多用于以POST方式向服务器发送数据,服务器接收到数据之后,进行处理,并将处理结果返回页面

语法:$.post(URL,data,callback);

url参数规定你请求的路径,是必需参数,可选的data参数是连同请求发送的数据。可选的callback参数为数据请求成功后执行的函数
 $.post('/index',{name:'张三'},function(data,status){
      console.log(status);

 })

5. jquery的$.ajax()方法

jquery的$.ajax()方法 是做ajax技术经常使用的一个方法。

它的参数很多,总会有一些初学者记不住,在这里,演示几个经常使用的参数。后面讲django课程的时候老师会详细讲ajax技术的原理。大家先把每个参数做个笔记。

参数如下: 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。

2.type: 要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。

3.timeout: 要求为Number类型的参数,设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设置。

4.async: 要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其他操作必须等待请求完成才可以执行。

5.cache: 要求为Boolean类型的参数,默认为true(当dataType为script时,默认为false),设置为false将不会从浏览器缓存中加载请求信息。

6.data: 要求为Object或String类型的参数,发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换,可以查看 processData选项。对象必须为key/value格式,例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组,JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

7.dataType: 要求为String类型的参数,预期服务器返回的数据类型。如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。可用的类型如下: xml:返回XML文档,可用JQuery处理。 html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。 script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。 json:返回JSON数据。 jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。 text:返回纯文本字符串。

8.beforeSend: 要求为Function类型的参数,发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。 function(XMLHttpRequest){ this; //调用本次ajax请求时传递的options参数 } 9.complete:

要求为Function类型的参数,请求完成后调用的回调函数(请求成功或失败时均调用)。参数:XMLHttpRequest对象和一个描述成功请求类型的字符串。 function(XMLHttpRequest, textStatus){ this; //调用本次ajax请求时传递的options参数 }

10.success:

要求为Function类型的参数,请求成功后调用的回调函数,有两个参数。 (1)由服务器返回,并根据dataType参数进行处理后的数据。 (2)描述状态的字符串。 function(data, textStatus){ //data可能是xmlDoc、jsonObj、html、text等等 this; //调用本次ajax请求时传递的options参数 }

11.error: 要求为Function类型的参数,请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下: function(XMLHttpRequest, textStatus, errorThrown){ //通常情况下textStatus和errorThrown只有其中一个包含信息 this; //调用本次ajax请求时传递的options参数 }

12.contentType: 要求为String类型的参数,当发送信息至服务器时,内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。

13.dataFilter: 要求为Function类型的参数,给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。 function(data, type){ //返回处理后的数据 return data; }

14.dataFilter: 要求为Function类型的参数,给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。 function(data, type){ //返回处理后的数据 return data; }

15.global: 要求为Boolean类型的参数,默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件,ajaxStart或ajaxStop可用于控制各种ajax事件。

16.ifModified: 要求为Boolean类型的参数,默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false,即忽略头信息。

17.jsonp: 要求为String类型的参数,在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。

18.username: 要求为String类型的参数,用于响应HTTP访问认证请求的用户名。

19.password: 要求为String类型的参数,用于响应HTTP访问认证请求的密码。

20.processData: 要求为Boolean类型的参数,默认为true。默认情况下,发送的数据将被转换为对象(从技术角度来讲并非字符串)以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息,请设置为false。

21.scriptCharset: 要求为String类型的参数,只有当请求时dataType为"jsonp"或者"script",并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用

 //get()方式
  $.ajax({
     url:'./data/index.txt',
     type:'get',
     dataType:'text',
     success:function(data){
        $('p').html(data);

     },
     error:function(error){
        console.log(error)
     }
//post()方式
$.ajax({
   url:'/index',
   type:'post',
   data:{name:'张三',age:12},
   success:function(data){
      $('p').html(data);
   },
   error:function(error){
      console.log(error)
}
注意:以上所有操作,请在服务器上运行此代码,如果没有服务器,可以在本地搭建本地服务器。
好吧!!咱们还没学,我们可以使用PCCharm,WebStrom,HBuilder上运行此代码。但是post请求的方法 我们暂时没法演示,
后面在django部分讲到服务器的老师,会给大家详细演示get请求和post请求的处理。
Previous9.4.12 jquery的事件Next9.4.14 补充内容

Last updated 5 years ago

Was this helpful?