http://my.oschina.net/xiahuawuyu/blog/81763

这两天学习了下，jquery mobile(以下简称jqm)的开发相关的内容。可能之前有过web的开发基础，相对于我来说学习这个东西感觉挺简单的，很容易上手。Jqm的的语法和jquery其实是一样的，有些不大一样的就是了。网上介绍的也是一大堆。这里我主要是做笔记哈。

使用JQM开发其实很简单，我这里目前是针对于在服务器端开发的，服务器使用的是apache+php，前端其实主要是html5+jquery的写法。

1、首先我们可以到官网去下载http://jquerymobile.com/blog/2012/09/21/jquery-mobile-1-2-0-release-candidate-2/#download   query mobile[/url]，然后下载完成后，我们可以看到如下的的目录结构

jqm的包里已经包含了demo和核心代码。jqm提供的demo很全面，直接学习它基本就够了。 既然下载好了，我们就可以进行开发了，概念的东西我就不多说了，直接上代码。

2、编写form表单页面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>表单</title>
    <!--加载jqm css样式-->
    <link rel="stylesheet"  href="css/jquery.mobile-1.2.0-rc.2.css" />
    <!--加载jquery-->
    <script src="js/jquery.js"></script>
    <!--加载jquery mobile-->
    <script src="js/jquery.mobile-1.2.0-rc.2.js"></script> 
    <script src="js/ajax.js"></script> 
</head> 
<body>
      
    <div data-role="page" data-fullscreen="true"><!--data-fullscreen 设置全屏-->
  
    <div data-role="header"   data-position="inline"><!--data-position="inline" 设置以流的方式显示-->
        <a href="index.html" data-icon="delete">Cacel</a> 
        <h1>表单demo</h1>
    </div><!-- /header -->
  
    <div data-role="content">   
        <form id="ajaxForm">
            <div data-role="fieldcontain">
                <label for="username">User Name:</label>
                <input type="text" name="username" id="username" data-mini="true"/>
              
                <h3 id="notification"></h3>
                <button data-theme="b" id="submit" type="submit">Submit</button>
            </div>
        </form> 
    </div><!-- /content -->
  
    <div data-role="footer"  data-position="fixed">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->
  
</body>
</html>

3、编写服务器端脚本form.php(这里我使用php)

1
2
3
4
<?php
    $username = $_POST['username'];
    echo "User Name：".$username;
?>

4、编写ajax脚本ajax.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(function() {
    $('#submit').bind('click', function() {
  
        var formData = $('#ajaxForm').serialize();
        //.serialize() 方法创建以标准 URL 编码表示的文本字符串
       
        $.ajax({
            type : "POST",
            url  : "form.php", 
            cache : false,
            data : formData,
            success : onSuccess,
            error : onError
        });
        return false;
    });
});
  
function onSuccess(data,status){
    data = $.trim(data); //去掉前后空格
    $('#notification').text(data);
}
  
function onError(data,status){
    //进行错误处理
}

4、创建android的工程，使用webview进行访问。

layout：

1
2
3
4
5
6
7
8
9
10
11
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
  
    <WebView
        android:id="@+id/webview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"  />
  
</RelativeLayout>

java代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
package com.xzw.html;
  
import android.app.Activity;
import android.app.ProgressDialog;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.util.Log;
import android.view.KeyEvent;
import android.view.View;
import android.view.Window;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
/**
 * 
 * @author xuzw13@gmail.com
 * weibo:http://weibo.com/xzw1989
 *
 */
public class MainActivity extends Activity {
      
    private static final String TAG = "MainActivity"; 
    private WebView webView;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
          
        webView = (WebView)findViewById(R.id.webview);
        webView.getSettings().setSupportZoom(true);
        webView.getSettings().supportMultipleWindows();
        webView.getSettings().setJavaScriptEnabled(true);
        webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
        webView.loadUrl("http://192.168.1.120/jquerymobile/index.html");
           
          
        webView.setWebChromeClient(new WebChromeClient(){
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                super.onProgressChanged(view, newProgress);
            }
        });
        webView.setWebViewClient(new MyWebViewClient());
          
          
    }
      
    private class MyWebViewClient extends WebViewClient{
        @Override
        public void onLoadResource(WebView view, String url) {
           
                Log.i(TAG, "onLoadResource:" + url);
           
            super.onLoadResource(view, url); 
        }
          
        @Override
        public void onReceivedError(WebView view, int errorCode,
                String description, String failingUrl) {
            Log.i(TAG, "onReceivedError:" + failingUrl+" \n errorcode="+errorCode);
            super.onReceivedError(view, errorCode, description, failingUrl);
        }
          
          @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
                Log.i(TAG, "shouldOverrideUrlLoading:" + url); 
            view.loadUrl(url);
            return true;
        }
            
          @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
                Log.i(TAG, "onPageStarted:" + url); 
        }
            
          @Override
        public void onPageFinished(WebView view, String url) {
              Log.i(TAG, "onPageFinished:" + url); 
              
        }
    };
      
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
         if((keyCode == KeyEvent.KEYCODE_BACK) && webView.canGoBack()){
             webView.goBack();
             return true;
         }
        return super.onKeyDown(keyCode, event);
          
    }
}
代码就是全部代码了。

代码就是全部代码了。 
     
    补充下：jquery mobile的官网都是E文的，E文不是很好的童鞋直接学习jquery mobile的开发可能有些概念的东西没有办法很清楚地理解，我在学习的过程中也遇到了这个问题。不过网上也有个中文版的，但是感觉没有E文版的感觉舒服，不过也很不错，大家学习的时候可以两个一起对照。      
    附上两个地址：

