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. CDH自己安装方式Hbase master备份方式

    hbase-daemon.sh start master 启动改命令会默认产生Hmaster 进程,等待主机宕机,zookeepr 监控

  2. UVa 156 （映射 map）

    https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  3. Fragment使用findFragmentById返回null

    @Override public void onClick(View v) { switch (v.getId()){ case R.id.btn1: replaceFragment(new Anot ...

  4. mysql的source命令

    第一次使用 source导入 sql 文件时,死活提示不成功,偶然发现在输入文件所在路径是,必须用 "/"斜杠,而不能是反斜框 "\".

  5. Spring使用环境变量控制配置文件加载

    项目中需要用到很多配置文件,不同环境的配置文件是不一样的,因此如果只用一个配置文件,势必会造成配置文件混乱,这里提供一种利用环境变量控制配置文件加载的方法,如下: 一.配置环境变量 如果是window ...

  6. Java的委托

    http://www.cnblogs.com/soojoe/archive/2012/04/12/2532304.html 委托模式是软件设计模式中的一项基本技巧.在委托模式中,有两个对象参与处理同一 ...

  7. SQL SERVER：使用工具观察与分析数据库中锁信息

    SQL SERVER 2005可以通过Microsoft SQL Server Management Studio的“管理–>活动监视器”–>“右键”–>“进程信息”,这里呈现连接. ...

  8. [zz] 混合高斯模型 Gaussian Mixture Model

    聚类(1)——混合高斯模型 Gaussian Mixture Model http://blog.csdn.net/jwh_bupt/article/details/7663885 聚类系列: 聚类( ...

  9. [补充工程统计case]科技活动经费sql2014

    select bd_glorgbook.glorgbookcode,bd_glorgbook.glorgbookname, gl_detail.explanation, bd_accsubj.disp ...

  10. Tomcat - SSL操作大全

    简介 制作CSR申请文件 安装证书文件 客户证书认证 证书的备份(导出) 证书的恢复(导入)   简介 Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,目前最新版本是6.0.20(截止 ...