ajax在js中和jQuery中的用法实例详解

目录
  • 原生 JS
    • 怎么发送一个 get 请求
    • 怎么发送一个 post 请求
    • 发送一个带有参数的 get 请求
    • 发送一个带有参数的 post 请求
  • jQuery
    • $.get 几个参数，怎么使用
    • $.post 几个参数，怎么使用
    • $.ajax 几个参数，怎么使用
  • JSONP
    • $.ajax 怎么发送 jaonp 请求
  • 总结

原生 JS

怎么发送一个 get 请求

  • 创建一个 ajax 对象

    • var xhr = new XMLHttpRequest()
  • 设置请求方式和请求地址[，是否异步]
    • xhr.open('get', '/ajax'[, true or fasle])
  • 准备接受请求体
    • xhr.onload = function () { console.log(xhr.responseText) }
    • xhr.onreadystatechange = function () { if (xhr.readyState === 4) { console.log( xhr.responseText ) } }
  • 发送请求
    • xhr.send(null)
var xhr = new XMLHttpRequest()
xhr.open('get', '/ajax')
xhr.onload = function () {
  console.log(xhr.responseText)
}
xhr.send(null)

怎么发送一个 post 请求

  • 创建一个 ajax 对象

    • var xhr = new XMLHttpRequest()
  • 设置请求方式和请求地址[，是否异步]
    • xhr.open('post', '/ajax'[, true or fasle])
  • 准备接受请求体
    • xhr.onload = function () { console.log(xhr.responseText) }
    • xhr.onreadystatechange = function () { if (xhr.readyState === 4) { console.log( xhr.responseText ) } }
  • 发送请求
    • xhr.send(null)
var xhr = new XMLHttpRequest()
xhr.open('post', '/ajax')
xhr.onload = function () {
  console.log(xhr.responseText)
}
xhr.send(null)

发送一个带有参数的 get 请求

  • var xhr = new XMLHttpRequest
  • 直接在请求地址后面拼接参数，? 开始，key=value 的形式，多个参数之间以 &  分割
    • xhr.open('get', '/ajax?name=Jack&age=18')
  • xhr.onload = function () { console.log( xhr.responseText ) }
  • xhr.send()

发送一个带有参数的 post 请求

var xhr = new XMLHttpRequest

不需要在请求地址后面拼接任何内容

  • xhr.open('post', '/ajax')

xhr.onload = function () { console.log( xhr.responseText ) }

post 方式携带参数是直接写在 xhr.send() 后面的 () 里面

  • 自己收集数据 key=value

    • 自己设置请求头
    • xhr.setRequestHeadr('content-type', 'application/x-www-form-urlencoded')
  • FormData 收集数据
    • 什么都不需要，只要使用 FormData 收集数据就可以了
    • var fd = new FormData(DOM)
    • 在发送请求的时候只要把 fd 带过去就行了
var xhr = new XMLHttpRequest()
xhr.open('post', '/ajax')
xhr.onload = function () {
  console.log(xhr.responseText)
}
xhr.setRequestHeadr('content-type', 'application/x-www-form-urlencoded')
xhr.send('key=value&key=value')

var fd = new FormData(document.querySelector('form'))
var xhr = new XMLHttpRequest()
xhr.open('post', '/ajax')
xhr.onload = function () {
  console.log(xhr.responseText)
}
xhr.send(fd)

jQuery

$.get 几个参数，怎么使用

地址

  • 参数 key=value 或者 { name: 'Jack' }
  • 成功的回调函数
  • 预期后台返回的数据类型
    • text ： 什么都不做，直接给你结果
    • json ： 必定会执行一步 JSON.parse()

$.post 几个参数，怎么使用

  • 地址
  • 参数 key=value 或者 { name: 'Jack' }， 不能发送 FormData
  • 成功的回调函数
  • 预期后台返回的数据类型

$.ajax 几个参数，怎么使用

  • 就是配置项 options

    • url： 请求地址
    • method/type:  请求方式
    • data： 携带参数
    • dataType： 后台返回的数据类型天
    • success： 成功的回掉
    • error： 失败的回调
    • contentType:  发送 FormData 的时候使用的
    • processData： 发送 FormData 的时候使用的

JSONP

$.ajax 怎么发送 jaonp 请求

  • dataType 必须是 jsonp
  • 方式必须是 get
  • jsonp： 根据后台来决定
$.ajax({
  url: '/jsonp',
  data: {},
  dataType: 'jsonp',
  jsonp: 'callback',
  success (res) {
    console.log(res)
  }
})

总结

