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,如需转载请自行联系原作者

相关文章
N..
|
5月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
56 1
|
5月前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
57 0
|
5月前
|
JSON 前端开发 JavaScript
AJAX 课程学习笔记三
AJAX 课程学习笔记三
|
4月前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
48 1
|
4月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
39 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
|
2月前
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
28 0
|
2月前
|
JavaScript 前端开发
Ajax的使用(jquery的下载)
这篇文章是关于Ajax学习笔记的分享,包括JQuery的下载方式、Ajax的主要参数说明,以及如何在网页中使用Ajax进行异步请求的示例代码。
|
4月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
4月前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
77 2
|
5月前
|
前端开发 JavaScript PHP
【PHP开发专栏】jQuery与PHP实现Ajax通信
【4月更文挑战第30天】本文介绍了使用jQuery和PHP实现Ajax通信的步骤。首先,讲解了Ajax的基础和jQuery简化Ajax操作的概念。接着,展示了如何使用jQuery的`$.get()`、`$.post()`和`$.ajax()`方法发送GET和POST请求,以及如何控制请求细节。在PHP端,讨论了接收和响应Ajax请求的方法,包括处理数据、设置响应类型和错误处理。结合jQuery与PHP,开发者能实现高效、无缝的异步数据传输,提升Web应用的用户体验。
104 1