ajax dome案例
一.首先HTML页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
table{
margin: 100px auto;
width: 500px;
}
td{
border: 1px solid #0094ff;
}
</style>
</head>
<body>
<h1>获取女神</h1>
<input type="button" value="获取很多女神" id='getStars'>
</body>
</html>
<script type="text/javascript">
document.querySelector("#getStars").onclick = function () {
var ajax = new XMLHttpRequest(); ajax.open('post','03.getStars.php'); ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded"); ajax.send(); ajax.onreadystatechange = function () {
if (ajax.readyState==4&&ajax.status==200) {
console.log(ajax.responseText); // 转化为 js对象 不管是 数组 还是 对象 都可以使用该方法转化
var starArr = JSON.parse(ajax.responseText);
console.log(starArr); // 这里 也放到一个table中
var str =''; // table 开始
str +='<table>'; // 拼接tr td
for (var i = 0; i < starArr.length; i++) {
// 获取 当前循环的那个 对象
var currentStar = starArr[i]; // 拼接到 tr
str+='<tr>';
str+='<td>'+currentStar.name+'</td>';
str+='<td>'+currentStar.skill+'</td>';
str+='<td><img src="'+currentStar.path+'"></td>';
str+='</tr>';
} // table 结束
str +='</table>'; // 打印一下
console.log(str); // 设置到 页面上 即可
document.body.innerHTML = str;
}
}
}
</script>
二.建立一个info的json文件
[
{
"name":"刘能",
"skill":"吹牛逼",
"path":"images/nvshen.jpg"
},
{
"name":"贾玲",
"skill":"laugh",
"path":"images/jl.jpg"
},
{
"name":"刘涛",
"skill":"美美哒",
"path":"images/lt.jpg"
}
]
三.发送请求给页面的php文件
<?
echo file_get_contents("info/stars1.json");
?>
四.通过字符串解析json对象JSON.parse( ajax.responseText)
var starArr=JSON.parse(ajax.responseText);
ajax dome案例的更多相关文章
- jQuery中的ajax用法案例
什么是 AJAX? AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML). 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载 ...
- 关于ajax入门案例
$.ajax方法 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他ht ...
- Django（十二）视图--利用jquery从后台发送ajax请求并处理、ajax登录案例
一.Ajax基本概念 [参考]:https://www.runoob.com/jquery/jquery-ajax-intro.html 异步的javascript.在不全部加载某一个页面部的情况下, ...
- node+ajax实战案例（2）
2.静态资源渲染 2.1.创建http服务器 var http = require('http'); var url = require('url'); var app = http.createSe ...
- jQuery Address全站 AJAX 完整案例详解
本文详细介绍如何利用 jQuery 框架以及 jQuery Address 插件实现最基本的全站 AJAX 动态加载页面内容的功能的方法. 案例目标 以常见基本结构的网站为案例,实现全站链接 AJAX ...
- Ajax(javascript)案例
一.注册案例(Get方式) 1.前台 <%@ page language="java" import="java.util.*" pageEncoding ...
- ajax经典案例--省市联动
ajax的省市联动案例 如果我们的代码比较复杂,可以通过file_put_contents来输出信息到某个日志. 在一个元素中添加另一个元素使用的方法是:appendChild(). 函数append ...
- ajax交互案例
数据交互是前端很重要的一部分,静态页是基础,而交互才是网页的精髓.交互又分为人机交互和前后端数据交互,现阶段的互联网下,大部分的网站都要进行前后端数据交互,如何交互呢?交互的流程大概就是前端发送数据给 ...
- Ajax&Json案例
案例: * 校验用户名是否存在 1. 服务器响应的数据,在客户端使用时,要想当做json数据格式使用.有两种解决方案: 1. $.get(type):将最后一个参数type指定为"json& ...
随机推荐
- MyBatis的数据库操作
MyBatis的数据库操作 大学毕业有一段时间了,作为一名没有任何开发工作经验的大专毕业生想找到一份软件开发的工作确实很难,但我运气还算不错,应聘上一份java web开发的工作.作为一名新人,老板给 ...
- JS小游戏
捕鱼达人 飞机大战游戏 详解javaScript的深拷贝 http://www.cnblogs.com/penghuwan/p/7359026.html
- iOS操作系统的层次结构
iOS操作系统4层结构,如下表 可触摸层 Cocoa Touch layer 媒体层 Media layer 核心服务层 Core Services layer 核心操作系统层 Core OS lay ...
- azure 创建redhat镜像帮助
为 Azure 准备基于 Red Hat 的虚拟机 从 Hyper-V 管理器准备基于 Red Hat 的虚拟机 先决条件 本部分假定你已经从 Red Hat 网站获取 ISO 文件并将 RHEL 映 ...
- HTML5与PHP的比较
一:需求量比较 知名招聘网站拉勾网显示,北京地区HTML5的需求量只有73个,而PHP的需求量有500+个:智联招聘网显示,北京上海广州深圳HTML5的需求量是7475个,而PHP的需求量是12514 ...
- NYOJ-1057-寻找最大数（三）
http://acm.nyist.net/JudgeOnline/problem.php?pid=1057 寻找最大数(三) 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描 ...
- Codeforces Round #271 (Div. 2)-A. Keyboard
http://codeforces.com/problemset/problem/474/A A. Keyboard time limit per test 2 seconds memory limi ...
- delphi win7 and high path
Close DelphiLocate bordbk120N.dll (C:\Program Files (x86)\CodeGear\RAD Studio\6.0\bin)Make a backup ...
- react native在xcode真机调试ios
1修改URL地址:打开项目目录下的AppDelegate.m文件,修改里面的URL,把localhost改为你的电脑的IP.在Mac系统下,你可以在系统设置/网络里找到电脑的IP地址. 2选择设备:把 ...
- java后台验证码的生成
前台代码: <tr> <td>验证码</td> <td><input name="checkCode" type=" ...