<?php

header("content-type:text/html;charset=utf-8");

echo '{"name":"小明","age":"12","sex":"男"}';

?>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

<button id="bt1">点击获取json数据</button>

<script type="text/javascript">

    window.onload=function(){

        var bt1=document.getElementById("bt1");

        bt1.onclick=function(){

            //创建ajax对象，写兼容

            if(window.XMLHttpRequest){

                var xhr=new XMLHttpRequest();

            }else{

                var xhr=new ActiveXObject("Microsoft.XMLHTTP");

            };

            //设置发送数据的地址和方法

            xhr.open("POST","json.php");

            //设置我们的请求头信息,post方法才写请求头

            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

            //发送数据

            xhr.send();

            //绑定onreadystatechange事件

            xhr.onreadystatechange=function(){

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

                    var data=xhr.responseText;

                    //json字符串转换成为json对象  , data=eval("("+data+")");evel不存在兼容性问题，但是会有安全漏洞。

                    data=JSON.parse(data);

                    var str="";

                    str+="姓名:"+data.name+"<br>";

                    str+="年龄:"+data.age+"<br>";

                    str+="性别:"+data.sex;

                    document.body.innerHTML=str;

                };

            };

        };

    };

</script>

</body>

</html>

　

原生ajax请求json数据的更多相关文章

  1. 关于使用Ajax请求json数据，@RequestMapping返回中文乱码的几种解决办法

    一.问题描述: 使用ajax请求json数据的时候,无论如何返回的响应编码都是ISO-8859-1类型,因为统一都是utf-8编码,导致出现返回结果中文乱码情况. $.ajax({ type:&quo ...

  2. bootstrap通过ajax请求JSON数据后填充到模态框

    1.   JSP页面中准备模态框 <!-- 详细信息模态框(Modal) --> <div> <div class="modal fade" id=& ...

  3. ajax请求json数据案例

    今天有这样一个需求,点击六个大洲,出现对应的一些请求信息,展示在下面,请求请求过后,第二次点击就无需请求.如图所示:点击北美洲下面出现请求的一些数据 html代码结构: <div class=& ...

  4. jQuery实例之ajax请求json数据案例

    今天有这样一个需求,点击六个大洲,出现对应的一些请求信息,展示在下面,请求请求过后,第二次点击就无需请求.如图所示:点击北美洲下面出现请求的一些数据 html代码结构: <div class=& ...

  5. ajax请求json数据跨域问题（转）

    一.后台代理技术 由服务器端向跨域下的网站发出请求,再将请求结果返回给前端,成功避免同源策略的限制. 具体操作如下: 1.在localhost:81/a.html中,向同源下的某个代理程序发出请求 $ ...

  6. ajax 请求json数据中json对象的构造获取问题

    前端的界面中,我想通过ajax来调用写好的json数据,并调用add(data)方法进行解析,请求如下: json数据如下: { “type”:"qqq", "lat&q ...

  7. 浅析ajax请求json数据并用js解析(示例分析)

    这应该是每个web开发的人员都应该掌握的基础技术,需要的朋友可以参考下 自从接触了jquery就喜欢上了前端开发,而且深深感受到了前端开发的强大与重要之处.同时也想为asp.net鸣不平,事实上asp ...

  8. Ajax请求Json数据，报500错误，后台没有错误日志。

    post请求:http://localhost:9080/DataDiscoveryWeb/issueformcount/queryIssueTendencyDetail.xhtml?jobId=86 ...

  9. Servlet处理原生Ajax请求

    萌新小白人生中的第一篇博客,难免会有差错,还望各位大佬多多包涵. 1. Ajax技术简介      Ajax(Asynchronous JavaScript and XML,异步JavaScript和 ...

随机推荐

  1. lxml etree对存在的xml添加新节点，新节点没有排版格式化

    新添加的时候如果不做处理,是这个样子 要在解析xml加上 parser = etree.XMLParser(remove_blank_text=True)xml = etree.parse(major ...

  2. 2019-7-2-asp-dotnet-core-通过图片统计-csdn-用户访问

    title author date CreateTime categories asp dotnet core 通过图片统计 csdn 用户访问 lindexi 2019-7-2 19:21:2 +0 ...

  3. 记录redis安装及常用命令

    Redis安装及常用命令 一.安装 1.下载,解压,进入redis解压目录,make. make PREFIX=目录/redis install :安装到指定目录文件名为redis. 2.将解压目录里 ...

  4. axel 参数 文件下载地址

    axel 参数 文件下载地址 可选参数: -n 指定线程数 -o 指定另存为目录 -s 指定每秒的最大比特数 -q 静默模式 实例 axel -n 10 -o /tmp/ http://testdow ...

  5. Jmeter性能测试 入门【转】

    Jmeter性能测试 入门[转] Jmeter是一款优秀的开源测试工具, 是每个资深测试工程师,必须掌握的测试工具,熟练使用Jmeter能大大提高工作效率. 熟练使用Jmeter后, 能用Jmeter ...

  6. dvajs+antd定制主题踩坑记录

    记一下刚刚解决的问题,困扰了几周,期间困兽争斗,甚至想放弃antd组件库.终于出来了,人类科技又进步了(才怪). 首先我按照dva官网建立了项目.里面引入antd的各种组件,因为需要用到一个switc ...

  7. memcache课程---3、php使用memcache缓存实例

    memcache课程---3.php使用memcache缓存实例 一.总结 一句话总结: 前置:windows下安装好memcache.exe,安装好memcache的php扩展,开启memcache ...

  8. idea配置tomcat中war和war exploded的区别

    是选择war还是war exploded 这里首先看一下他们两个的区别: war模式:将WEB工程以包的形式上传到服务器 :war exploded模式:将WEB工程以当前文件夹的位置关系上传到服务器 ...

  9. SpringBoot 05_集成SpringDataJpa

    你还在为项目的集成头疼吗?你还在为管理大量的配置文件烦恼吗?如果是,用SpringBoot吧!今天主要介绍如果在SpringBoot的基础上创建一个集成了SpringDataJpa的项目,至于Spri ...

  10. 从三层架构到Spring框架

    首先是软件的应用分层架构 标准三层架构: 1:数据访问层:实现了数据的持久化 2:业务逻辑层:对逻辑的实现及处理,实际上不可能在表示层对数据不做任何处理,但是尽可能的将逻辑分为一层 3:表示层:数据的 ...