jquery mobile开发笔记之Ajax提交数据
这两天学习了下，jquery mobile(以下简称jqm)的开发相关的内容。可能之前有过web的开发基础，相对于我来说学习这个东西感觉挺简单的，很容易上手。Jqm的的语法和jquery其实是一样的，有些不大一样的就是了。网上介绍的也是一大堆。这里我主要是做笔记哈。 使用JQM开发其实很简单，我这里目前是针对于在服务器端开发的，服务器使用的是apache+php，前端其实主要是html5+jquery的写法。 1、首先我们可以到官网去下载jquery mobile，然后下载完成后，我们可以看到如下的的目录结构。 jqm的包里已经包含了demo和核心代码。jqm提供的demo很全面，直接学习它基本就够了。既然下载好了，我们就可以进行开发了，概念的东西我就不多说了，直接上代码。 2、编写form表单页面。 <!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"/> <metaname="viewport"content="width=device-width,initial-scale=1"> <title>表单</title> <!--加载jqmcss样式--> <linkrel="stylesheet"href="css/jquery.mobile-1.2.0-rc.2.css"/> <!--加载jquery--> <scriptsrc="js/jquery.js"></script> <!--加载jquerymobile--> <scriptsrc="js/jquery.mobile-1.2.0-rc.2.js"></script> <scriptsrc="js/ajax.js"></script> </head> <body> <divdata-role="page"data-fullscreen="true"><!--data-fullscreen设置全屏--> <divdata-role="header"data-position="inline"><!--data-position="inline"设置以流的方式显示--> <ahref="index.html"data-icon="delete">Cacel</a> <h1>表单demo</h1> </div><!--/header--> <divdata-role="content"> <formid="ajaxForm"> <divdata-role="fieldcontain"> <labelfor="username">UserName:</label> <inputtype="text"name="username"id="username"data-mini="true"/> <h3id="notification"></h3> <buttondata-theme="b"id="submit"type="submit">Submit</button> </div> </form> </div><!--/content--> <divdata-role="footer"data-position="fixed"> <h4>PageFooter</h4> </div><!--/footer--> </div><!--/page--> </body> </html> 3、编写服务器端脚本form.php(这里我使用php) <?php $username=$_POST['username']; echo"UserName：".$username; ?> 4、编写ajax脚本ajax.js $(function(){ $('#submit').bind('click',function(){ varformData=$('#ajaxForm').serialize(); //.serialize()方法创建以标准URL编码表示的文本字符串 $.ajax({ type:"POST", url:"form.php", cache:false, data:formData, success:onSuccess, error:onError }); returnfalse; }); }); functiononSuccess(data,status){ data=$.trim(data);//去掉前后空格 $('#notification').text(data); } functiononError(data,status){ //进行错误处理 } 4、创建android的工程，使用webview进行访问。 layout： <RelativeLayoutxmlns: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代码： packagecom.xzw.html; importandroid.app.Activity; importandroid.app.ProgressDialog; importandroid.graphics.Bitmap; importandroid.os.Bundle; importandroid.util.Log; importandroid.view.KeyEvent; importandroid.view.View; importandroid.view.Window; importandroid.webkit.WebChromeClient; importandroid.webkit.WebView; importandroid.webkit.WebViewClient; /** * *@authorxuzw13@gmail.com *weibo:http://weibo.com/xzw1989 * */ publicclassMainActivityextendsActivity{ privatestaticfinalStringTAG="MainActivity"; privateWebViewwebView; @Override publicvoidonCreate(BundlesavedInstanceState){ 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(newWebChromeClient(){ @Override publicvoidonProgressChanged(WebViewview,intnewProgress){ super.onProgressChanged(view,newProgress); } }); webView.setWebViewClient(newMyWebViewClient()); } privateclassMyWebViewClientextendsWebViewClient{ @Override publicvoidonLoadResource(WebViewview,Stringurl){ Log.i(TAG,"onLoadResource:"+url); super.onLoadResource(view,url); } @Override publicvoidonReceivedError(WebViewview,interrorCode, Stringdescription,StringfailingUrl){ Log.i(TAG,"onReceivedError:"+failingUrl+"\nerrorcode="+errorCode); super.onReceivedError(view,errorCode,description,failingUrl); } @Override publicbooleanshouldOverrideUrlLoading(WebViewview,Stringurl){ Log.i(TAG,"shouldOverrideUrlLoading:"+url); view.loadUrl(url); returntrue; } @Override publicvoidonPageStarted(WebViewview,Stringurl,Bitmapfavicon){ Log.i(TAG,"onPageStarted:"+url); } @Override publicvoidonPageFinished(WebViewview,Stringurl){ Log.i(TAG,"onPageFinished:"+url); } }; @Override publicbooleanonKeyDown(intkeyCode,KeyEventevent){ if((keyCode==KeyEvent.KEYCODE_BACK)&&webView.canGoBack()){ webView.goBack(); returntrue; } returnsuper.onKeyDown(keyCode,event); } } 代码就是全部代码了。 今天就写到这里，继续干活了。欢迎大家一起交流学习。 本文转自xuzw13 51CTO博客，原文链接：http://blog.51cto.com/xuzhiwei/1009683，如需转载请自行联系原作者
