一、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. 使用 juqery.media.js 实现 pdf 预览

    作用:可以实现在指定的位置预览PDF 缺点: (1)在iPad上只能预览一页PDF.(问题是iPad会将PDF转为img呈现,试了将img宽度设置为100%方法但并不好使) (2)在安卓上不能预览,依 ...

  2. 利用免费二维码API自动生成网址图片二维码

    调用第三方接口生成二维码 官方地址:http://goqr.me/api/ 示例 https://api.qrserver.com/v1/create-qr-code/?size=180x180&am ...

  3. fedora之自动寻找命令并提示安装PackageKit-command-not-found

    fedora 1.比如,我要用clang 命令编译代码,但是没有该指令.比如: clang main.cxx -o main 2.那么,输入未知命令,希望fedora会自动寻找相对应的包,再并提示安装 ...

  4. 第一篇CSDN博客,大家好!

    大家好,我是负雪明烛! 我这昵称的来源是喜欢一句很有意蕴的古诗--苍山负雪,明烛天南. 我喜欢这句诗,很多的账号都用了这个"负雪明烛"的昵称,如果大家在其他地方看到叫这个名字的人, ...

  5. 1036 - A Refining Company

    1036 - A Refining Company   PDF (English) Statistics Forum Time Limit: 3 second(s) Memory Limit: 32 ...

  6. 简单的 for 循环也会踩的坑

    前言 最近实现某个业务时,需要读取数据然后再异步处理:在 Go 中实现起来自然就比较简单,伪代码如下: list := []*Demo{{"a"}, {"b"} ...

  7. Geometric GAN

    目录 概 主要内容 McGAN 结合SVM 训练 训练 理论分析 证明 Jae Hyun Lim, Jong Chul Ye, Geometric GAN. 概 很有趣, GAN的训练过程可以分成 寻 ...

  8. TensorFlow.NET机器学习入门【7】采用卷积神经网络(CNN)处理Fashion-MNIST

    本文将介绍如何采用卷积神经网络(CNN)来处理Fashion-MNIST数据集. 程序流程如下: 1.准备样本数据 2.构建卷积神经网络模型 3.网络学习(训练) 4.消费.测试 除了网络模型的构建, ...

  9. Elasticsearch(二)--集群原理及优化

    一.ES原理 1.索引结构ES是面向文档的 各种文本内容以文档的形式存储到ES中,文档可以是一封邮件.一条日志,或者一个网页的内容.一般使用 JSON 作为文档的序列化格式,文档可以有很多字段,在创建 ...

  10. Spring企业级程序设计 • 【第3章 面向切面编程】

    全部章节   >>>> 本章目录 3.1 AOP基本概念和术语 3.1.1 AOP概念 3.1.2 AOP的术语解释 3.1.3 通知类型介绍 3.1.4 通过AOP模拟事务操 ...