生活随笔
收集整理的這篇文章主要介紹了
jquery mobile开发笔记之Ajax提交数据
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
? ? ?這兩天學習了下，jquery mobile(以下簡稱jqm)的開發相關的內容。可能之前有過web的開發基礎，相對于我來說學習這個東西感覺挺簡單的，很容易上手。Jqm的的語法和jquery其實是一樣的，有些不大一樣的就是了。網上介紹的也是一大堆。這里我主要是做筆記哈。
? ? 使用JQM開發其實很簡單，我這里目前是針對于在服務器端開發的，服務器使用的是apache+php，前端其實主要是html5+jquery的寫法。
1、首先我們可以到官網去下載jquery mobile，然后下載完成后，我們可以看到如下的的目錄結構。
? ??
? ?jqm的包里已經包含了demo和核心代碼。jqm提供的demo很全面，直接學習它基本就夠了。?既然下載好了，我們就可以進行開發了，概念的東西我就不多說了，直接上代碼。
?
2、編寫form表單頁面。
?
<!DOCTYPE?html>?<html>?<head>?????<meta?charset="UTF-8"?/>?????<meta?name="viewport"?content="width=device-width,?initial-scale=1">?????<title>表單</title>??????????<link?rel="stylesheet"??href="css/jquery.mobile-1.2.0-rc.2.css"?/>??????????<script?src="js/jquery.js"></script>??????????<script?src="js/jquery.mobile-1.2.0-rc.2.js"></script>??????<script?src="js/ajax.js"></script>??</head>??<body>??????????<div?data-role="page"?data-fullscreen="true">??????<div?data-role="header"???data-position="inline">?????????<a?href="index.html"?data-icon="delete">Cacel</a>??????????<h1>表單demo</h1>?????</div>??????<div?data-role="content">????????????<form?id="ajaxForm">?????????????<div?data-role="fieldcontain">?????????????????<label?for="username">User?Name:</label>?????????????????<input?type="text"?name="username"?id="username"?data-mini="true"/>??????????????????????????????<h3?id="notification"></h3>?????????????????<button?data-theme="b"?id="submit"?type="submit">Submit</button>?????????????</div>?????????</form>??????</div>??????<div?data-role="footer"??data-position="fixed">?????????<h4>Page?Footer</h4>?????</div>?</div>??</body>?</html>? 3、編寫服務器端腳本form.php(這里我使用php)
?
<?php?????$username?=?$_POST['username'];?????echo?"User?Name：".$username;??>? 4、編寫ajax腳本ajax.js
$(function()?{?????$('#submit').bind('click',?function()?{??????????var?formData?=?$('#ajaxForm').serialize();????????????????????????$.ajax({?????????????type?:?"POST",?????????????url??:?"form.php",??????????????cache?:?false,?????????????data?:?formData,?????????????success?:?onSuccess,?????????????error?:?onError?????????});?????????return?false;?????});?});??function?onSuccess(data,status){?????data?=?$.trim(data);??????$('#notification').text(data);?}??function?onError(data,status){??????}? ?
4、創建android的工程，使用webview進行訪問。
layout：
<RelativeLayout?xmlns: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代碼：
?
package?com.xzw.html;??import?android.app.Activity;?import?android.app.ProgressDialog;?import?android.graphics.Bitmap;?import?android.os.Bundle;?import?android.util.Log;?import?android.view.KeyEvent;?import?android.view.View;?import?android.view.Window;?import?android.webkit.WebChromeClient;?import?android.webkit.WebView;?import?android.webkit.WebViewClient;???????public?class?MainActivity?extends?Activity?{??????????private?static?final?String?TAG?=?"MainActivity";? ????private?WebView?webView;?????@Override?????public?void?onCreate(Bundle?savedInstanceState)?{?????????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(new?WebChromeClient(){?????????????@Override?????????????public?void?onProgressChanged(WebView?view,?int?newProgress)?{ ????????????????super.onProgressChanged(view,?newProgress);?????????????}?????????});?????????webView.setWebViewClient(new?MyWebViewClient());???????????????????????}??????????private?class?MyWebViewClient?extends?WebViewClient{?????????@Override?????????public?void?onLoadResource(WebView?view,?String?url)?{???????????????????????????Log.i(TAG,?"onLoadResource:"?+?url);???????????????????????super.onLoadResource(view,?url);??????????}??????????????????@Override?????????public?void?onReceivedError(WebView?view,?int?errorCode,?????????????????String?description,?String?failingUrl)?{?????????????Log.i(TAG,?"onReceivedError:"?+?failingUrl+"?\n?errorcode="+errorCode);?????????????super.onReceivedError(view,?errorCode,?description,?failingUrl);?????????}????????????????????@Override?????????public?boolean?shouldOverrideUrlLoading(WebView?view,?String?url)?{?????????????????Log.i(TAG,?"shouldOverrideUrlLoading:"?+?url);??????????????view.loadUrl(url);?????????????return?true;?????????}??????????????????????@Override?????????public?void?onPageStarted(WebView?view,?String?url,?Bitmap?favicon)?{?????????????????Log.i(TAG,?"onPageStarted:"?+?url);??????????}??????????????????????@Override?????????public?void?onPageFinished(WebView?view,?String?url)?{???????????????Log.i(TAG,?"onPageFinished:"?+?url);???????????????????????}?????};??????????@Override?????public?boolean?onKeyDown(int?keyCode,?KeyEvent?event)?{??????????if((keyCode?==?KeyEvent.KEYCODE_BACK)?&&?webView.canGoBack()){??????????????webView.goBack();??????????????return?true;??????????}?????????return?super.onKeyDown(keyCode,?event);??????????????}?}? 代碼就是全部代碼了。
? ? ?今天就寫到這里，繼續干活了。歡迎大家一起交流學習。
? ? ?
?
轉載于:https://blog.51cto.com/xuzhiwei/1009683
總結
以上是生活随笔為你收集整理的jquery mobile开发笔记之Ajax提交数据的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
