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. 程序跳转到访问一个确定的地址0x100000

    用函数指针 把这个确定的地址转化成一个函数指针 这就明白了程序中调用函数的意义 测试代码如下: #include <stdio.h> void getMemory() { printf(& ...

  2. [转]win7下apache2.4响应很慢解决方法

    win7下apache2.4响应很慢解决方法 PS.按照以下方法测试了以下,似乎确实快了一点[skysowe] 转载自: http://blog.sina.com.cn/s/blog_75ad1010 ...

  3. 【python】类中__slots__使用

    __slots__作用:限制类的属性,只给实例绑定任何属性和方法 如果我们想要限制class的属性怎么办?比如,只允许对Student实例添加name和age属性. 为了达到限制的目的,Python允 ...

  4. filter and listener

    Java Servlet 是运行在 Web 服务器或应用服务器上的程序,它是作为来自 Web 浏览器或其他 HTTP 客户端的请求和 HTTP 服务器上的数据库或应用程序之间的中间层. 使用 Serv ...

  5. 【MySQL】结构行长度的一些限制

    今天被开发提交的DDL变更再次困惑,表中字段较多,希望将已有的两个varchar(4000)字段改为varchar(20000),我想innodb对varchar的存储不就是取前768字节记录当前行空 ...

  6. Cannot find executable for CFBundle 解决办法

    出错日志为:2013-12-29 01:17:49.785 Displaying Alerts with UIAlertView[419:70b] Cannot find executable for ...

  7. 【转】关于Block Formatting Context－－BFC和IE的hasLayout

    转自穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为“块级格式化范围”. 是 W3C CSS ...

  8. Android学习笔记（五）

    Intent不仅用来启动一个活动,Intent还可以在启动活动的时候传递参数. 1.向下一个活动传递数据 启动活动的时候传递数据,Intent提供了一系列putExtra()方法的重载,可以把要传递的 ...

  9. SVN服务器详细权限控制

    版权声明:本文为博主原创文章,未经博主允许不得转载. 下面是我配置SVN服务器的过程,现在把我所配置的方法,记录下来,以供其他有需要的朋友参考,需要改进的地方,请指教! 一 环境 操作系统:windo ...

  10. 保持const和non-const函数代码的一致

    在用C++进行面向对象编程的时候,有时需要在一个类里包含两个代码相似的函数,而它们之间的唯一区别是,一个为const类型,一个是non-const类型. 此时如果将相同的代码写在两个函数中,则严重违反 ...