jQuery从零开始(三)-----ajax
jq当中的ajax技术
$.ajax
$.get()
$.post()
$.load()
$.ajax({
url:'请求文件的地址',
type:'请求文件使用的方法',
data:'向请求的api发送的数据',(不需要可以不写)例:'name=zhangsan&pwd=123'
async:true, //是否开启异步,默认值为true表示开启异步
datatype:预期的服务器返回的数据类型,
sucess: (data)=> { 回调函数
console.log(data);
}
error:请求失败后的回调函数,
complete:请求不论成功还是失败的回调函数
})
jq的ajax方法返回值是一个promise,那么就可以使用then或者async配合
let info =$.ajax({
url:'action.php' , //请求数据的地址
type:'post' //请求文件使用的方法 post/get
})
这个时候打印info会发现它是一个promise对象 console.log(info);
info.then(msg=>{
console.log(msg)
})
采用async的写法:
async function getData(){
let msg = await $.ajax({url:'action.php(请求数据的地址)' ,type:'post(请求数据的方法)'})
console.log(msg);
}
getData();
$.post jq的post方法:
$.post(URL,data,function(data,status,xhr),dataType)
例如:
let url ="action.php";
data = "name = zhangsan";
$.post(url,function(data,status){
console.log(data,status)
})
$.get jq的get方法:
$.get(URL,data,function(data,status,xhr),dataType)
例如:
let url ="action.php";
data = "name = zhangsan";
$.get(url,data,function(data,status){
console.log(data,status)
})
async写法:
async function getData() {
let msg = await $.get('action.php');
console.log(msg);
}
getData();
$.post() jq的load方法:
例如:给定一个容器,直接将请求的数据加载到容器里面(不建议这么使用)
$('#main').load('action.php')
jq插件有很多的动画效果等待我们去发现例如轮播图滑动效果等。
jQuery从零开始(三)-----ajax的更多相关文章
- 从零开始学 Web 之 Ajax(六)jQuery中的Ajax
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 005 Ajax中使用jquery实现三种格式的信息
1.jquery中的ajax 二:load 2.load方法 3.load测试程序大纲 4.load测试程序 <!DOCTYPE html> <html> <head&g ...
- 从零开始学习jQuery (六) jquery中的AJAX使用
本篇文章讲解如何使用jQuery方便快捷的实现Ajax功能.统一所有开发人员使用Ajax的方式. 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即 ...
- 160620、利用 jQuery UI 和 Ajax 创建可定制的 Web 界面
如今,网站比以往更具可定制性,允许用户更改其空间,根据自己的喜好对其进行个性化.个性化的主页或仪表板页面(例如 iGoogle.MyYahoo! 和 MyAOL)日渐普及,大多数 Web 应用程序内甚 ...
- jQuery入门(4)jQuery中的Ajax应用
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】
一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...
- jquery中的ajax参数
jquery中将ajax封装成了函数,我们使用起来非常方便,jquery会自动根据内容选择post还是get方式提交数据,并且会自动编码,但是要想完全掌握jquery中的ajax,我们必须将它的各个参 ...
- jQuery中的Ajax几种请求方式
1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url (String) : 请求的HTML页的URL地址. data (M ...
- Jquery 学习三
一.each语句 1.each语句的功能 在jQuery中,通过$函数获取的都是jQuery对象.通过测试可知,jQuery对象是一个类数组的特殊对象,其是DOM对象的集合.而each语句就是专门用于 ...
随机推荐
- Python面向对象-获取对象信息type()、isinstance()、dir()
type() type()函数用于判断对象类型: >>> type(11) <class 'int'> >>> type('abc') <clas ...
- GeoSpark入门-可视化
GeoSpark是一种用于大规模空间数据处理的集群计算. GeoSpark通过一组out-of-the-box空间弹性分布式数据集( SRDDs ) 扩展 Apache Spark,它可以跨机 ...
- windows + flutter +android+ vscode 安装配置运行流程(详细版本)
flutter 是由谷歌发布的一个全新的响应式.跨平台.高性能的移动开发框架,可以快速在iOS和Android上构建高质量的原生用户界面. 框架特点 快速开发:Flutter的热重载可以快速地进行测试 ...
- SQL数据库基础
SQL:Structured Quety Language SQL SERVER是一个以客户/服务器(c/s)模式访问.使用Transact-SQL语言的关系型数据库管理子系统(RDBMS) DBMS ...
- 基于JS的ajax的实现,JSON和JSONP,基于JQuery的ajax的实现
基于JS的ajax的实现,JSON和JSONP,基于JQuery的ajax的实现1.基于JS的ajax的实现 step1: var xmlhttp = XMLHttprequest() #实例化一个对 ...
- 面试连环炮系列(八):服务器CPU飙升100%怎么排查
服务器CPU飙升100%怎么排查 执行"top"命令,查看当前进程CPU占用的实时情况,PID列是进程号,确定是哪个应用程序的问题. 如果是Java应用导致的,怎么定位故障原因 执 ...
- strcmp函数和memcmp函数的用法区别及联系
前言: C语言中有很多东西容易搞混,最近笔者就遇到了一个问题.这里做个记录.就是memcmp和strcmp两者的用法,这里做个对比: 功能对比: A memcmp: 函数原型: int memcmp( ...
- badboy脚本录制工具的安装
一.获取软件包 百度搜索badboy,或者直接访问官网:https://badboy.en.softonic.com/ 点击Download,下载安装包 或者从我的网盘提取: 链接:https://p ...
- python批量插入数据到es和读取es数据
一.插入数据 1.首先准备类似如下数据 {"_type": "type1", "_id": 1, "_index": & ...
- 剑指offer笔记面试题5----替换空格
题目:请实现一个函数,把字符串中的每个空格替换成"20%".例如,输入"We are happy."则输出"We%20are%20happy.&quo ...