1.认识JQ中ajax的封装

     jQ 对于ajax的封装有两层实现；$.ajax 为底层封装实现；基于 $.ajax ，分别实现了$.get 与$.post 的高层封装实现；

2.Ajax的底层实现基本语法：

async： 布尔类型，代表是否异步，true代表异步，false同步，默认为true

cache： 是否缓存，布尔类型，true代表缓存，false代表不缓存，默认为true

complete： 当Ajax状态码（readyState）为4的时候所触发的回调函数

contentType： 发送信息至服务器时内容编码类型；(默认: "application/x-www-form-urlencoded")

data： 要求是一个字符串格式，Ajax发送时所传递的数据

dataType： 期待的返回值类型，可以是text，xml，json，默认为text类型

success： 当Ajax状态码为4且响应状态码为200时所触发的回调函数

type： Ajax发送网络请求的方式，(默认: "GET")；

url： 请求的url地址

GET请求

<body>

    <input type="button" value="点击" id="btu">

</body>

<script>

    $('#btu').click(function(){

        //get请求

        $.ajax({

            url:'/jq_ajax_get',

            success:function(data){

                alert(data);

            }

        });

    });

</script>

POST请求：

<body>

    <input type="button" value="点击" id="btu">

</body>

<script>

    $('#btu').click(function () {

        $.ajax({

            url: '/jq_ajax_post',

            type: 'post',

            data: 'id=1111',

            success: function (data) {

                alert(data);

            },

            // async:false,

        });

        // alert(22); //检验同步异步

    });

</script>

3.ajax的高层实现：

GET应用：

基本语法：$.get(url, [data], [callback], [type])

url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。

案例：

<body>

    <input type="button" value="点击" id="btu">

</body>

<script>

    $('#btu').click(function(){

        $.get('/jq_ajax_get',function(data){

            alert(data);

        },'json');

    });

</script>

POST应用：

$.post(url, [data], [callback], [type])

url:发送请求地址。

data:待发送 Key/value 参数。

callback:发送成功时回调函数。t

ype:返回内容格式，xml, html, script, json, text, _default。

案例：

<body>

    <input type="button" value="点击" id="btu">

</body>

<script>

    $('#btu').click(function () {

        $.post('/jq_ajax_post',

            { id: '11' },

            function (data) {

                alert(data);

            });

    });

</script>

JQ中的Ajax的封装的更多相关文章

  1. jq中的ajax传参

        一.   jq中的Ajax传参有两种           1.通过url地址来传参    2.通过data来传递参数 1. url来传递参数 function GetQuery(id) { | ...

  2. jq中的ajax

    jq对ajax进行了封装,在jq中$.ajax()方法是最底层的方法,第二层是load() , get() , post()方法,第三层是$.getScript()和$.getJSON().基本第二种 ...

  3. 对Jquery中的ajax再封装,简化操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jquery中的ajax参数

    jquery中将ajax封装成了函数,我们使用起来非常方便,jquery会自动根据内容选择post还是get方式提交数据,并且会自动编码,但是要想完全掌握jquery中的ajax,我们必须将它的各个参 ...

  5. jq的ajax交互封装

    jq封装的ajax,然后 在此前和此后都是很多要考虑的  ,何不 想想构思封装下. 下面: 基本上网页都存在各种ajax,使得网页变得更加易于操作. 举个长长的例子吧: <input type= ...

  6. JavaScript原生封装ajax请求和Jquery中的ajax请求

    前言:ajax的神奇之处在于JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果.Ajax 在浏览器与 Web 服务器之间使用异步 ...

  7. rxjs入门3之项目中ajax函数封装

    项目中ajax函数封装 ⽹页应⽤主要数据源有两个:⼀个是⽹页中的DOM事件,另⼀个就是通过AJAX获得的服务器资源.我们已经知道fromEvent这个操作符可以根据DOM事件产⽣Observable对 ...

  8. ajax的封装——jq简化版

    最近在复习ajax的知识,练习了下ajax的封装,此处做下笔记 废话不多说,直接代码 //发请求 //此处的url为请求地址,type为请求方式,success为请求成功的回调函数 myaxios({ ...

  9. 原生及jq方式使用ajax

    1.原生js实现Ajax方法: // 封装ajax()方法 function ajax(url,fnSucc,fnFaild){ //1.创建Ajax 对象 if(window.XMLHttpRequ ...

随机推荐

  1. win7怎么使用远程桌面连接（win10类似，同样适用）

     win7使用远程桌面比mac要简单多了,只需在桌面点击“开始”,找到并打开“附件”,点击“远程桌面连接”即可   mac使用远程桌面连接:https://www.cnblogs.com/tu-071 ...

  2. [译]ASP.NET：WebForms vs MVC

    原文示例(VS2012): 1.  Download Simple WebForm demo - 6.7 KB 2.  Download Simple MVC Demo demo - 1.5 MB 介 ...

  3. Linux CentOS上安装 MySQL 8.0.16

    前言: 因为我需要在我新安装的Linux CentOS系统服务器中安装和配置MySQL服务器,然而对于我们这种Linux使用小白而言在Linux系统中下载,解压,配置MySQL等一系列的操作还是有些耗 ...

  4. （三十六）c#Winform自定义控件-步骤控件-HZHControls

    官网 http://www.hzhcontrols.com 前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kww ...

  5. shell生成指定长度的随机数

    生成指定长度是随机数 # 8位纯数字的随机数 tr -cd '0-9' </dev/urandom | head -c 8 # 16位包含字母.数字的随机数 tr -cd '[:alnum:]' ...

  6. go-爬图片

    go语言爬取图片 注:动态加载出来的爬取不到,或怕取出来图片出错,代码中的网页是可以正常爬取的 package main import ( "fmt" "io" ...

  7. js中scroll滚动相关

    js中scroll滚动相关 scroll,滚动,一般讨论的是网页整体与浏览器之间的关系. 一.元素相关 属性/方法 解释 element.scrollHeight 返回元素的整体高度. element ...

  8. HttpWebRquest.GetRequestStreamAsync()发生延迟

    前景提要:此问题不定适用Browser通信方式,主要提供给通信发生异常时解决思路. Q: request请求创建过程发生延迟 [Scene]: ​ .Net的HttpWebRquest.GetRequ ...

  9. MySQL复习值代码知识点(2)

    目录 总汇表 order by使用举例 group by使用举例 limit举例 group by 与order by 联合使用 having的使用 SQL运行结果查询 总汇表 order by 排序 ...

  10. 剑指offer 22：验证栈的压入、弹出序列

    题目描述 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否可能为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列4,5,3,2,1是该压 ...