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& ...
随机推荐
- Objective-C language
Objective-C is the primary language used to write Mac software. If you're comfortable with basic obj ...
- 连接MongoDB数据库的配置说明
- java代码(生成long类型数字)
package test; public class GenerateNum { public static void main(String[] args) { //定义为long类型,需在数值后面 ...
- 编写Robotium测试程序
6.编写Robotium测试程序 1)导包 //导入需要测试的工程 import com.example.android.notepad.NotesList; //robotium提供的测试用类 im ...
- UVA 12563 Jin Ge jin Qu [h] ao 劲歌金曲 （01背包）
每首只能唱一次,而且中间不能不唱歌,所以先把状态赋值为-1,以区别合法状态和非法状态,在唱歌曲目最多的条件下,离开时间应该尽量晚. 状态定义f[i][j]考虑前i首歌唱歌时间为j的最大唱歌曲目 #in ...
- GUI进化--数据与界面分离
http://blog.csdn.net/doon/article/details/5946862 1.何谓数据和界面分离? GUI,即Graphic User Interface,人机交换界面.连接 ...
- angstromctf -No libc for You
0x00 syscall syscall函数原型为: int syscall(int number, ...) 其中number是系统调用号,number后面应顺序接上该系统调用的所有参数.大概意思是 ...
- 文件读写FILE类
1. 新建一个文件: FILE *f = fopen("a.txt","w+"); (1)fopen()函数介绍fopen的原型是:FILE *fopen(co ...
- [LUOGU] P2543 [AHOI2004]奇怪的字符串
LCS //Writer:GhostCai && His Yellow Duck #include<iostream> #include<cstring> #d ...
- （51）zabbix命令：zabbix_get获取item数据
zabbix_get是什么?有什么作用? 总有人在群里提问,为什么zabbix获取不到数据,为什么zabbix提示Not Support,怎么办?别老问,用zabbix_get试着获取数据即可.在za ...