<?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. 以太坊solidity智能合约语言学习资源整理

    暂时看到篇文章写的不错,先收集下来,后面有机会自己也整理一个 Solidity语言学习(一)Solidity语言学习(二)——Solidity的安装与编译Solidity语言学习(三)——智能合约编程 ...

  2. 如何做一个标记为安全的ACTIVEX控件

    1．添加辅助函数控件的基本结构中含有xxApp,xxCtrl,xxPropPage三个类.找到xxApp的头文件,添加三个辅助函数.// Helper functionto create a comp ...

  3. React中的Ajax

    React中的Ajax 组件的数据来源,通常是通过Ajax请求从服务器获取,可以使用componentDidMount方法设置Ajax请求,等到请求成功,再用this.setState方法重新渲染UI ...

  4. 19-10-31-B

    %%%B哥 ZJ一下: 开题. 发现 语文考试???? 我不认识XD.老帅哥救我! 后来…… 对什么取模??? 什么玩意??输入什么?? 满足啥?? 全是亻 啊! 后来才知道是题楔×了 不管了. 然后 ...

  5. light oj 1095 组合数学

    #include <stdio.h> #include <string.h> #include <stdlib.h> #include <math.h> ...

  6. Windbg 问题集锦记录

    问题1: 问: 0  Id: 15f4.e60 Suspend: 1 Teb: 7ffdf000 Unfrozen  # ChildEBP RetAddr  Args to Child         ...

  7. if __name__=='__main__'使用场景，彻底明白

    本博中有一篇文章写了 if __name__=='__main__'的作用与原理http://www.cnblogs.com/fennudexiaoniao/p/7458324.html,但是好像似懂 ...

  8. Spring SpringMVC SpringBoot SpringCloud 注解整理大全

    Spring SpringMVC SpringBoot SpringCloud 注解整理 才开的博客所以放了一篇以前整理的文档,如果有需要添加修改的地方欢迎指正,我会修改的φ(๑˃∀˂๑)♪ Spri ...

  9. css设置字体小于12px

    p { white-space: nowrap; font-size: .12rem; -webkit-transform-origin-x: 0; //缩小后文字居左 -webkit-transfo ...

  10. MFC 多屏显示

    概念 HMONITOR : 显示器句柄. 有效的显示器,该值不为空. 当WM_DISPLAYCHANGE 心消息发送的时候, 任何小时起都有可能被移除, 所以应用程序时刻检查全部的HMONITORS是 ...