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. CF 628B New Skateboard --- 水题

    CD 628B 题目大意:给定一个数字(<=3*10^5),判断其能被4整除的连续子串有多少个 解题思路:注意一个整除4的性质: 若bc能被4整除,则a1a2a3a4...anbc也一定能被4整 ...

  2. kuangbin_SegTree E (HDU 1698)

    POJ服务器炸了 还没好呢 然后就只能跳掉一些题目了 这题也是成段更新模板题 本来lazy标记不是很明白 后来学长上课讲了一下就知道原理了 回去看看代码很容易就理解了 #include <cst ...

  3. JavaScript tasks, microtasks, queues and schedules

    最近做的项目中,涉及到了JavaScript中Promise的用法,于是做了一点测试,发现没有想象中的那么简单,水很深,所以找来N先生(我的Mentor),想得到专业的指导.N先生也不尽知,但N先生查 ...

  4. 使用Python玩转WMI

    最近在网上搜索Python和WMI相关资料时,发现大部分文章都千篇一律,并且基本上只说了很基础的使用,并未深入说明如何使用WMI.本文打算更进一步,让我们使用Python玩转WMI. 1 什么是WMI ...

  5. Python - 异步IO\数据库\队列\缓存

    协程 协程,又称微线程,纤程.英文名Coroutine.一句话说明什么是线程:协程是一种用户态的轻量级线程,协程一定是在单线程运行的. 协程拥有自己的寄存器上下文和栈.协程调度切换时,将寄存器上下文和 ...

  6. jQuery：获取浏览器中的分辨率

    JQuery: <script type="text/javascript"> $(document).ready(function(){ alert($(window ...

  7. c#调用C++DLL参数对应

    //c++:Byte(unsigned   char)     ----    c#:System.Byte         //c++:SHORT(short)              ----  ...

  8. Mysql 存储过程+定时任务，完成分区自动维护

    建表: drop table if exists terminal_parameter; CREATE TABLE `terminal_parameter` ( `terminal_parameter ...

  9. python标准库xml.etree.ElementTree的bug

    使用python生成或者解析xml的方法用的最多的可能就数python标准库xml.etree.ElementTree和lxml了,在某些环境下使用xml.etree.ElementTree更方便一些 ...

  10. JAVA 几种引用类型学习

    1.对象的强.软.弱和虚引用    在JDK 1.2以前的版本中,若一个对象不被任何变量引用,那么程序就无法再使用这个对象.也就是说,只有对象处于可触及(reachable)状态,程序才能使用它.从J ...