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. .NET开源工作流RoadFlow-表单设计-文本域

    点击工具栏上的 文本域 按钮可弹出文本域属性设置: 绑定字段:与数据表的某个字段绑定. 默认值:文本域初始值. 最大字符数:文本域可输入的最大字符数. 宽度:文本域的宽度,如:200px,80%. 高 ...

  2. 【Linux】Linux入门及常见基本操作命令详解

    本文基于 Red Hat Enterprise Linux 6 一.Linux 入门体验 1.1 root用户登陆 1.2 图形化与纯字符模式切换 init 5 - 图形模式 init 3 - 纯字符 ...

  3. html 表格单元格的宽度和高度的设置

    做网页的时候,经常会碰到表格宽度对不齐的问题.详细地看了html中表格标签table的高度和宽度设置的细节,现总结如下: 1.table中的width和height设置及其作用:table中设置的he ...

  4. 微软技术大会直播倒计时7天 | 地球上的IT咖们，正在慢慢向北京聚集

    去年,一句歌词火了:“我在北方的寒夜里,四季如春.”足以见得,北京的冬天,是可以把人冻蒙圈儿的. 然而有一群人,却正在慢慢靠近这样寒冷的北京,7 天后,他们将齐聚在北京. 他们来这里干什么?又是来见谁 ...

  5. day014-反射、注解

    1. Junit 1.1什么是Junit Junit是Java语言编写的第三方单元测试框架(工具). 1.2单元测试 在Java中,一个类就是一个单元. 单元测试:开发中编写的一小段代码,用来检测类中 ...

  6. #单元测试#以karma+mocha+chai 为测试框架的Vue webpack项目（二）

    学习对vue组件进行单元测试,先参照官网编写组件和测试脚本. 1.简单的组件 组件无依赖,无props 对于无需导入任何依赖,也没有props的,直接编写测试案例即可. /src/testSrc/si ...

  7. mysql便于管理的几个shell脚本

    [mysql@clark scripts]$ lsmysql_db_shutdown.sh  mysql_db_startup.sh  mysql_env.ini  mysqlplus.sh[mysq ...

  8. submit text3 常用快捷键

    Ctrl+D : 选择单词,重复可增加选择下一个相同的单词 Ctrl+F : 查找内容 Ctrl+G : 跳转到指定行 Ctrl+H : 替换 Ctrl+J : 合并行(已选择需要合并的多行时) Ct ...

  9. Orchard Core 文档翻译 （六）HTML

    Body (OrchardCore.Html) Theming Shapes 将HtmlBodyPart附加到内容类型时,将呈现以下形状(Shapes) Name Display Type Defau ...

  10. js原型链继承及调用父类方法

    方法1: var Parent= function () { }; Parent.prototype.process = function(){ alert('parent method'); }; ...