学习AJAX必知必会(4)~JQuery发送Ajax请求
一、JQuery发送Ajax请求
■ 对于get和post请求,jQuery内部封装了Ajax请求的4个步骤和数据格式的设置
■ 对于Ajax通用请求,jQuery内部封装了Ajax请求的4个步骤和数据格式设置、超时设置、请求失败设置
(1)jquery-server的get请求:
客户端html处理:
$('button').eq(0).click(function () {
//$get方法的回调参数接收一个data作为参数---是服务端响应回来的数据(响应体),然后设置响应的数据格式为json
$.get('http://127.0.0.1:8000/jquery-server', {a:1, b:2}, function (data) {
console.log(data);
}, 'json');
});
服务端jquery-server请求的处理:
app.get('/jquery-server', (request, response) => {
//设置响应头(允许跨域)
response.setHeader('Access-Control-Allow-Origin', '*');
//响应回去一个json对象
const data = {
name: '小黑',
age: 18,
sex: '男'
};
//设置响应体
response.send(JSON.stringify(data));
});
(2)jquery-server的post请求:
客户端html处理:
$('button').eq(1).click(function () {
//$get方法的回调参数接收一个data作为参数---是服务端响应回来的数据(响应体),然后设置响应的数据格式为json
$.post('http://127.0.0.1:8000/jquery-server', {a:1, b:2}, function (data) {
console.log(data);
}, 'json');
});
服务端jquery-server请求的处理:
app.post('/jquery-server', (request, response) => {
//设置响应头(允许跨域)
response.setHeader('Access-Control-Allow-Origin', '*');
//响应回去一个json对象
const data = {
name: '小白',
age: 18,
sex: '男'
};
//设置响应体
response.send(JSON.stringify(data));
});
(3)jquery-server的通用ajax请求:
客户端html处理:
$('button').eq(2).click(function () {
$.ajax({
url: 'http://127.0.0.1:8000/jquery-server/delay',//请求路径
data: {a:1,b:2,c:3},//请求参数(请求体)
type:'get',//请求方式
headers:{'Content-Type': 'application/x-www-form-urlencoded'},//请求头
dataType: 'json',//请求的数据格式
timeout:4000,//超时设置
success: function (data) {//请求成功的回调
console.log(data);
},
error: function () {//请求失败的回调
console.log('请求出错');
}
});
});
服务端jquery-server请求的处理:
//jquery-server请求超时处理
app.get('/jquery-server/delay', (request, response) => {
//设置响应头(允许跨域)
response.setHeader('Access-Control-Allow-Origin', '*');
//响应回去一个json对象
const data = {
name: '小迟',
age: 18,
sex: '男'
};
//设置响应体
setTimeout(() => {
response.send(JSON.stringify(data));
}, 3000)
});
学习AJAX必知必会(4)~JQuery发送Ajax请求的更多相关文章
- 学习AJAX必知必会(1)~Ajax
一.ajax(Asynchronous JavaScript And XML,即异步的 JS 和 XML) 1.通过 AJAX 可以在浏览器中向服务器发送异步请求实现无刷新获取数据. 2.优势:无刷新 ...
- [ 学习路线 ] 2015 前端(JS)工程师必知必会 (2)
http://segmentfault.com/a/1190000002678515?utm_source=Weibo&utm_medium=shareLink&utm_campaig ...
- 《SQL必知必会》学习笔记二)
<SQL必知必会>学习笔记(二) 咱们接着上一篇的内容继续.这一篇主要回顾子查询,联合查询,复制表这三类内容. 上一部分基本上都是简单的Select查询,即从单个数据库表中检索数据的单条语 ...
- 人人必知的10个 jQuery 小技巧
原文地址:http://info.9iphp.com/10-jquery-tips-everyone-should-know/ 人人必知的10个 jQuery 小技巧 收集的10个 jQuery ...
- 学习《SQL必知必会(第4版)》中文PDF+英文PDF+代码++福达BenForta(作者)
不管是数据分析还是Web程序开发,都会接触到数据库,SQL语法简洁,使用方式灵活,功能强大,已经成为当今程序员不可或缺的技能. 推荐学习<SQL必知必会(第4版)>,内容丰富,文字简洁明快 ...
- 《MySQL必知必会》学习笔记——前言
前言 MySQL已经成为世界上最受欢迎的数据库管理系统之一.无论是用在小型开发项目上,还是用来构建那些声名显赫的网站,MySQL都证明了自己是个稳定.可靠.快速.可信的系统,足以胜任任何数据存储业务的 ...
- 《SQL必知必会》学习笔记整理
简介 本笔记目前已包含 <SQL必知必会>中的所有章节. 我在整理笔记时所考虑的是:在笔记记完后,当我需要查找某个知识点时,不需要到书中去找,只需查看笔记即可找到相关知识点.因此在整理笔记 ...
- 《SQL必知必会》学习笔记(一)
这两天看了<SQL必知必会>第四版这本书,并照着书上做了不少实验,也对以前的概念有得新的认识,也发现以前自己有得地方理解错了.我采用的数据库是SQL Server2012.数据库中有一张比 ...
- mysql学习--mysql必知必会1
例如以下为mysql必知必会第九章開始: 正則表達式用于匹配特殊的字符集合.mysql通过where子句对正則表達式提供初步的支持. keywordregexp用来表示后面跟的东西作为正則表達式 ...
随机推荐
- java类型转换拓展
数据类型拓展 在Java中二进制用0b开头,八进制用0开头,十六进制用0x表示 整数拓展 int i=10; int i2=010;//八进制 int i3=0x10;//十六进制0x,0-9,A- ...
- 【LeetCode】826. Most Profit Assigning Work 解题报告(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/most-pro ...
- J. Bottles
J. Bottles time limit per test 2 seconds memory limit per test 512 megabytes input standard input ou ...
- 1109 01组成的N的倍数
1109 01组成的N的倍数 基准时间限制:1 秒 空间限制:131072 KB 给定一个自然数N,找出一个M,使得M > 0且M是N的倍数,并且M的10进制表示只包含0或1.求最小的M. ...
- 食物链(poj1182)
食物链 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 57387 Accepted: 16781 Description ...
- 1076 - Get the Containers
1076 - Get the Containers PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 ...
- 「实用」打造自我感觉非常漂亮的Mac终端
背景 (今天我是一个美妆博主) 突然发现自己使用的iterm2终端样式有些朴素,为了让她看起来花枝招展的,我决定给她打扮打扮.毕竟每天面对她的时间比对象还多-- 效果对比 因为每个人的喜好都不一样,所 ...
- LTD: Low Temperature Distillation for Robust Adversarial Training
目录 概 主要内容 Chen E. and Lee C. LTD: Low temperature distillation for robust adversarial training. arXi ...
- FineGAN
目录 概 主要内容 隐变量 背景 轮廓 色彩和纹理 用于无监督分类 代码 Singh K., Ojha U. & Lee Y. FineGAN: Unsupervised Hierarchic ...
- gojs 实用高级用法
大家,新年好! 历史文章: 数据可视化 gojs 简单使用介绍 gojs 如何实现虚线(蚂蚁线)动画? 本文介绍的是在使用 gojs 制作图的过程中,你可能会碰到的问题的一些解决方案. gojs 是一 ...