js ajax 数据获取
在js中应用ajax 获取数据的方法,也写一个出来供复习所用
1.建议一个user.json 文件如下,保存名字为 user.json
{ "name": "huanying2015", "pwd": "123456", "sex": "男" }
2.1 创建一个ajax 请求,用于获取 user.json 文件的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload = function() {
var Obtn = document.querySelector('input');
Obtn.onclick = function() {
// 创建一个XMLHttpRequest 对象,这是ajax请求的核心;这里采用一个三元选择,是为了兼容ie6/ie5
// 在ie6/ie5中,使用new ActiveXObject('Microsoft.XMLHTTP')创建XMLHttpRequest对象
var xhr = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject('Microsoft.XMLHTTP');
// 获取ajax请求地址,在地址后面加入一个随机数,是为了解决ie浏览器的识别问题,ie浏览器相同的请求地址,不会再次进行请求,
// 加入一个随机数之后,再次请求时,ie会解析为不同的地址
var url = 'user.json?tid=' + Math.random();
// 对请求的状态进行监控
// 0 -- 未初始化,确认XMLHttpRequest 对象已经创建,并为调用open()方法初始化做准备
// 1-- 载入,对XMLHttpRequest 对象进行初始化,即调用open()方法,根据参数(method,url,true)完成对象状态的设置,并调用send()方法向服务器端发送请求。1表示正在向服务端发送请求
// 2--载入完成,收到服务器的相应数据,但是只是原始数据,并不能直接在客户端使用。值为2表示已经接收完全部相应数据,并为下一阶段解析做好准备
// 3--交互数据,解析相应数据,即根据服务器端相应头部返回的MIME类型把数据转换成能通过 responseBody,responseText,responseXML属性存取的格式,为在客户端调用做好准备。
// 值为3表示正在解析数据
// 4--完成, 此阶段确认全部数据都已经解析为可以在客户端使用的数据, 解析已经完成。 值为4表示解析完成, 可以通过XMLHttpRequest对象对应的属性获取数据
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
// 将XMLHttpRequest返回的数据转换成为json格式(因为返回来的是一个字符串)
var obj = JSON.parse(xhr.responseText);
var str = '';
// 遍历obj
for (var key in obj) {
str += "<p>" + key + "," + obj[key] + "</p>";
}
// 输出obj
document.querySelector('.box').innerHTML = str;
}
}
xhr.open('GET', url, true);
xhr.send(null);
}
}
</script>
</head>
<body>
<input type='button' value="ajax请求调用数据">
<div class='box'></div>
</body>
</html>
运行结果:(这里html文件名为ajax100.html,在这里直接双击打开ajax100.html文件是不能获取user.json内容的,必须要在浏览器输入地址,打开服务器才能获取user.json文件内容)
以上就是ajax 从user.json获取的数据
备注:以上是使用GET方式发送请求,如果使用POST方式,则在send()方法里添加要发送的参数,并且要使用 setRequestHeader() 来添加 HTTP 头
例如:
xhr.open("POST",url,true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("name=huanying2015&pwd=123456");
2.2 使用jquery 获取ajax数据
2.2.1 使用 jquery get 方式获取数据
建立两个文件:分别命名为 success.html 和 error.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
<script>
$(function() {
$('#login').on('click', function() {
var userName = $('#user').val();
var pwd = $('#pwd').val();
$.get('user.json', {}, function(obj) {
if (userName == obj['name'] && pwd == obj['pwd']) {
location.href = "success.html";
} else {
location.href = "error.html";
}
});
});
});
</script>
</head>
<body>
用户名: <input type="text" name="user" id="user"> <br> 密码: <input type="password" name="pwd" id="pwd"> <br>
<input type="button" value="登录" id="login">
</body>
</html>
2.2.2 使用 jquery post 方式获取数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
<script>
$(function() {
$('#login').on('click', function() {
var userName = $('#user').val();
var pwd = $('#pwd').val();
$.post('user.json', {}, function(obj) {
if (userName == obj['name'] && pwd == obj['pwd']) {
location.href = "success.html";
} else {
location.href = "error.html";
}
});
});
});
</script>
</head>
<body>
用户名: <input type="text" name="user" id="user"> <br> 密码: <input type="password" name="pwd" id="pwd"> <br>
<input type="button" value="登录" id="login">
</body>
</html>
2.2.3 使用 jquery ajax 方式获取数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
<script>
$(function() {
$('#login').on('click', function() {
var userName = $('#user').val();
var pwd = $('#pwd').val();
$.ajax({
url: 'user.json?tid=' + Math.random(),
data: {},
type: 'get',
dataType: 'json',
success: function(obj) {
if (userName == obj['name'] && pwd == obj['pwd']) {
location.href = 'success.html';
} else {
location.href = 'error.html';
};
},
error: function() {
console.log('ajax请求失败!');
}
});
});
});
</script>
</head>
<body>
用户名: <input type="text" name="user" id="user"> <br> 密码: <input type="password" name="pwd" id="pwd"> <br>
<input type="button" value="登录" id="login">
</body>
</html>
get方式,post方式,ajax方式,运行结果都是一样的,如下:
js ajax 数据获取的更多相关文章
- js ajax post提交 ie和火狐、谷歌提交的编码不一致,导致中文乱码
今天遇到一个问题找了很久发现: 使用js ajax post提交 ie和火狐.谷歌提交的编码不一致,导致中文乱码 //http://www.cnblogs.com/QGC88 $.ajax({ url ...
- JavaScript学习总结【12】、JS AJAX应用
1.AJAX 简介 AJAX(音译为:阿贾克斯) = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技 ...
- 简单的前端js+ajax 购物车框架(入门篇)
其实,一直想把自己写的一些js给总结下,也许是能力有限不能把它完美结合起来.只能自己默默的看着哪些代码,无能为力. 今天在公司实在没有事做,突然就想到写下商城的购物车的前端框架,当然我这里只有购物车的 ...
- MVC3.0+knockout.js+Ajax 实现简单的增删改查
MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...
- js+ajax编码三级联动
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title> ...
- 注册页面手机验证码无跳转接收[html+js+ajax+php]
[学习笔记] 来源:注册时需要使用短信验证码,但是注册的时候,点击接收验证码时,会产生跳转(尼玛,这不是我想要的啊!o(╥﹏╥)o) 查询资料和看书之后,知道使用js+ajax可以实现,就从网上找了一 ...
- js ajax请求传token
js ajax请求传token 方法一: headers: { Authorization: "BasicAuth " + token } 方法二: beforeSend: fu ...
- js ajax设置和获取自定义header信息的方法总结
目录 1.js ajax 设置自定义header 1.1 方法一: 1.2 方法二: 2.js ajax 获取请求返回的response的header信息 3.js ajax 跨域请求的情况下获取自定 ...
- 原生js ajax与jquery ajax的区别
原生js ajax的调用: ajax({ type : "get", url : "02_ajax_get.txt", data : { "userN ...
随机推荐
- vmware导出为ovf
鼠标单击要导出的虚拟机à文件-à导出为OVFà开始导出(耗时有点长) 导出过程 导出的文件格式为: 出现此报错请点击重试 虚拟就就导入了 导入后就可以使用了 vmware1 ...
- maven之BOM及BOM和provided的一个小坑
BOM(Bill of Materials)定义一整套相互兼容的jar包版本集合,使用时只需要依赖该BOM文件,即可放心的使用需要的依赖jar包,且无需再指定版本号.BOM的维护方负责版本升级,并保证 ...
- Hbase设置多个hmaster
Hbase设置多个hmaster https://www.cnblogs.com/prayer21/p/4866673.html
- SCCM2012 R2实战系列之十一:解决OSD分发Windows7 系统盘盘符为’D’问题
在SCCM 2012 R2操作系统分发(OSD)中,大家最早做的实验可能就是分发干净的Windows7和Windows 8(或Windows8.1)了吧.但是不可面对的问题就是相同配置的任务序列(只是 ...
- c#day05
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace ccc ...
- windows下安装、卸载mysql服务
将下载下来的mysql解压到指定目录下(如:d:\mysql)安装服务在命令行输入d:\mysql\bin\mysqld -installnet start mysql卸载服务在命令行输入net st ...
- (转)C# WebApi 身份认证解决方案:Basic基础认证
原文地址:http://www.cnblogs.com/landeanfen/p/5287064.html 阅读目录 一.为什么需要身份认证 二.Basic基础认证的原理解析 1.常见的认证方式 2. ...
- OpenGL模版小案例分析
下面的案例通过模版实现三角形截取的功能,代码如下: void draw(){ GLuint programObject; GLfloat vVerticessmall[] = { 0.0f, 0.25 ...
- 零基础学习python_列表和元组(10-13课)
一时兴起今天又回过头来补一下列表和元组,先来说说列表哈,列表其实是python最经常用到的数据类型了,不仅经常用还很强大呢,这个跟C语言里面的数组是类似的,列表当然也可以增删改查,不过我可没打算用之前 ...
- mysql中的sql_mode
mysql数据库的中有一个环境变量sql_mode,定义了mysql应该支持的sql语法,数据校验等!我们可以通过以下方式查看当前数据库使用的sql_mode: mysql> select @@ ...