<?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. iOS逆向系列-Reveal

    概述 Reveal是一款调试iOS程序UI界面的神器. 官网地址:https://revealall.com 下载:https://revealapp.com/download/ 建议下载Reveal ...

  2. iOS开发系列-文件下载

    小文件下载 NSURLConnection下载小文件 #import "ViewController.h" @interface ViewController ()<NSUR ...

  3. [NOIP2019模拟赛]夹缝

    夹缝 问题描述: 二维空间内有两面相对放置的,向无限远延伸的镜子,以镜子的方向及其法向量建立坐标系,我们选定一个法向量方向下面称“上”.在镜子上的整数位置,存在着一些传感器,传感器不影响光线的反射,光 ...

  4. Python+Selenium基础入门及实践

    Python+Selenium基础入门及实践 32018.08.29 11:21:52字数 3220阅读 23422 一.Selenium+Python环境搭建及配置 1.1 selenium 介绍 ...

  5. nginx压力测试webbench

    下载压力测试工具webbench wget http://home.tiscali.cz/~cz210552/distfiles/webbench-1.5.tar.gz 安装依赖包 yum -y in ...

  6. AutoIt自动化编程(2)【转】

    注意:窗口标题和窗口文本参数总是对大小写敏感的. 1.等待窗口系列命令/函数 AHK和AU3都提供了用法类似的一组窗口等待命令/函数:WinWait/WinWaitActive/WinWaitClos ...

  7. python 递归计算若干工作日后的日期

    import datetime # 根据第一次计算出来的休息日数,计算还需要的工作日数.(递归调用) def get_next_date(self, start_date, weekend_days) ...

  8. 「BZOJ2300」[HAOI2011] 防线修建

    传送门 操作离线之后倒着做,只有加点操作. 用set动态维护凸包即可. //Achen #include<algorithm> #include<iostream> #incl ...

  9. 2019/10/24 CSP-S 模拟

    T1 tom 题意: 考虑一定是属于\(a\)的在一坨,属于\(b\)的在一坨,找到这条连接\(a\)和\(b\)的边,然后分别直接按\(dfs\)序染色即可 注意属于\(a\)的连通块或属于\(b\ ...

  10. 使用async读取异步数据

    使用传统方式读取异步数据 const fs = require('fs') fs.readFile('readme.txt', function (err, data) { console.log(d ...