一、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请求的更多相关文章

  1. 学习AJAX必知必会(1)~Ajax

    一.ajax(Asynchronous JavaScript And XML,即异步的 JS 和 XML) 1.通过 AJAX 可以在浏览器中向服务器发送异步请求实现无刷新获取数据. 2.优势:无刷新 ...

  2. [ 学习路线 ] 2015 前端(JS)工程师必知必会 (2)

    http://segmentfault.com/a/1190000002678515?utm_source=Weibo&utm_medium=shareLink&utm_campaig ...

  3. 《SQL必知必会》学习笔记二)

    <SQL必知必会>学习笔记(二) 咱们接着上一篇的内容继续.这一篇主要回顾子查询,联合查询,复制表这三类内容. 上一部分基本上都是简单的Select查询,即从单个数据库表中检索数据的单条语 ...

  4. 人人必知的10个 jQuery 小技巧

    原文地址:http://info.9iphp.com/10-jquery-tips-everyone-should-know/ 人人必知的10个 jQuery 小技巧   收集的10个 jQuery ...

  5. 学习《SQL必知必会(第4版)》中文PDF+英文PDF+代码++福达BenForta(作者)

    不管是数据分析还是Web程序开发,都会接触到数据库,SQL语法简洁,使用方式灵活,功能强大,已经成为当今程序员不可或缺的技能. 推荐学习<SQL必知必会(第4版)>,内容丰富,文字简洁明快 ...

  6. 《MySQL必知必会》学习笔记——前言

    前言 MySQL已经成为世界上最受欢迎的数据库管理系统之一.无论是用在小型开发项目上,还是用来构建那些声名显赫的网站,MySQL都证明了自己是个稳定.可靠.快速.可信的系统,足以胜任任何数据存储业务的 ...

  7. 《SQL必知必会》学习笔记整理

    简介 本笔记目前已包含 <SQL必知必会>中的所有章节. 我在整理笔记时所考虑的是:在笔记记完后,当我需要查找某个知识点时,不需要到书中去找,只需查看笔记即可找到相关知识点.因此在整理笔记 ...

  8. 《SQL必知必会》学习笔记(一)

    这两天看了<SQL必知必会>第四版这本书,并照着书上做了不少实验,也对以前的概念有得新的认识,也发现以前自己有得地方理解错了.我采用的数据库是SQL Server2012.数据库中有一张比 ...

  9. mysql学习--mysql必知必会1

     例如以下为mysql必知必会第九章開始: 正則表達式用于匹配特殊的字符集合.mysql通过where子句对正則表達式提供初步的支持. keywordregexp用来表示后面跟的东西作为正則表達式 ...

随机推荐

  1. java类型转换拓展

    数据类型拓展 在Java中二进制用0b开头,八进制用0开头,十六进制用0x表示 整数拓展  int i=10; int i2=010;//八进制 int i3=0x10;//十六进制0x,0-9,A- ...

  2. 【LeetCode】826. Most Profit Assigning Work 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/most-pro ...

  3. J. Bottles

    J. Bottles time limit per test 2 seconds memory limit per test 512 megabytes input standard input ou ...

  4. 1109 01组成的N的倍数

    1109 01组成的N的倍数 基准时间限制:1 秒 空间限制:131072 KB  给定一个自然数N,找出一个M,使得M > 0且M是N的倍数,并且M的10进制表示只包含0或1.求最小的M.   ...

  5. 食物链(poj1182)

    食物链 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 57387   Accepted: 16781 Description ...

  6. 1076 - Get the Containers

    1076 - Get the Containers    PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 ...

  7. 「实用」打造自我感觉非常漂亮的Mac终端

    背景 (今天我是一个美妆博主) 突然发现自己使用的iterm2终端样式有些朴素,为了让她看起来花枝招展的,我决定给她打扮打扮.毕竟每天面对她的时间比对象还多-- 效果对比 因为每个人的喜好都不一样,所 ...

  8. LTD: Low Temperature Distillation for Robust Adversarial Training

    目录 概 主要内容 Chen E. and Lee C. LTD: Low temperature distillation for robust adversarial training. arXi ...

  9. FineGAN

    目录 概 主要内容 隐变量 背景 轮廓 色彩和纹理 用于无监督分类 代码 Singh K., Ojha U. & Lee Y. FineGAN: Unsupervised Hierarchic ...

  10. gojs 实用高级用法

    大家,新年好! 历史文章: 数据可视化 gojs 简单使用介绍 gojs 如何实现虚线(蚂蚁线)动画? 本文介绍的是在使用 gojs 制作图的过程中,你可能会碰到的问题的一些解决方案. gojs 是一 ...