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

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

1、首先我们可以到官网去下载jquery mobile，然后下载完成后，我们可以看到如下的的目录结构。

    

jquery mobile开发笔记之Ajax提交数据_第1张图片

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

 

2、编写form表单页面。

 

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

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

 

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

4、编写ajax脚本ajax.js

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

 

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

layout：

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

java代码：

 

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

代码就是全部代码了。

     今天就写到这里，继续干活了。欢迎大家一起交流学习。