<?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. [笔记]180612 for DevOps

    adb devices 识别不了安卓手机:我下的adb interface驱动下载链接:如果设备管理器中ADB Interface是黄色的,就需要先安装adb interface驱动(BD:adb i ...

  2. HTML - 框架标签相关

    <html> <head></head> <!-- frameset 框架标签 cols : 按照列进行区域的切分 rows : 按照行进行区域的切分 fra ...

  3. MSSQLSERVER跨服务器连接(远程登录)的示例代码

    MSSQLSERVER跨服务器链接服务器创建方法如下 复制代码 代码如下: --声明变量 Declare @svrname varchar(255), @dbname varchar(255), @s ...

  4. 前端CSS样式操作

    目录 字体和文字 设置标签的宽高 字体属性 文字的属性 文字对齐 text-align 文字装饰 text-decoration 首行缩进 text-indent 背景属性 背景图片 边框 画圆 di ...

  5. synchronized ReentrantLock 比较分析

    在编写多线程代码的时候,对于不允许并发的代码,很多需要加锁进行处理.在进行加锁处理时候,synchronized作为java的内置锁,同时也是java关键字,最为被人熟知,即使是最初级的java程序员 ...

  6. vue 自定义指令input表单的数据验证

    一.代码 <template> <div class="check" > <h3>{{msg}}</h3> <div clas ...

  7. memcache课程---2、php如何操作memcache

    memcache课程---2.php如何操作memcache 一.总结 一句话总结: windows下装好memcache.exe,装好memcache的php扩展之后,然后使用memcache函数库 ...

  8. python3快速安装

    linux环境快速安装python3   之前在linux上安装python3的时候,为了让不影响linux环境原有的python2的环境,选择的方法都是下载对应的linux环境的python包,不过 ...

  9. freemarker 嵌套循环 （导出word时，修改ftl模板）

    1.循环 (循环输出reportList列表的每行的姓名) <#list reportList as report> ${report.name} </$list> 2.嵌套循 ...

  10. WinForm中Dispose()和Close()的区别

    WinForm中Dispose()和Close()的区别 Close()会自动调用Dispose()方法,但是如果窗体是模态的,则不会调用 所以ShowDialog的时候,要用Dispose(),Sh ...