jquery mobile开发笔记之Ajax提交数据

    这两天学习了下，jquery mobile(以下简称jqm)的开发相关的内容。可能之前有过web的开发基础，相对于我来说学习这个东西感觉挺简单的，很容易上手。Jqm的的语法和jquery其实是一样的，有些不大一样的就是了。网上介绍的也是一大堆。这里我主要是做笔记哈。

    使用JQM开发其实很简单，我这里目前是针对于在服务器端开发的，服务器使用的是apache+php，前端其实主要是html5+jquery的写法。

<a href="http://blog.51cto.com/attachment/201209/110017481.jpg" target="_blank"></a>

   jqm的包里已经包含了demo和核心代码。jqm提供的demo很全面，直接学习它基本就够了。 既然下载好了，我们就可以进行开发了，概念的东西我就不多说了，直接上代码。

2、编写form表单页面。

&lt;!DOCTYPE html&gt; 

&lt;html&gt; 

&lt;head&gt; 

    &lt;meta charset="UTF-8" /&gt; 

    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; 

    &lt;title&gt;表单&lt;/title&gt; 

    &lt;!--加载jqm css样式--&gt; 

    &lt;link rel="stylesheet"  href="css/jquery.mobile-1.2.0-rc.2.css" /&gt; 

    &lt;!--加载jquery--&gt; 

    &lt;script src="js/jquery.js"&gt;&lt;/script&gt; 

    &lt;!--加载jquery mobile--&gt; 

    &lt;script src="js/jquery.mobile-1.2.0-rc.2.js"&gt;&lt;/script&gt;  

    &lt;script src="js/ajax.js"&gt;&lt;/script&gt;  

&lt;/head&gt;  

&lt;body&gt; 

    &lt;div data-role="page" data-fullscreen="true"&gt;&lt;!--data-fullscreen 设置全屏--&gt; 

    &lt;div data-role="header"   data-position="inline"&gt;&lt;!--data-position="inline" 设置以流的方式显示--&gt; 

        &lt;a href="index.html" data-icon="delete"&gt;Cacel&lt;/a&gt;  

        &lt;h1&gt;表单demo&lt;/h1&gt; 

    &lt;/div&gt;&lt;!-- /header --&gt; 

    &lt;div data-role="content"&gt;    

        &lt;form id="ajaxForm"&gt; 

            &lt;div data-role="fieldcontain"&gt; 

                &lt;label for="username"&gt;User Name:&lt;/label&gt; 

                &lt;input type="text" name="username" id="username" data-mini="true"/&gt; 

                &lt;h3 id="notification"&gt;&lt;/h3&gt; 

                &lt;button data-theme="b" id="submit" type="submit"&gt;Submit&lt;/button&gt; 

            &lt;/div&gt; 

        &lt;/form&gt;  

    &lt;/div&gt;&lt;!-- /content --&gt; 

    &lt;div data-role="footer"  data-position="fixed"&gt; 

        &lt;h4&gt;Page Footer&lt;/h4&gt; 

    &lt;/div&gt;&lt;!-- /footer --&gt; 

&lt;/div&gt;&lt;!-- /page --&gt; 

&lt;/body&gt; 

&lt;/html&gt; 

3、编写服务器端脚本form.php(这里我使用php)

&lt;?php 

    $username = $_POST['username']; 

    echo "User Name：".$username; 

?&gt; 

4、编写ajax脚本ajax.js

$(function() { 

    $('#submit').bind('click', function() { 

        var formData = $('#ajaxForm').serialize(); 

        //.serialize() 方法创建以标准 URL 编码表示的文本字符串 

        $.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：

&lt;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" &gt; 

    &lt;WebView 

        android:id="@+id/webview" 

        android:layout_width="fill_parent" 

        android:layout_height="fill_parent"  /&gt; 

&lt;/RelativeLayout&gt; 

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; 

/** 

 *  

 * @author [email protected] 

 * weibo:http://weibo.com/xzw1989 

 * 

 */ 

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);  

        } 

        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; 

        public void onPageStarted(WebView view, String url, Bitmap favicon) { 

                Log.i(TAG, "onPageStarted:" + url);  

        public void onPageFinished(WebView view, String url) { 

              Log.i(TAG, "onPageFinished:" + url);  

    }; 

    public boolean onKeyDown(int keyCode, KeyEvent event) { 

         if((keyCode == KeyEvent.KEYCODE_BACK) &amp;&amp; webView.canGoBack()){ 

             webView.goBack(); 

             return true; 

         } 

        return super.onKeyDown(keyCode, event); 

代码就是全部代码了。

     今天就写到这里，继续干活了。欢迎大家一起交流学习。

 本文转自xuzw13 51CTO博客，原文链接：http://blog.51cto.com/xuzhiwei/1009683，如需转载请自行联系原作者