[url= http://jquerymobile.com/demos/1.1.1/ ] http://jquerymobile.com/demos/1.1.1/ [/url]

http://www.jqmapi.com/download.html

欢迎大家一起交流学习！请大家多多指教。

jquery mobile开发笔记之Ajax提交数据（转）的更多相关文章

  1. jquery ajax提交数据给后端

    大家好,今天铁柱兄给大家带一段jquery ajax提交数据给后端的教学. 初学javaweb的同学前端提交数据基本上都是用form表单提交,这玩意儿反正我是觉得不太好玩.而JavaScript aj ...

  2. (转)经典收藏 50个jQuery Mobile开发技巧集萃

    (原)http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 经典收藏 50个jQuery Mobile开发技巧集萃   ...

  3. 18个jQuery Mobile开发贴士和教程

    jQuery Mobile 是 jQuery 在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架.支持 ...

  4. 扩展auth_user字段、BBS需求分析、创建BBS数据库、注册页面搭建与用户头像展示及Ajax提交数据

    昨日内容回顾 csrf跨站请求 1. SQL注入 2. xss攻击 3. csrf跨站请求 4. 密码加密(加盐) '''django中默认有一个中间件来验证csrf''' # 只针对post请求才验 ...

  5. ThinkPHP中ajax提交数据

    最近在做项目时遇到了一些需要从页面用ajax提交数据到后台的操作,无奈本人技术有限,网上苦寻,研究了一下ajax和thinkPHP的结合,黄天不负苦心人,终于搞定了. 闲话少叙,进入正题:我需要从页面 ...

  6. ajax提交数据

    ajax提交数据 注意:获取值可以从方法参数传过来 也可以通过jquery获取对应标签的值:同时参数要与请求的动作方法的参数一致,否则值无法映射 发送 ajax (get 方式简写)请求      注 ...

  7. form表单提交数据，页面必定会刷新，ajax提交数据不会刷新，做到悄悄提交,多选删除，ajax提交实例

    很多页面用到的模态对话框,如知明网站https://dig.chouti.com/的登录页都是模态对话框, 当点登录时,是用的ajax提交,因为输入错了信息,有返回消息,而页面没有刷新. jquery ...

  8. 使用jquery.form.js的ajaxsubmit方法提交数据的Bug

    周五同事遇到一个很奇怪的问题,调到下班,虽然问题解决了,但是不知道问题的具体原因,回来翻了翻代码,才发现症结所在,下面就分享出来,供遇到同样问题的同行们参考: 先把问题描述一下,做的功能是使用ajax ...

  9. IOS开发笔记（4）数据离线缓存与读取

    IOS开发笔记(4)数据离线缓存与读取 分类: IOS学习2012-12-06 16:30 7082人阅读 评论(0) 收藏 举报 iosiOSIOS 方法一:一般将服务器第一次返回的数据保存在沙盒里 ...

随机推荐

  1. POJ 2481 Cows（树状数组）

                                                                      Cows Time Limit: 3000MS   Memory L ...

  2. Android Hotpatch系列之-项目介绍

    给现实Android apk打补丁,不用强迫客户升级客户端,悄悄的就把bug修复了,程序猿再也不用被老大骂娘了. 客户端例子实现:https://github.com/fengcunhan/Hotpa ...

  3. 基于MVC4+EasyUI的Web开发框架形成之旅--权限控制

    我在上一篇随笔<基于MVC4+EasyUI的Web开发框架形成之旅--框架总体界面介绍>中大概介绍了基于MVC的Web开发框架的权限控制总体思路.其中的权限控制就是分为“用户登录身份验证” ...

  4. SpringMVC学习系列（9） 之 实现注解式权限验证

    对大部分系统来说都需要权限管理来决定不同用户可以看到哪些内容,那么如何在Spring MVC中实现权限验证呢?当然我们可以继续使用servlet中的过滤器Filter来实现.但借助于Spring MV ...

  5. 学习SQL的点点滴滴（三）-修改数据库的兼容级别

    语法 ALTER DATABASE database_name SET COMPATIBILITY_LEVEL = { 80 | 90 | 100 } 参数 database_name 要修改的数据库 ...

  6. Windows下运行python脚本报错“ImportError： No Module named ...”的解决方法

    之前遇到一个问题,在Pycharm或IPython之类的IDE上运行脚本正常,但是直接运行或cmd命令行运行的时候报了模块未能找到的错误--ImportError: No Module named . ...

  7. NGUI之自适应屏幕

     转载: 雨松MOMO 2014年05月04日 于 雨松MOMO程序研究院 发表 ,原文链接   现在用unity做项目 90%都是用NGUI,并且我个人觉得NGUI应该算是比较成熟的UI插件,虽然他 ...

  8. mac配置impala odbc

    下载mac对应驱动并安装:http://www.cloudera.com/downloads.html.html *HOST 地址是impala Daemon所在的机器ip,端口可以在cm中设置 vi ...

  9. 二模02day1解题报告

    T1.淘汰赛制 比赛时的淘汰赛制,给出每两个球队比赛的胜率,求出最终胜率最高的队伍. 这题的概率真的很难算啊感觉...一开始打的代码打下来就是用f[i][j]表示i场比赛后第j人还在场的概率.不难看出 ...

  10. Android--Toast(吐司)的基本使用

    1.学习Android开发,不能从单方面的知识去考虑问题,要从全面出发. 2.Toast(吐司) 1.打开eclipse 选择文件存放的位置 点击Dbms,测试是否连接成功(海马模拟器或者夜神模拟器) ...