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. Exe4j 打包： this executable was created with an evaluation version of exe4j

    异常 this executable was created with an evaluation version of exe4j   异常.png 问题原因 当前打包使用exe4j未授权 解决方法 ...

  2. mysql 读写分离（手动和自动方法）

    使用sqlalchemy 使mysq自动读写分离: 代码如下: from flask import Flask from flask_sqlalchemy import SQLAlchemy, Sig ...

  3. .NET Application,Session,Cookie,ViewState,Cache对象用法

    作用域 保存地址 生命周期Application 应用程序 服务器内存 IIS启动Session 整个站点 服务器内存 Session到时 默认20分钟Cashe 应用程序 服务器内存 应用程序的周期 ...

  4. Python调用Redis

    #!/usr/bin/env python # -*- coding:utf-8 -*- # ************************************* # @Time : 2019/ ...

  5. selenium设置谷歌无头浏览器

    from selenium import webdriver from selenium.webdriver.chrome.options import Options def Browse(): c ...

  6. Selenium(十六)：unittest单元测试框架(二) 初识unittest(续)

    1. 认识unittest(续) 关于unittest单元测试框架,还有一些问题值得进一步探讨.你可能在前一章的学习过程中产生了一些疑问,也许你会在本节中找到答案. 1.1 用例执行的顺序 用例的执行 ...

  7. Java - 包装类 常量池

    概述: 在Java中存在一些基本数据类型,这些基本数据类型变量,不能像其他对象一样调用方法,属性.... 一些情况下带来一些问题,包装类就是为了解决这个问题而出现 包装类可以使得这些基础数据类型,拥有 ...

  8. Implement Dependent Reference Properties 实现从属引用属性 （XPO）

    In this lesson, you will learn how to implement properties whose values can depend on other properti ...

  9. oracle体系结构简介

    oracle体系结构简介 一.物理存储结构    1.数据文件       存放数据库数据,以dbf为扩展名.将数据放在多个数据文件中,       再将数据文件分放在不同的硬盘中,可以提高存取速度. ...

  10. PM8909 linear charger硬件概述

    电池充电是由qpnp-vm-bus.c(电池驱动BMS)和qpnp-linear-charger.c(线性充电器)组成: SMMB charger:Switch-ModeBattery Charger ...