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. Infor SyteLine创建一个数据维护窗口

    上次有在SyteLine解决一个问题<匹配与显示中文说明> http://www.cnblogs.com/insus/p/3396541.html .这些数据需要数据库管理员在数据库才能维 ...

  2. App更新(Android)

     App更新(Android) 前言:现在一般的Android软件都是需要不断更新的,当你打开某个app的时候,如果有新的版本,它会提示你有新版本需要更新.该项目实现的就是这个功能.并且有强制更新和更 ...

  3. python进程与线程介绍

    很多同学都听说过,现代操作系统比如Mac OS X,UNIX,Linux,Windows等,都是支持“多任务”的操作系统. 什么叫“多任务”呢?简单地说,就是操作系统可以同时运行多个任务.打个比方,你 ...

  4. spring---FactoryBean与BeanFactory的区别

    1.BeanFactory BeanFactory是IOC最基本的容器,负责生产和管理bean,它为其他具体的IOC容器提供了最基本的规范,例如DefaultListableBeanFactory, ...

  5. nagios外部命令接口

    http://nagios.manubulon.com/traduction/docs14en/extcommands.html https://old.nagios.org/developerinf ...

  6. GridView——标题行自适应单元格列宽与选中单元格变色

    首先看效果图: 主要实现—— 1.前台GridView代码: <asp:GridView Height="100%" Width="98%" ID=&qu ...

  7. mysql导入大量数据时报MySQL server has gone away错误的解决办法

    https://blog.csdn.net/eric520zenobia/article/details/77619469

  8. HttpClient拉取连载小说

    上午刚入手的小说,下午心血来潮想从网站上拉取下来做成电子书,呵呵,瞎折腾-说做就做- [抓包] 这一步比什么都重要,如果找不到获取真正资源的那个请求,就什么都不用做了- 先是打算用迅雷把所有页面都下载 ...

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

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

  10. arcgis for javascript ArcGISDynamicMapServiceLayer 过滤图层点

    记录下过滤 ArcGISDynamicMapServiceLayer 图层服务的方法 function filterArcGISDynamicMapServiceLayer(){ map.graphi ...