index.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <title></title>

    <script src="js/mui.min.js"></script>

    <link href="css/mui.min.css" rel="stylesheet"/>

    <script type="text/javascript" charset="utf-8">

          mui.init();

          function postdata(){

              document.getElementById("result").value = "ajax请求发送中……";

              var input_name = document.getElementById("namevalue").value;

//          alert(input_name);

              mui.ajax({

                          url : 'http://127.0.0.1:8080/_ajax/ServerJson.php',

                          type : 'post',

                          headers: {

                            'Content-Type': 'application/json'

                        },

                          data : { name : input_name },

                          timeout : 10000,

                          success : function(data){

//                              console.log(data);

                              var result = eval('('+ data +')');    //js原生方法解析json字符串为json对象

                              document.getElementById("result").value = result.name;

                          },

                          error : function(xhr,type,errorThrown){

                              console.log(xhr);

                              console.log(type);

                              console.log(errorThrown);

                          }

            });

          }

    </script>

</head>

<body>

    输入：<input type="text" id="namevalue"></input>

    <button id="btn" onclick="postdata()">发送ajax请求</button>

    <br /><br />

    结果：<input type="text" id="result" value="结果"></input>

</body>

</html>

phpjson.php

<?php

    if($_SERVER["CONTENT_TYPE"]=="application/json"){

        $input = file_get_contents('php://input');

        $name = $input;

        echo $name;

    }else{

        echo "Post Data Error";

    }

?>

HTML5+ MUI实现ajax的一个demo的更多相关文章

  1. 利用HTML5与jQuery技术创建一个简单的自动表单完成

    来源:GBin1.com 在线演示   在线下载 谷歌快速搜索自带大量自动完成插件——库中甚至还有一个附带的jQuery UI共享选项.然而今天我要寻找一个替代的解决方案.由DevBridge开发的j ...

  2. jqm视频播放器,html5视频播放器,html5音乐播放器,html5媒体播放器,video开展demo,html5视频播放演示示例,html5移动视频播放器

    最近看到很多有用的论坛html5视频播放的发展,音乐播放功能,大多数都在寻找答案.所以,我在这里做一个demo.对于大家互相学习.html5开发越来越流行,至于这也是一个不可缺少的一部分的视频. 如何 ...

  3. Jsonp实现Ajax跨域Demo

    JSONP 1.一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面.动态网页.web服务.WCF,只要是跨域请求,一律不准: 2.不过我们又发现,Web页面上调用j ...

  4. 原生ajax瀑布流demo

    最近听朋友们说起瀑布流挺多的,自己就去研究下了,一个简单的原生demo,分享给大家... 简单分为三个文档,有详细的注释:img:ajax.php:demo.php 其中img文件夹中放入图片 1.j ...

  5. js canvas压缩图片和jQuery ajax上传图片简单demo

    原来用的插件,里面东西太乱了,一会jq,一会原生js,本来原生js就不熟,看起来更难受,而且感觉好多东西都是没用的,而且后端php转存文件一直不是很熟悉,正好一起整理一下.就是很简单的一个demo,如 ...

  6. angular开发者吐槽react+redux的复杂：“一个demo证明你的开发效率低下”

    曾经看到一篇文章,写的是jquery开发者吐槽angular的复杂.作为一个angular开发者,我来吐槽一下react+redux的复杂. 例子 为了让大家看得舒服,我用最简单的一个demo来展示r ...

  7. 初识nginx之第一个demo

    商城项目做了一个多月了,想到必须用到负载均衡,简单了解了一下nginx,首先分享第一个demo,五月份上线后,会继续分享一系列相关知识. 在nginx根目录下,用了一个园友的批处理文件nginx.ba ...

  8. springMvc的第一个demo

    1.下载jar包 http://repo.spring.io/libs-release-local/org/springframework/spring/4.2.3.RELEASE/ 2.下载源码 j ...

  9. Android 通知栏Notification的整合 全面学习 （一个DEMO让你完全了解它）

    在android的应用层中,涉及到很多应用框架,例如:Service框架,Activity管理机制,Broadcast机制,对话框框架,标题栏框架,状态栏框架,通知机制,ActionBar框架等等. ...

随机推荐

  1. dwr2.0版本的demo

        谈起DWR,这个东西在上学的时候接触过,但工作之后就再也没有用过.       对DWR的印象是不手写AJAX,使用JavaScript调用java后台的代码,就如同调用前台代码一样.     ...

  2. Android学习——SharedPreferences

    接下来的几个博文,来介绍安卓中的数据存储方式,安卓中的数据存储主要有四种方式: 1.SharedPreferences 2.SQLite 3.Content Provider 4.File 这篇博文主 ...

  3. Jquery的部分插件

    jQuery Easing:jQuery 动画效果扩展 jQuery Migrate:jQuery 应用迁移辅助插件Modernizr:专为HTML5和CSS3开发的功能检测类库jQuery Flex ...

  4. 《浪潮之巅》(第2版)：精彩的IT商战史

    2011年看过第一版.以为看新版会跳过大部分看过的内容,结果发现还是从头到尾看了一遍,2011年看过的内容已经记不太确切了:) 另外IT的历史太精彩了,许多故事都知道,再看还是挺有意思.当然作者的文字 ...

  5. 牛客网数据库SQL实战1-查找最晚入职员工的所有信息

    题目描述 查找最晚入职员工的所有信息CREATE TABLE `employees` (`emp_no` int(11) NOT NULL,`birth_date` date NOT NULL,`fi ...

  6. NO.011-2018.02.16《三五七言 / 秋风词》唐代：李白

    三五七言 / 秋风词_古诗文网 三五七言 / 秋风词 唐代:李白 秋风清,秋月明,秋风凌清,秋月明朗. 落叶聚还散,寒鸦栖复惊.风中的落叶时聚时散,寒鸦本已栖息,又被明月惊起.落叶聚还(huán)散: ...

  7. Coreseek:常见问题2

    1.failed to lock XXXXX.spl文件 这是你建索引的时候会出现的问题,是你没有把打开的的searchd服务给关闭.由于你打开searchd服务时.他会建立一个叫xxx.spl的暂时 ...

  8. Python：dict字典

    #字典dict------->唯一的映射类型 1.数据类型的划分 数据类型划分为可变数据类型和不可变数据类型. 不可变数据类型:tupe(元组).bool.int.str           可 ...

  9. bpexpdate – 更改映像目录库中备份的截止日期以及介质目录库中介质的截止日期nbu

    1.根据bpdbjobs查找backupidbpdbjobs -jobid xxx -all_columns|grep backupid 2.查看数据保留时间[root@backup]# bpimag ...

  10. About me and this site(2018/8/28)

    Name: 李秋豪 / [lǐ qiū háo] I'm a junior majoring in InfoSec at Harbin Institute of Technology. I'm int ...