jquery mobile开发笔记之Ajax提交数据-阿里云开发者社区

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

2017-11-14 1191

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

这两天学习了下，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> 

  
      <!--加载jqm css样式--> 

  
      <link rel="stylesheet"  href="css/jquery.mobile-1.2.0-rc.2.css" /> 

  
      <!--加载jquery--> 

  
      <script src="js/jquery.js"></script> 

  
      <!--加载jquery mobile--> 

  
      <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"><!--data-fullscreen 设置全屏--> 

  
   

  
      <div data-role="header"   data-position="inline"><!--data-position="inline" 设置以流的方式显示--> 

  
          <a href="index.html" data-icon="delete">Cacel</a>  

  
          <h1>表单demo</h1> 

  
      </div><!-- /header --> 

  
   

  
      <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><!-- /content --> 

  
   

  
      <div data-role="footer"  data-position="fixed"> 

  
          <h4>Page Footer</h4> 

  
      </div><!-- /footer --> 

  
  </div><!-- /page --> 

  
   

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

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


 
 

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

  
  /** 

  
   *  

  
   * @author xuzw13@gmail.com 

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

  
          } 

  
           

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

  
           

  
      } 

  
  }

代码就是全部代码了。

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

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

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

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

热门文章

最新文章

相关课程

相关电子书