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& ...
随机推荐
- C语言abort函数
C语言编程入门教程,C语言库函数的abort函数的作用是异常终止一个进程,意味着abort后面的代码将不再执行. #include<stdio.h> #include<stdlib. ...
- C# for循环的嵌套 作用域
for() { 循环体可以套无数个for循环 } 比如:for() { for() { for() {... ...这里面可以镶嵌无数个for循环} } } 也可以这样 for() { for() ...
- 补充---spring多线程任务调度
在spring任务调度的基础上增加多线程 三种方式: (1)使用OpenSymphony Quartz 调度器 (2)使用JDK Timer支持类 (3)SpringTaskExecutor抽象 sp ...
- 刷新本地DNS缓存的方法
http://www.cnblogs.com/rubylouvre/archive/2012/08/31/2665859.html 常有人问到域名解析了不是即时生效的嘛,怎么还是原来的呢?答案就是在本 ...
- Xamarin.IOS binding库编译失败的解决办法
报错:目标框架 Xamarin.iOS,Version=v1.0 未找到 复制 C:\Program Files (x86)\Microsoft Visual Studio\2017\Professi ...
- lambda表达式的简单入门
前言:本人在看<Java核心技术I>的时候对lamdba表达式还不是太上心,只是当做一个Java 8的特性了解一下而已,可是在<Java核心技术II>里面多次用到,所以重新入门 ...
- UVA - 1279 Asteroid Rangers （动点的最小生成树）
题意,有n个匀速动点,求最小生成树的改变次数. 一句话总结:动态问题的一般做法是先求出一个静态的解,然后求出解发生改变的事件,事件按照时间排序,依次处理. 先求出最开始的最小生成树(MST),当MST ...
- UIWebView与JavaScript相互调用
UIWebView与JavaScript的那些事儿 UIWebView是IOS SDK中渲染网面的控件,在显示网页的时候,我们可以hack网页然后显示想显示的内容.其中就要用到javascript的知 ...
- Mysql闪回工具之binlog2sql的原理及其使用
生产上误删数据.误改数据的现象也是时常发生的现象,作为运维这时候就需要出来补锅了,最开始的做法是恢复备份,然后从中找到需要的数据再进行修复,但是这个时间太长了,对于大表少数数据的修复来讲,动作太大,成 ...
- ucosii（2.89）mutex 应用要点
mutex 的创建在于共享资源打交道是可以可以保证满足互斥条件:1,必须保证继承优先级要高于可能与相应共享资源打交道的任务中优先级最高的优先级.2,不要将占有Mutex的任务挂起,也不要让占有mute ...