首页 文章 精选 留言 我的

精选列表

搜索[至信链金融数据存证],共10000篇文章
优秀的个人博客,低调大师

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

资源下载

更多资源
腾讯云软件源

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题,腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构,目前腾讯云软件源站支持公网访问和内网访问。

Rocky Linux

Rocky Linux

Rocky Linux(中文名:洛基)是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版,作为CentOS稳定版停止维护后与RHEL(Red Hat Enterprise Linux)完全兼容的开源替代方案,由社区拥有并管理,支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性,采用模块化包装和SELinux安全架构,默认包含GNOME桌面环境及XFS文件系统,支持十年生命周期更新。

Sublime Text

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等。Sublime Text 是一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。

WebStorm

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。

用户登录
用户注册