生活随笔
收集整理的這篇文章主要介紹了
jquery mobile开发笔记之Ajax提交数据
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
? ? ?這兩天學(xué)習(xí)了下，jquery mobile(以下簡(jiǎn)稱(chēng)jqm)的開(kāi)發(fā)相關(guān)的內(nèi)容?？赡苤坝羞^(guò)web的開(kāi)發(fā)基礎(chǔ)，相對(duì)于我來(lái)說(shuō)學(xué)習(xí)這個(gè)東西感覺(jué)挺簡(jiǎn)單的，很容易上手。Jqm的的語(yǔ)法和jquery其實(shí)是一樣的，有些不大一樣的就是了。網(wǎng)上介紹的也是一大堆。這里我主要是做筆記哈。
? ? 使用JQM開(kāi)發(fā)其實(shí)很簡(jiǎn)單，我這里目前是針對(duì)于在服務(wù)器端開(kāi)發(fā)的，服務(wù)器使用的是apache+php，前端其實(shí)主要是html5+jquery的寫(xiě)法。
1、首先我們可以到官網(wǎng)去下載jquery mobile，然后下載完成后，我們可以看到如下的的目錄結(jié)構(gòu)。
? ??
? ?jqm的包里已經(jīng)包含了demo和核心代碼。jqm提供的demo很全面，直接學(xué)習(xí)它基本就夠了。?既然下載好了，我們就可以進(jìn)行開(kāi)發(fā)了，概念的東西我就不多說(shuō)了，直接上代碼。
?
2、編寫(xiě)form表單頁(yè)面。
?
<!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、編寫(xiě)服務(wù)器端腳本form.php(這里我使用php)
?
<?php?????$username?=?$_POST['username'];?????echo?"User?Name：".$username;??>? 4、編寫(xiě)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、創(chuàng)建android的工程，使用webview進(jìn)行訪(fǎng)問(wèn)。
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);??????????????}?}? 代碼就是全部代碼了。
? ? ?今天就寫(xiě)到這里，繼續(xù)干活了。歡迎大家一起交流學(xué)習(xí)。
? ? ?
?
轉(zhuǎn)載于:https://blog.51cto.com/xuzhiwei/1009683
總結(jié)
以上是生活随笔為你收集整理的jquery mobile开发笔记之Ajax提交数据的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
