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. phonegap2.0+在xcode4.5上的搭建

    首先网上很多文章都是phonegap1.X的,可是自2.0后就没有相关的安装文件了,只有官网上写了怎么装 不过官网有时候打不开,可能是首页出了问题 但http://docs.phonegap.com这 ...

  2. 禁止IOS双击上滑

    var agent = navigator.userAgent.toLowerCase(); var iLastTouch = null; if (agent.indexOf("iphone ...

  3. wxpython 简单表格控件

    import wx, wx.grid class GridData(wx.grid.PyGridTableBase): _cols = "a b c".split() _data ...

  4. 2018年哔哩哔哩bilibili前端开发工程师在线笔试1

    ##基础编程能力考查(共1题) 给定一个数组,其中有n(1<n<10000)个整数,检查是否能通过修改不多余一个元素就能让数组从小到大排列. 例1: 输入:[4,2,3] 输出:true ...

  5. 亲测可用：SecureCRT 7 注册码/序列号

    Name: ygeR Company:TEAM ZWT SerialNumber:03-77-119256 License Key: ABH2MJ 9YVAC5 Z17QF7 4ZAS7Z ABGYJ ...

  6. Siebel 基础入门--权限控制

    企业应用最基本的要求就是只授予用户在他工作职责范围内的权限,一般而言,这种权限都包含两种,一种是对于相应的功能的可见性(或者形象地说,菜单的可见 性,这个是应用层面界面的,这种权限在Siebel里称为 ...

  7. Spring Boot学习路线

    Spring Boot 学习路线,本文计划根据作者近几年的工作.学习经验,来分析和制定一个学习使用 Spring Boot技术的步骤路线图. SpringBoot是伴随着Spring4.0诞生的: S ...

  8. 开源重磅，java内容管理系统CMS，点击就可以编辑，保存，轻松构建自己的站点

    买的暂时空间不给力.内存不足,老给关闭,先转到京东云上了,免费的,也不知免费多久. 这是地址2  http://java4cms.jd-app.com/index.html 这是地址  http:// ...

  9. BZOJ3874:[AHOI2014&JSOI2014]宅男计划(爬山法)

    Description  [故事背景] 自从迷上了拼图,JYY就变成了个彻底的宅男.为了解决温饱问题,JYY 不得不依靠叫外卖来维持生计. [问题描述] 外卖店一共有N种食物,分别有1到N编号.第i种 ...

  10. POJ 2342 树的最大独立集

    题意:在树的最大独立集的基础上,加上权值.求最大. 分析: 采用刷表的方式写记忆化,考虑一个点选和不选,返回方式pair 型. 首先,无根树转有根树,dp(root). 注意的是:u不选,那么他的子节 ...