js的ajax请求
1 js原生get请求
<script>
window.onload = function(){
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
let xhttp = new XMLHttpRequest();
xhttp.open('get','http://localhost:3000/users');
xhttp.send();
xhttp.onreadystatechange = function(){
if(xhttp.readyState == 4){//readyState 服务器响应的状态编码
console.log(JSON.parse(xhttp.response));
}
}
}
}
</script>
get
2 js原生post请求
<script>
window.onload = function(){
var oBtn = document.getElementById('btn');
var obj = {
"name":"zxq",
"age":123
}
oBtn.onclick = function getData(){
var xhttp = new XMLHttpRequest();
xhttp.open('post','http://localhost:3000/users');
xhttp.setRequestHeader("Content-type","application/json");//设置请求头
xhttp.send(JSON.stringify(obj));//将对象转为json格式
xhttp.onload = function(){
console.log("请求执行完毕");
console.log(xhttp.responseText);
}
}
console.log(oBtn.onclick.name);//getData
}
</script>
post
3 jq的ajax请求
<script>
$(function(){
$('#btn').on('click',function(){
$.ajax({
type:'GET',
url:'http://localhost:3000/users',
success:function(response){//成功回调函数
console.log('成功了');
console.log(typeof(response));
},
error:function(data){//错误输出信息
console.log('错误了');
console.log(data);
}
})
// 第二种get写法
// $.get('http://localhost:3000/users',
// {"name":"zxq"},//get的传入参数
// function(data){//成功回调函数
// console.log('成功了');
// console.log(typeof(data));
// })
})
})
</script>
get
<script>
$(function(){
$('#btn').on('click',function(){
$.ajax({
type:'POST',
url:'http://localhost:3000/users',
dataType:'json',
data:{name:'zzz'},//发送到服务器的数据,jq自动转化格式
success:function(response){//成功回调函数
console.log('成功了');
console.log(response);
},
error:function(data){//错误输出信息
console.log('错误了');
console.log(data);
}
})
})
})
</script>
post
4 vue的axios发送ajax请求
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'vue实例'
},
methods:{
getData:function(){
axios.get('http://localhost:3000/users',{
params:{//传入的参数
id:20
}
})
.then((response) => {//成功回调函数
console.log(response.data);
})
.catch((response) => {//失败回调函数
console.log('错误了');
console.log(response);
})
.finally(function(){//始终执行的函数
console.log('finally函数执行');
})
//第二种写法
// axios({
// methods:'get',
// url:'http://localhost:3000/users',
// responseType:'json'//返回数据类型
// })
// .then(function(response){
// console.log(response);
// })
}
}
})
</script>
axios
知识点总结:
ajax的总体流程
1 创建XMLHttpRequest对象
2 为这个对象设置参数,也就是open方法
3 发送设置好的参数及内容,也就是send方法
4 接收服务器的响应数据,及对响应数据进行各种操作等
xhttp 的 readyState 存的是服务器请求响应的状态信息:
0:初始化,创建了XMLHttpRequest对象
1:请求开始,初始化XMLHttpRequest对象,调用open方法
2:请求发送,调用send方法
3:开始读取服务器响应,已经接收到响应头,开始接收响应体
4:服务器接收全部完成,存入到XMLHttpRequest对象中
json(特定的字符串)与对象的相互转化:
JSON.stringify(obj) 将对象转化为json格式
JSON.parse(json)将json格式转化为对象或数组等
var get = function getData(){}
这种方式定义的,get.name = getData;
js的ajax请求的更多相关文章
- Vue.js之Ajax请求
Vue.js同React.Angular,可以说号称前端三巨头. 前段时间,有个哥们说,Vue.js现在出2.0版本了.可是我现在还是在用1.0的. Vue.js一直都没有好好系统的学习,包括目前公司 ...
- leyou_04_vue.js的ajax请求方式
1.异步查询数据,自然是通过ajax查询,大家首先想起的肯定是jQuery.但jQuery与MVVM的思想不吻合,而且ajax只是jQuery的一小部分.因此不可能为了发起ajax请求而去引用这么大的 ...
- 原生js发送ajax请求
堕落了一阵子了,今天打开博客,发现连登录的用户名和密码都不记得了.2016年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...
- js 中ajax请求时设置 http请求头中的x-requestd-with= ajax
今天发现 AngularJS 框架的$http服务提供的$http.get() /$http.post()的ajax请求中没有带 x-requested-with字段. 这样的话,后端的php 就无法 ...
- 用JS实现Ajax请求
AJAX核心(XMLHttpRequest) 其实AJAX就是在Javascript中多添加了一个对象:XMLHttpRequest对象.所有的异步交互都是使用XMLHttpServlet对象完成的. ...
- js的AJAX请求有关知识总结
什么是AJAX?AJAX作用是什么? async javascript and xml(异步的javascript和xml) 作用:实现局部刷新 async:我们真实项目中一般使用AJAX从服务器端获 ...
- 原生JS发送Ajax请求、JSONP
一.JS原生Ajax Ajax=异步Javascript+XML: ajax是一种数据请求的方式,不需要刷新整个页面.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ajax的核心 ...
- js原生ajax请求get post笔记
开拓新领域,贵在记录.下面记录了使用ajax请求的get.post示例代码 //ajax get 请求获取数据支持同步异步 var ajaxGet = function (reqUrl, params ...
- js实现ajax请求
练下手,好久没写ajax var xmlhttp=null;//创建XMLHttprequest function createXMLHttpRequest(){ if(window.ActiveXO ...
随机推荐
- Python读取excel 数据
1.安装xlrd 2.官网 通过官网来查看如何使用python读取Excel,python excel官网: http://www.python-excel.org/ 实例: (1)Excel内容 把 ...
- django的url分发封装
h2, body>h3, body>h4, body>h1{ padding: 10px; background-color: #4cae4c; text-align: center ...
- 爬虫 xpath
xpath简介 1.xpath使用路径表达式在xml和html中进行导航 2.xpath包含标准函数库 3.xpath是一个w3c的标准 xpath节点关系 1.父节点 2.字节点 3.同胞节点 4. ...
- 使用Swagger服务搭建.Net Core API
使用Swagger服务搭建.Net Core API 创建.Net Core API 新建项目.文件——新建——项目 选择应用程序模板. 设置存放路径,命名方案名称. 创建API. 搭建成功. 使用S ...
- Redis 3.0中文版学习(二)
网址:http://wiki.jikexueyuan.com/project/redis-guide/entry-to-master-middle.html 1.Redis的列表: 采用链表的实现方法 ...
- [Luogu3868] [TJOI2009]猜数字
题目描述 现有两组数字,每组k个,第一组中的数字分别为:a1,a2,...,ak表示,第二组中的数字分别用b1,b2,...,bk表示.其中第二组中的数字是两两互素的.求最小的非负整数n,满足对于任意 ...
- 修改配置文件application.properties
附录A.常用应用程序属性 可以在application.properties文件内部application.yml,文件内部或命令行开关中指定各种属性.本附录提供了常见Spring Boot属性的列表 ...
- 2.单核CPU是如何实现多进程的?
单核cpu之所以能够实现多进程,主要是依靠于操作系统的进程的调度算法 如时间片轮转算法,在早期,举例说明:有5个正在运行的程序(即5个进程) : QQ 微信 有道词典 网易云 ...
- Redis 到底是怎么实现“附近的人”这个功能的?
前言:针对“附近的人”这一位置服务领域的应用场景,常见的可使用PG.MySQL和MongoDB等多种DB的空间索引进行实现.而Redis另辟蹊径,结合其有序队列zset以及geohash编码,实现了空 ...
- WPF中的文本度量
关于WPF中的文本度量,需要了解以下几个问题: WPF中支持一些常用的度量单位:px(device independent pixels).in(inches).cm(centimeters).pt( ...