html5 ajax数据显示,html5的ajax学习(二)

一、基础知识点

1.ajax可以做事情:局部刷新 浏览器搜索列表记录 加载更多的数据

2.登录页面同步网络请求:页面全部刷新,用户量大体验很不好

3.ajax的详解:ajax的get和post请求 同步还是异步,true为异步

ajax.open("get","login.php","true")

二、ajax的get和post请求

2.1 get和post请求

ajax的get异步请求

window.onload = function () {

var btn = document.getElementById('btn');

btn.onclick = function () {

//第一步

var ajax = null;

if(window.XMLHttpRequest){//标准浏览器

ajax = new XMLHttpRequest();

}else{//早期浏览器

ajax = new ActiveXObject('Microsoft.XMLHTTP');

}

var username = document.getElementById('username').value;

var password = document.getElementById('password').value;

//第二步

var geturl = 'open.php?username='+username+'&password='+password;

`post请求加入********`

//var posturl = 'open.php';

//ajax.open('post',posturl,true);

ajax.open('get',geturl,true); //第三步

`post请求加入********`

//ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

//var postParam = 'username='+username+'&password='+password;

//ajax.send(postParam);

ajax.send(null);

//第四步

ajax.onreadystatechange = function () {

if(ajax.readyState == 4){

if(ajax.state == 200){

var data = ajax.responseText;

console.log(data);

}

}

}

}

}

用户名:
密码:

2.2get和post请求区别

***get请求的拼接参数设置

var geturl = 'open.php?username='+username+'&password='+password;

ajax.open('get',geturl,true);

ajax.send(null);

***post请求的参数设置

var posturl = 'open.php';

ajax.open('post',posturl,true);

ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

var postParam = 'username='+username+'&password='+password;

ajax.send(postParam);

2.3后台的返回数据

//后台的数据

$username = $_GET['username'];

$password = $_GET['password'];

$username = $_POST['username'];

$password = $_POST['password'];

//返回的数据echo '用户名:'.$username.'密码:'.$password;

>

三、xml数据解析

3.1数据乱码的解决

var geturl = 'open.php?username='+username+'&password='+password;

变为

var geturl = 'open.php?username='+encodeURIComponent(username)+'&password='+password;

乱码一般是因为出现的中文数据。只需要将中文的数据的前面添加encodeURIComponent进行转码即可。

3.2xml数据解析

3

< xing/>

< xing >

4

数据解析

var data = ajax.responseText;

var bs = data.getElementsByTagName('xings')[0];

console.log(bs);

var xins = bs.getElementsByTagName('xing');

var tag = '';

for(var i = 0;i < xins.length;i ++){

var xing = xins[i];

var name = xing.getElementsByTagName('name')[0];

var desc = xing.getElementsByTagName('desc')[0];

tag += '

'+getNodeText(name)+''+getNodeText(desc)+',';

}

//展示数据

var tags = document.createElement('tags');

tags.innerHTML = tag;

四、json数据(标准的数据结构类型)解析

json的对象和json的字符串的区别

//json字符串

var str = '{"name":"三国","des":"文学"}';

//将字符串->json的对象

var data = JSON.parse(str);

//将json的对象->json字符串

var s = JSON.stringify(data);

//输出的内容为:{"name":"三国","des":"文学"}

console.log(str);

//输出的内容为:文学

console.log(data.des);

//输出的内容为:Object {name: "三国", des: "文学"}

console.log(data);

//输出的内容为:{"name":"三国","des":"文学"}

console.log(s);

4.1 JSON解析的实例讲解

json数据结构

d08e8091e92f

数据实例解析.png

效果图

d08e8091e92f

屏幕快照 2016-07-21 上午10.28.06.png

代码解析

快递

#divcss{

background-color: cornflowerblue;

width: 200px;

height: 200px;

position: relative;

margin-top: 100px;

margin-left: 400px;

}

