开发者社区> 科技小先锋> 正文

jquery mobile开发笔记之Ajax提交数据

简介:
+关注继续查看

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

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

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

    

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

 

2、编写form表单页面。

 


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

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

 


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

4、编写ajax脚本ajax.js


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

 

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

layout:


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

java代码:

 


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

代码就是全部代码了。

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

     

 本文转自xuzw13 51CTO博客,原文链接:http://blog.51cto.com/xuzhiwei/1009683,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【java开发系列】—— spring简单入门示例
原文:【java开发系列】—— spring简单入门示例 回顾   1 JDK安装   2 Struts2简单入门示例 前言   作为入门级的记录帖,没有过多的技术含量,简单的搭建配置框架而已。
687 0
将数据从服务器端同步到手机上, 并且需要离线工作,Couchebase Mobile 也许是目前最好的解决方案:
将数据从服务器端同步到手机上, 并且需要离线工作,Couchebase Mobile 也许是目前最好的解决方案: 原文地址: https://www.infinum.co/the-capsized-eight/articles/server-client-syncing-for-mobile-a...
1475 0
将jQuery Pagination分页插件用于不使用AJAX加载数据的页面
将jQuery Pagination分页插件用于不使用AJAX加载数据的页面,项目使用SpringMVC,使用Freemarker绑定数据,但分页显示样式不想自己处理,所以使用jQuery Pagination分页插件。
775 0
6965
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载