到此这篇关于ajax在js中和jQuery中的用法的文章就介绍到这了,更多相关ajax在js中和jQuery的用法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Javascript发送AJAX请求实例代码

    一个对AJAX的封装 //url就是请求的地址 //successFunc就是一个请求返回成功之后的一个function,有一个参数,参数就是服务器返回的报文体 function ajax(url,successFunc) { var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); xhr.open("POST",url,true); xhr.onr

  • JS Ajax请求如何防止重复提交

    好长时间没写js代码了刚好遇到这样的问题.我们系统多数表单没有做防止重复提交的. 由于不想在后端这边处理,因为假如由后端处理的话,就需要在页面加载的时候给出一次性的token值,加大了开发的工作量不说,还容易忘记做这个,同时,ajax也不好处理,需要提交失败的话同时返回新的token值. 所以我想在,js这边动手.其实以前和前端提过,久久不见动静,就只好弄块砖丢出去了.思路是,覆盖掉$.ajax,在这里面处理掉防止重复提交的问题,而前端的业务开发不受影响,不改代码,无感知. 我想架构的目的之一,

  • 通过jquery的ajax请求本地的json文件方法

    自己学习jquery的ajax的经历,记录一下 ajaxTestDemo.html 在body里面放一个id为test的div <div id="test"></div> 第一步还是要先加载jquery文件 jquery.min.js <script> $(function(){ $.ajax({ //请求方式为get type:"GET", //json文件位置 url:"./data/shuju.json"

  • JS 拦截全局ajax请求实例解析

    你是否有过下面的需求:需要给所有ajax请求添加统一签名.需要统计某个接口被请求的次数.需要限制http请求的方法必须为get或post.需要分析别人网络协议等等,那么如何做?想想,如果能够拦截所有ajax请求,那么问题就会变的很简单!

  • jquery教程ajax请求json数据示例

    复制代码 代码如下: $.ajax({            url: '这个地址要换成你自己的',            data: {S_CourseID: courseid , CurrTime : new Date().getTime()}, //加个时间戳,否则会不自动更新数据            dataType: 'json',            success: function(data)            { if (data != null) { if ( dat

  • 浅析ajax请求json数据并用js解析(示例分析)

    浅析ajax请求json数据并用js解析(示例分析)

    自从接触了jquery就喜欢上了前端开发,而且深深感受到了前端开发的强大与重要之处.同时也想为asp.net鸣不平,事实上asp.net并没有臃肿,说它臃肿的人无非是那些不了解它的人,可能他们看见过一些asp.net低级程序员在不断往页面里拖控件,然后发现生成的页面中含有大量的垃圾代码,而且几乎把所有的逻辑处理都写在了服务器端,觉得服务器压力太大了.事实上,刚入门asp.net的人会有拖控件的习惯,但是当你再深入你会发现,最终asp.net的开发模式还是跟PHP.jsp等其它web开发模式是一样

  • js与jQuery终止正在发送的ajax请求的方法

    本文实例讲述了js与jQuery终止正在发送的ajax请求的方法.分享给大家供大家参考,具体如下: 核心:调用XMLHttpRequest对象上的abort方法 jquery的ajax方法有自己的超时时间设置参数: $.ajax({type:'POST', url:'b.php', data:'', timeout:5000, success:function(){ } }) 同时 1. $.get返回的数据类型是XMLHttpRequest,请参考手册.($.post.$.ajax.$.get

  • js每隔5分钟执行一次ajax请求的实现方法

    一个页面好像只能有一个 window.onload=function(){},所以要有多个事件,这样写就好了 复制代码 代码如下: window.onload=function(){ //假设这里每个五分钟执行一次test函数 publicBusi(); personBusi(); } function publicBusi(){ setTimeout(personBusi,1000*60*7);//这里的1000表示1秒有1000毫秒,1分钟有60秒,7表示总共7分钟 $.post('${ba

  • Jquery通过ajax请求NodeJS返回json数据实例

    最近看了NodeJS相关的,在网上查了下结合AJAX的应用,感觉应用前景还是不错的.为什么用这个组合呢? 1.NodeJS不需要安装,拷贝过去就可以使用,而环境变量可以只配置在当前cmd窗口,运行方便. 2.通过HTML的ajax请求,可以实现在不同的服务器上,可跨域获取数据. 3.通信数据格式灵活,可以是xml.json.binary等,数据适合任何平台. 在说说我的环境,我使用的是公司提供的电脑,有很多限制,比如是域中电脑,操作权限低,无法安装任何软件,无法修改计算机配置,无法使用U盘等等.

  • ajax在js中和jQuery中的用法实例详解

    目录 原生 JS 怎么发送一个 get 请求 怎么发送一个 post 请求 发送一个带有参数的 get 请求 发送一个带有参数的 post 请求 jQuery $.get 几个参数,怎么使用 $.post 几个参数,怎么使用 $.ajax 几个参数,怎么使用 JSONP $.ajax 怎么发送 jaonp 请求 总结 原生 JS 怎么发送一个 get 请求 创建一个 ajax 对象 var xhr = new XMLHttpRequest() 设置请求方式和请求地址[,是否异步] xhr.ope

  • jquery中cookie用法实例详解(获取,存储,删除等)

    jquery中cookie用法实例详解(获取,存储,删除等)

    本文实例讲述了jquery中cookie用法.分享给大家供大家参考,具体如下: cookie在jquery中有指定的cookie操作类,下面我先来介绍我们在使用cookie操作类时的一些问题,然后介绍正确的使用方法. 使用JQuery操作cookie时 发生取的值不正确的问题: 结果发现cookie有四个不同的属性: 名称,内容,域,路径 $.cookie('the_cookie'); // 读取 cookie $.cookie('the_cookie', 'the_value'); // 存储

  • jQuery Migrate 插件用法实例详解

    jQuery Migrate是应用迁移辅助插件,是用于高级版本兼容低级版本辅助插件. 例如jQuery版本用的是1.x,计划升级到3.x,就可以在页面删除1.x版本,换成3.x版本,如果有脚本错误,就引入jquery-migrate插件用于兼容低版本,同时也显示低版本方法替换成新版本方法的方案. 例子: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>te

  • Java中的instanceof关键字在Android中的用法实例详解

    在下面介绍Android中如何使用instanceof关键字开发更方便时,先来温习一下java中instanceof的概念. instanceof大部分的概念是这样定义的:instanceof是Java的一个二元操作符,和==,>,<是同一类东西.由于它是由字母组成的,所以也是Java的保留关键字.它的作用是测试它左边的对象是否是它右边的类的实例,返回boolean类型的数据.举个栗子: String s = "I AM an Object!"; boolean isObj

  • js中this用法实例详解

    本文实例讲述了js中this用法.分享给大家供大家参考.具体如下: 1. 指向window 全局变量 alert(this) //返回 [object Window] 全局函数 function sayHello(){ alert(this); } sayHello(); 2. 指向该对象(在全局里面this指向window,在某个对象里面this指向该对象,在闭包里面this指向window) var user="the Window"; var box={ user:'the bo

  • javascript中this用法实例详解

    本文实例讲述了javascript中this用法.分享给大家供大家参考,具体如下: JavaScript中的this含义非常丰富,它可以是全局对象,当前对象或者是任意对象,这都取决于函数的调用方式.函数有以下几种调用方式:作为对象方法调用.作为函数调用.作为构造函数调用.apply或call调用. 对象方法调用 作为对象方法调用的时候,this会被绑定到该对象. var point = { x : 0, y : 0, moveTo : function(x, y) { this.x = this

  • python中尾递归用法实例详解

    本文实例讲述了python中尾递归用法.分享给大家供大家参考.具体分析如下: 如果一个函数中所有递归形式的调用都出现在函数的末尾,我们称这个递归函数是尾递归的.当递归调用是整个函数体中最后执行的语句且它的返回值不属于表达式的一部分时,这个递归调用就是尾递归.尾递归函数的特点是在回归过程中不用做任何操作,这个特性很重要,因为大多数现代的编译器会利用这种特点自动生成优化的代码. 原理: 当编译器检测到一个函数调用是尾递归的时候,它就覆盖当前的活跃记录而不是在栈中去创建一个新的.编译器可以做到这点,因

  • wxPython中listbox用法实例详解

    本文实例讲述了wxPython中listbox用法.分享给大家供大家参考.具体如下: # load a listbox with names, select a name and display in title # experiments with wxPython by vegaseat 20mar2005 # Python v2.4 and wxPython v2.5 # If you have not already done so, install Python 2.4 first.

  • C#中委托用法实例详解

    本文实例讲述了C#中委托用法.分享给大家供大家参考.具体分析如下: 这里演示了如何使用匿名委托来计算员工的薪水奖金.使用匿名委托简化了程序,因为无需再定义一个单独的方法. (-:The data for each employee is stored in an object containing personal details as well as a delegate that references the algorithm required to calculate the bonus

  • python orm 框架中sqlalchemy用法实例详解

    本文实例讲述了python orm 框架中sqlalchemy用法.分享给大家供大家参考,具体如下: 一.ORM简介 1. ORM(Object-Relational Mapping,对象关系映射):作用是在关系型数据库和业务实体对象之间做一个映射. 2. ORM优点: 向开发者屏蔽了数据库的细节,使开发者无需与SQL语句打交道,提高了开发效率; 便于数据库的迁移,由于每种数据库的SQL语法有差别,基于Sql的数据访问层在更换数据库时通过需要花费时间调试SQL时间,而ORM提供了独立于SQL的接

随机推荐