window.onload = function () {

var btn = document.getElementById('btn');

btn.onclick = function () {

var code = document.getElementById('textfield').value;

//网络请求*******

var ajax = null;

ajax = new XMLHttpRequest();

var url = "https://www.baidu.com";

ajax.open('get',url,true);

ajax.send(nil);

ajax.onreadystatechange = function () {

if(ajax.status == 200&&ajax.readyState == 4){

alert("请求成功");

var data = JSON.parse(ajax.responseText);

if(data.status == 0){

var list = data.data.info.context;

var tag = "";

for (var i = 0;i < list.length;i ++){

//获取model中的数据

var item = list[i];

var time = item.time;

var desc = item.desc;

var t = new Date();

t.setTime(time+'000');

var str = t.getFullYear()+'年'+(t.getMonth()+1)+'月'+t.getDay()+'日'+(t.getHours()>12?'下午':'上午')+t.getHours()%12+':'+t.getMinutes()+':'+t.getSeconds();

tag += '

'+str+'
'+desc+'
';

}

var ul = document.createElement('ul');

ul.innerHTML = tag;

document.getElementById('divcss').appendChild(ul); }

}

};

};

var ul = document.createElement('ul');

ul.innerHTML = "无数据内容";

document.getElementById('divcss').appendChild(ul);

alert(3);

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/298596.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

后羿采集器怎么导出数据_后羿SEO:如何用后羿采集器查收录?(附详细步骤图)...

摘要&#xff1a;不知道大家查收录是用啥查的&#xff0c;或许市面上有工具&#xff0c;可以批量查&#xff0c;但是这些工具不是收费就是查询结果不太准确。今天狠人SEO教大家一个查询结果比较准确的方法。如标题写的&#xff0c;...不知道大家查收录是用啥查的&#xff0c;或…

ISA Server服务器故障恢复一例系统盘符更换之后的应对方法

周四下午的时候&#xff0c;某政府信息中心领导打电话告诉我&#xff0c;ISA Server服务器不能开机了。随后公司的技术员到达现场&#xff0c;经过检查&#xff0c;发现服务器显卡损坏。在更换显卡后&#xff0c;服务器可以开机&#xff0c;但却不能进入系统—-服务器在经过BIO…

有梦想就有前进的动力

有梦想就有前进的动力&#xff0c;我为自己代言转载于:https://blog.51cto.com/9730193/1589340

扩展Windows Mobile模拟器存储空间的方法

在Windows Mobile应用程序开发的初期&#xff0c;可以使用SDK自带的模拟器来进行调试&#xff0c;这给我们开发人员提供了一种方便的途径。一般的应用程序&#xff0c;占用空间的大小也就几 百K&#xff0c;或者几M&#xff0c;这在模拟器上调试起来一点问题也没有。但是有的时…

UOS LoongArch 上成功安装.NET Core 3.1

龙芯.NET团队正式发布了.NET Core 3.1 For LoongArch, 具体参见龙芯开源网站 http://www.loongnix.cn/index.php/Dotnet 。进入安装包下载地址LoongArch64-.NET Core 3.1&#xff0c;可以看到龙芯.NET团队做了很多工作&#xff0c;为Debian和Redhat两大Linux体系平台都做好了基…

c++ vector拷贝构造_JDK源码分析-Vector

1. 概述上文「JDK源码分析-ArrayList」主要分析了 ArrayList 的实现原理。本文分析 List 接口的另一个实现类&#xff1a;Vector。Vector 的内部实现与 ArrayList 类似&#xff0c;也可以理解为一个「可变数组」。其继承结构如下&#xff08;省略部分接口&#xff09;&#xff…

除了PS,原来这个也可以轻松实现图像处理!

全世界只有3.14 % 的人关注了爆炸吧知识在我们生活中&#xff0c;常见的图像处理软件有Adobe Photoshop、Adobe Illustrator等。然而&#xff0c;并非只有软件才能实现图像处理&#xff0c;通过编程手段也是能实现的&#xff01;今天&#xff0c;小天将要带着大家走进计算机视觉…

HTML5视频和音频常见的格式,HTML5 音频和视频

HTML5 特性&#xff0c;包括原生音频和视频支持而无需 Flash。HTML5 和 标签让我们给站点添加媒体变得简单。我们只需要设置 src 属性来识别媒体资源&#xff0c;包含 controls 属性让用户可以播放和暂停媒体。嵌入视频下面是在 Web 页面中嵌入视频文件最简单的形式&#xff1a…

北斗三号b1c频点带宽_【导航论坛】北斗三号卫星导航信号及接收策略

原标题&#xff1a;【导航论坛】北斗三号卫星导航信号及接收策略编者按以“5G/GNSS高精度定位与空间数据深度应用”为主题的高峰论坛上&#xff0c;来自清华大学的陆明泉教授为与会代表带来了题为《北斗三号卫星导航信号及接收策略》的主题报告。陆教授首先对报告的题目作了一个…

下雨天纵使少了什么也是少不了一把伞的&#xff0c;即使是几千年前&#xff0c;也不管细雨霏霏&#xff0c;大雨倾盆。愿意沐浴风雨中&#xff0c;享受这样惠泽的人总是少的。从“孤舟蓑笠翁&#xff0c;独钓寒江雪”&#xff0c;“十里一长亭&#xff0c;五里一短亭”&#xf…

oracle用户名密码过期引起的网站后台无法登录

本来今天休息&#xff0c;但是接到同事反映&#xff1a;客户的WEB无法登录了&#xff0c;网站能打开&#xff0c;但是后台登录不了。我就联系了客户&#xff0c;客户说是WEB用户的密码过期导致的&#xff0c;默认是180天到期。接着就是我的操作流程了&#xff1a;1.先从WEB服务…

微服务的终极目标,Mecha分布式运行时之Dapr

1. Mecha 是啥&#xff1f;微服务发展到今天&#xff0c;已经有很多公司多年前已经改造完毕&#xff0c;也有些公司还在路上&#xff0c;微服务的优势&#xff0c;有过了解的朋友应该也都能说出个一二三来&#xff0c;经历过微服务改造的&#xff0c;应该都知道其中的艰辛。单体…

java mina unix client

/Files/nanshouyong326/MinaTest.rar转载于:https://www.cnblogs.com/nanshouyong326/archive/2011/03/15/1985130.html

python input输入多个变量_「Python 秘籍」1.2 解压可迭代对象赋值给多个变量

问题需要从某个可迭代对象中分解出 N 个元素&#xff0c;但是这个可迭代对象的长度可能超过 N&#xff0c;这会导致出现“需要解包的值过多(too many values to unpack)”的异常。解决方案“星号表达式”可以用来解决这个问题。例如&#xff0c;假设开设了一门课程&#xff0c;…

为什么不谈恋爱?

1 存好啦&#xff01;2 这是我看过最形象的小说描写了图自天秀bot3 原来游泳池是这样建的。。4 这谁还舍得拉绳子啊5 铁笼&#xff1a;大哥&#xff0c;给点面子好不好&#xff1f;6 别说&#xff0c;这门给狗子放头还挺合适的7 机器人骑自行车你点的每个赞&#xff0c;我都认真…

jpa 默认生成sql语句_springboot-jpa自动创建数据库表

第一步创建springboot项目&#xff0c;jpa&#xff0c;mysql,代码如下:application.ymlspring:datasource:url: jdbc:mysql://127.0.0.1:3306/springboot_testusername: rootpassword: 514730driver-class-name: com.mysql.jdbc.Driverjpa:hibernate:# 更新或者创建数据表结构d…

html怎么做交互留言,简单html与servlet交互

1.usercheck.htmlhref"../lib/ligerUI/skins/Aqua/css/usertext.css" rel"stylesheet"type"text/css" />填写用户名/>id"verifyButton"/>>2.usertext.css.userClass {border: 1px solid red ;background-image:url(../../…

系出名门Android(7) - 控件(View)之ZoomControls, Include, VideoView, WebView, RatingBar, Tab

[索引页][]系出名门Android(7) - 控件(View)之ZoomControls, Include, VideoView, WebView, RatingBar, Tab, Spinner, Chronometer, ScrollView作者&#xff1a;webabcd介绍在 Android 中使用各种控件(View) ZoomControls - 放大/缩小按钮控件Include - 整合控件VideoView - 视…

使用php最容易犯的11个MySQL错误。

对于大多数web应用来说&#xff0c;数据库都是一个十分基础性的部分。如果你在使用PHP&#xff0c;那么你很可能也在使用MySQL—LAMP系列中举足轻重的一份子。对于很多新手们来说&#xff0c;使用PHP可以在短短几个小时之内轻松地写出具有特定功能的代码。但是&#xff0c;构建…

牛!又一顶级大厂开招.NET,5年35k!

继腾讯阿里百度京东华为招.NET Core后&#xff0c;又一顶级大厂开招.NET Core了&#xff1a;美团上海总部&#xff0c;住宿业务线别样红业务部招.NET开发&#xff0c;25~35k&#xff0c;具体参见【招聘(上海)】美团酒店招聘 .NET 高级开发。大厂遥不可及的认知该放下了&#xf…