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. mysql 常用操作语句

    1 根据表中的其中一个字段的值来修改同行某字段的值 UPDATE  radar a INNER JOIN radar b ON a.id=b.id SET a.letter=LEFT(b.filena ...

  2. 《ArcGIS Runtime SDK for Android开发笔记》——（10）、ArcGIS Runtime SDK支持的空间数据类型

    1.前言 移动端的数据来源非常重要,它决定了移动端功能的实现.早期的ArcGIS Android API中,主要以接入在线的数据源为主,因此主要实现在线的地图浏览.查询和路径分析.地理处理等从操作:在 ...

  3. 仿照jQuery写一个关于选择器的框架(带了注释,请多多指教~)

    var select = (function () { //这是一个异常与捕获的代码,它表示的意思是:如果push方法出现了错误那么就需要重写push方法 try { //这边是自己模拟一个场景,来使 ...

  4. SqlServer存储过程示例

    /* 步骤1 删除本地及海关单证待分派表.报关单表中的数据 delete from W_DOCUMENTS; delete from W_DOCUMENTS_TEST; delete from W_D ...

  5. React学习笔记 - 组件&Props

    React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...

  6. HDU 4278 卡特兰，区间DP

    题意:每个人有一个DI值,现在有一个小黑屋,这些人的顺序可以利用这个小黑屋调整,调整方式是入栈出栈方式,也就是说,这里的方案是有卡特兰数个方式. 调整后使得 d1*0 + d2*1 + d3*2 + ...

  7. HDU 1757 A Simple Math Problem 【矩阵经典7 构造矩阵递推式】

    任意门:http://acm.hdu.edu.cn/showproblem.php?pid=1757 A Simple Math Problem Time Limit: 3000/1000 MS (J ...

  8. 2018.12.19 Struts2 框架总复习

    总结Struts2 框架 struts2技术的优势 项目开源,使用及拓展方便 提供Exception处理机制 Result方式的页面导航,通过Result标签很方便的实现重定向和页面跳转 通过简单.集 ...

  9. 【洛谷P3469】[POI2008]BLO-Blockade

    BLO-Blockade 题目链接 若一个点为割点:统计出每个子树的大小,两两相乘再相加, 再加上n-1,为这个点与其他点的拜访数, 因为拜访是互相的,最后再乘二即可 若一个点不是割点:只有(n-1) ...

  10. 使用两个嵌套的for循坏探测2-100的所有素数

    只能被1和本身整除的整数才叫做素数 public class prime { public static void main(String[] args) { ; i <= ; i++) { ; ...