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>
- <!--加载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);
- }
- }
代码就是全部代码了。
今天就写到这里,继续干活了。欢迎大家一起交流学习。
转载于:https://blog.51cto.com/xuzhiwei/1009683
jquery mobile开发笔记之Ajax提交数据相关推荐
- ajax提交数据给谁,jquery ajax提交数据给后端
大家好,今天铁柱兄给大家带一段jquery ajax提交数据给后端的教学. 初学javaweb的同学前端提交数据基本上都是用form表单提交,这玩意儿反正我是觉得不太好玩.而JavaScript aj ...
- ajax提交成功清空表单,Ajax提交数据后,清空form表单
按钮不同,页面相同,还需要显示的数据不同,这里会由于页面的缓存问题,导致,每次点开这个页面显示的数据相同. 这不是我们想要的.这就需要清楚表单数据了. 如下: $('#myform')[0].rese ...
- 18 个 jQuery Mobile 开发贴士和教程
jQuery Mobile 是 jQuery 在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架.支持 ...
- ajax提交数据到后台php接收
在网上看了很久,发现数据的利用ajax提交数据到后台其实很简单,但是很多讲解的并不清楚,对于初学者来说,很多真的是看着有点糊涂,拿来直接用,又想去了解怎么回事,其实利用ajax提交数据到后台是非常的简 ...
- 跨平台APP JQuery Mobile开发-张晨光-专题视频课程
跨平台APP JQuery Mobile开发-1170人已学习 课程介绍 jQuery Mobile 是创建移动 web 应用程序的框架: 适用于所有流行的智能手机和平板电脑,使用 H ...
- 视频教程-跨平台APP JQuery Mobile开发-jQuery
跨平台APP JQuery Mobile开发 主要研究方向为J2EE..net .数据库 .前端.Android,曾经服务过大型上市国企IT部门,软件企业联合创始人,对软件研发管理.市场营销有自己独特 ...
- 用ajax提交数据到ashx用JSON.stringify格式化参数后在服务器端取不到值?[转载至:http://q.cnblogs.com/q/34266/]...
用ajax提交数据到ashx用JSON.stringify格式化参数后在服务器端取不到值?[转载至:http://q.cnblogs.com/q/34266/] 前台代码: $(function () ...
- jQuery Mobile学习笔记
1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) ...
- Django中Ajax提交数据的CSRF问题
错误信息: Forbidden (CSRF token missing or incorrect.): 什么是CSRF: django为用户实现防止跨站请求伪造的功能,通过中间件 django.mid ...
最新文章
- 格灵深瞳CTO邓亚峰:AI学习的三种路线
- 算术表达式求解背景_1.8 C++算术运算符与表达式
- 在你的网站集成Wiki系统 WikiPlex
- .net vue漂亮登录界面_基于 electron-vue 开发的音乐播放器「实践」
- 浙大计算机科学与技术FPGA,Computer Science 计算机科学与技术系 重要国际学术会议...
- spring security原理图及其解释
- linux哪国的,Linux是什么它是哪个国家开发的
- Matlab2013a破解问题
- matlab pdetool解热传导方程,传热学与应用(李晓炜)基于pdetool的热传导数值计算.pdf...
- Swift学习笔记 -- 枚举和结构
- 人脸识别门禁应用方案
- 字符串的交叉合并c语言,C语言 两字符串的合并
- Java曲线之削峰填谷,四种用户侧“削峰填谷”储能技术方案对比:最快8.26年,最多收益71.76万元...
- 安霸Ambarella三款CV系列芯片对比--CV2S、CV22S、CV25S
- python 数组去重复
- 四川大学计算机学院2016级毕业生,小猿分享 | 四年磨一剑:计算机学院2016级优秀毕业生高含宁专访...
- 上海JAVA5月就业环境,各位上海的大佬们呀 我准备下个礼拜出去上海找工作了!一年半的...
- 无线系列 - 5G大规模MIMO阵列仿真及混合波束成形设计
- Redis常用的命令(一)-------启动、配置等
- uniapp微信小程序证件识别
热门文章
- mach空串 php preg_PHP 优化详解
- python游戏编程快速上手第四版dragon_《Python游戏编程快速上手》——导读
- cesium鼠标控制键盘_用 Python 控制 鼠标和键盘,花式操作
- python request.get乱码_python的request中文乱码怎么办
- GDB多进程调试(转)
- 阶段1 语言基础+高级_1-3-Java语言高级_02-继承与多态_第1节 继承_2_继承的格式
- Linux使用storcli工具查看服务器硬盘和raid组信息
- 烦神的斐波那契洛谷-1306-斐波那契公约数
- Python爬虫:scrapy 的运行流程和各模块的作用
- Web运行控制台输出乱码解决总结