通过AJAX和PHP,提交JQuery Mobile表单
File name: callajax.php
- <?php
- $firstName = $_POST[firstName];
- $lastName = $_POST[lastName];
- echo("First Name: " . $firstName . " Last Name: " . $lastName);
- ?>
File name: index.php
- <!DOCTYPE html>
- <html>
- <head>
- <title>Submit a form via AJAX</title>
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
- <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
- <script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
- </head>
- <body>
- <script>
- function onSuccess(data, status)
- {
- data = $.trim(data);
- $("#notification").text(data);
- }
- function onError(data, status)
- {
- // handle an error
- }
- $(document).ready(function() {
- $("#submit").click(function(){
- var formData = $("#callAjaxForm").serialize();
- $.ajax({
- type: "POST",
- url: "callajax.php",
- cache: false,
- data: formData,
- success: onSuccess,
- error: onError
- });
- return false;
- });
- });
- </script>
- <!-- call ajax page -->
- <div data-role="page" id="callAjaxPage">
- <div data-role="header">
- <h1>Call Ajax</h1>
- </div>
- <div data-role="content">
- <form id="callAjaxForm">
- <div data-role="fieldcontain">
- <label for="firstName">First Name</label>
- <input type="text" name="firstName" id="firstName" value="" />
- <label for="lastName">Last Name</label>
- <input type="text" name="lastName" id="lastName" value="" />
- <h3 id="notification"></h3>
- <button data-theme="b" id="submit" type="submit">Submit</button>
- </div>
- </form>
- </div>
- <div data-role="footer">
- <h1>GiantFlyingSaucer</h1>
- </div>
- </div>
- </body>
- </html>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
jQuery mobile 表单提交
最近在做手机页面用jQuery mobile开发,在用到form表单提交到时遇到了问题。
后台是用servlet进行处理的,想通过Servlet里面的重定向进行页面跳转发现在手机上根本没有用,出现errorpage提示信息。
查询网上资料以及jQuery mobile API得知 jQuery mobile表单提交默认是ajax提交,所以页面跳转写在servlet里面根本就不会实现页面跳转功能。
于是我按照教程在form里面加了 data-ajax=“false”这一属性,发现别说是页面跳转不行,就连后台的数据库操作都做不了,报了500错误。
想了好久既然用ajax提交,那么就用ajax进行页面跳转
- <script type="text/javascript">
- $(document).ready(function () {
- $("#submitbtn").click(function(){
- cache: false,
- $.ajax({
- type: "POST",
- url: "feedback",
- data: $('#feedbackform').serialize(),
- success:function(data){
- $.mobile.changePage("success.html");
- }
- });
- });
- });
- </script>
- <form method="post" id="feedbackform">
- t;span style="white-space:pre"> </span>//相关表单元素
- <input type="button" id="submitbtn" value="提交">
- </form>
注意的是js里面的data
- $('#feedbackform').serialize()
是必须要有的,不然servlet里面用requset.getParameter接受的数据是null,ajax和后台成功交互后用changePage跳转到成功后显示的页面。
通过AJAX和PHP,提交JQuery Mobile表单的更多相关文章
- jQuery Mobile 表单基础
jQuery Mobile 会自动为 HTML 表单添加优异的便于触控的外观. jQuery Mobile 表单结构 jQuery Mobile 使用 CSS 来设置 HTML 表单元素的样式,以使其 ...
- (四)Jquery Mobile表单
Jquery Mobile表单与列表 一.JM表单 1.表单 普通html表单 效果: 2.只能输入数字的表单 效果: ...
- jquery mobile 表单提交 图片/文件 上传
jquerymobile 下面 form 表单提交 和普通html没区别,最主要是 <form 要加一个 data-ajax='false' 否则 上传会失败 1 html代码 <!do ...
- Jquery Mobile表单
三个前提: 1.每个form必须设置method和action属性 2.每个form必须有页面范围内唯一的id标识 3.每个form必须有一个label标签,通过设置它的for属性来匹配元素的id & ...
- jQuery Mobile 表单输入元素
jQuery Mobile 文本输入 输入字段是通过标准的 HTML 元素编写的,jQuery Mobile 会为它们设置专门针对移动设备的美观易用的样式.您还可以使用新的 HTML5 <inp ...
- ajax使用formdata 提交excel文件表单到rails解析
.modal-body .container-fluid .row .col-md-12 1.下载模板文件 = link_to '模板文件' .row .col-md-12 = form_tag '' ...
- 主攻ASP.NET MVC4.0之重生:Jquery Mobile 表单元素
相关代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...
- jquery插件-表单提交插件-jQuery.Form
1.介绍 JQuery Form插件是一款强大的Ajax表单提交插件,可以简单方便的实现让我们的表单 由传统的提交方式转换成Ajax无刷新提交! 他提供了两个核心的方法ajaxForm以及ajaxSu ...
- jQuery Form 表单提交插件-----formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的 应用
一.jQuery Form的其他api 1. formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...
随机推荐
- 简单数据结构———AVL树
C - 万恶的二叉树 Crawling in process... Crawling failed Time Limit:1000MS Memory Limit:32768KB 64b ...
- QTableWidget简单操作
使用Qt设计师工具,在窗体上添加Table Widget控件,这样就可以使用ui全局变量来调用该控件了. Table Widget控件的应用 (1)设置列数和行数 //设¦¨¨置?列¢D数ºy和¨ª行 ...
- PC机安装android apk | adb install -r
PC 下载 *****.apk 通过adb直接安装到android系统
- ubuntu12.04 安装 ruby1.9.3
sudo apt-add-repository ppa:brightbox/ruby-ng sudo apt-get update sudo apt-get install ruby rubygems ...
- 远程调试 Azure 上的 Website
让我们先检查一下使用的 Azure SDK 版本和 Visual Studio 版本.根据MSDN的介绍,Azure 的远程调试功能是在 Azure SDK 2.2 中加入的,所以请确保您的机器上安装 ...
- MVC入门之.Net语法学习
本节中主要学习.Net框架性语法.开发者可以使用新语法提高编程的效率以及代码的运行效率:其本质都是“语法糖”,由编译器在编译时转成原始语法. u 自动属性 Auto-Implemented Prop ...
- SQL Server聚合函数
聚合函数对一组值计算后返回单个值.除了count(统计项数)函数以外,其他的聚合函数在计算式都会忽略空值(null).所有的聚合函数均为确定性函数.即任何时候使用一组相同的输入值调用聚合函数执行后的返 ...
- 【转】vsftp 遇到错误 500 OOPS: vsftpd: refusing to run with writable root inside chroot()--不错
原文网址:http://linux.it.net.cn/e/server/ftp/2015/0227/13554.html 当我们限定了用户不能跳出其主目录之后,使用该用户登录FTP时往往会遇到这个错 ...
- ECharts JavaScript图表库 ECharts
ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...
- HDU 5418 Victor and World (Floyd + 状态压缩DP)
题目大意:从起点 1 开始走遍所有的点,回到起点 1 ,求出所走的最短长度. 思路:首先利用 Floyed 求出任意两点之间的最短距离 dis[i][j].求出任意两点之间的最短距离后,运用动态规划. ...