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. 【linux命令】chgrp改变文件或目录的属组

    在lunix系统里,文件或目录的权限的掌控以拥有者及所诉群组来管理.可以使用chgrp指令取变更文件与目录所属群组,这种方式采用群组名称或群组识别码都可以.Chgrp命令就是change group的 ...

  2. Spring Security从后台数据库查询实现登陆控制

    Spring Security框架是一个控制登陆的框架,通过配置文件获取后台的用户名及密码,进行比较进行登陆判断 使用步骤 1.导入依赖 <!-- 身份验证 --> <depende ...

  3. Quartz.NET总结（三）如配置jobs

    前两篇文章,已经介绍了Quartz.NET的使用和Cron表达式表达式的写法,今天说一说Quartz的配置,Quartz相关的配置有三个quartz.config.quartz_jobs.xml.lo ...

  4. Elasticsearch 6.x版本全文检索学习之聚合分析入门

    1.什么是聚合分析? 答:聚合分析,英文为Aggregation,是es除搜索功能外提供的针对es数据做统计分析的功能.特点如下所示: a.功能丰富,提供Bucket.Metric.Pipeline等 ...

  5. MarkDown富文本编辑器怎么加载模板文件

    我们只需要一段加载代码就可以搞定MarkDown加载模板文件. $("#md-demo").bind('click', function () { $.get("/Lib ...

  6. 转换流读写操作 java.io.OutputStreamWriter ,java.io.InputStreamReader

    package seday07; import java.io.FileOutputStream;import java.io.IOException;import java.io.OutputStr ...

  7. arcgis api for javascript 学习（三） 调用发布地图信息，并将地图属性信息输出到Excel表中

    吐血推荐:网上搜了很久关于webgis地图属性表输出到Excel表,并没能找到相关有价值的信息,在小白面前,这就是一脸懵x啊!网上要么是关于前端如何在页面上直接导出excel,和webgis半毛钱关系 ...

  8. Android Gradle 学习笔记（四）：Gradle 构建脚本

    本节我们从整体的角度来介绍一下Gradle. 一.setting.gradle 在Gradle中,定义了一个设置文件,用于初始化以及工程树的配置.设置文件的默认的名字就是setting.gradle, ...

  9. tomcat7控制台日志中文乱码

    windows电脑 idea启动Tomcat调试程序时,Tomcat控制台输出里,中文是乱码. 解决办法: 修改Tomcat/bin/catalina.bat文件: set JAVA_OPTS= 的内 ...

  10. Raspberry Pi (树莓派) 更换源 - stretch 版本

    Raspberry Pi 默认更新源访问速度慢,更换国内源速度提升.更换软件更新源 (/etc/apt/sources.list),更换系统更新源 (/etc/apt/sources.d/raspi. ...