File name: callajax.php

  1. <?php
  2. $firstName = $_POST[firstName];
  3. $lastName = $_POST[lastName];
  4. echo("First Name: " . $firstName . " Last Name: " . $lastName);
  5. ?>


File name: index.php

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Submit a form via AJAX</title>
  5. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
  6. <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
  7. <script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
  8. </head>
  9. <body>
  10. <script>
  11. function onSuccess(data, status)
  12. {
  13. data = $.trim(data);
  14. $("#notification").text(data);
  15. }
  16. function onError(data, status)
  17. {
  18. // handle an error
  19. }
  20. $(document).ready(function() {
  21. $("#submit").click(function(){
  22. var formData = $("#callAjaxForm").serialize();
  23. $.ajax({
  24. type: "POST",
  25. url: "callajax.php",
  26. cache: false,
  27. data: formData,
  28. success: onSuccess,
  29. error: onError
  30. });
  31. return false;
  32. });
  33. });
  34. </script>
  35. <!-- call ajax page -->
  36. <div data-role="page" id="callAjaxPage">
  37. <div data-role="header">
  38. <h1>Call Ajax</h1>
  39. </div>
  40. <div data-role="content">
  41. <form id="callAjaxForm">
  42. <div data-role="fieldcontain">
  43. <label for="firstName">First Name</label>
  44. <input type="text" name="firstName" id="firstName" value=""  />
  45. <label for="lastName">Last Name</label>
  46. <input type="text" name="lastName" id="lastName" value=""  />
  47. <h3 id="notification"></h3>
  48. <button data-theme="b" id="submit" type="submit">Submit</button>
  49. </div>
  50. </form>
  51. </div>
  52. <div data-role="footer">
  53. <h1>GiantFlyingSaucer</h1>
  54. </div>
  55. </div>
  56. </body>
  57. </html>


+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
jQuery mobile 表单提交 

最近在做手机页面用jQuery mobile开发，在用到form表单提交到时遇到了问题。

后台是用servlet进行处理的，想通过Servlet里面的重定向进行页面跳转发现在手机上根本没有用，出现errorpage提示信息。

查询网上资料以及jQuery mobile API得知 jQuery mobile表单提交默认是ajax提交，所以页面跳转写在servlet里面根本就不会实现页面跳转功能。

于是我按照教程在form里面加了  data-ajax=“false”这一属性，发现别说是页面跳转不行，就连后台的数据库操作都做不了，报了500错误。

想了好久既然用ajax提交，那么就用ajax进行页面跳转

  1. <script type="text/javascript">
  2. $(document).ready(function () {
  3. $("#submitbtn").click(function(){
  4. cache: false,
  5. $.ajax({
  6. type: "POST",
  7. url: "feedback",
  8. data: $('#feedbackform').serialize(),
  9. success:function(data){
  10. $.mobile.changePage("success.html");
  11. }
  12. });
  13. });
  14. });
  15. </script>
  1. <form method="post" id="feedbackform">
  2. t;span style="white-space:pre">              </span>//相关表单元素
  3. <input type="button" id="submitbtn" value="提交">
  4. </form>

注意的是js里面的data

  1. $('#feedbackform').serialize()

是必须要有的，不然servlet里面用requset.getParameter接受的数据是null，ajax和后台成功交互后用changePage跳转到成功后显示的页面。

通过AJAX和PHP，提交JQuery Mobile表单的更多相关文章

  1. jQuery Mobile 表单基础

    jQuery Mobile 会自动为 HTML 表单添加优异的便于触控的外观. jQuery Mobile 表单结构 jQuery Mobile 使用 CSS 来设置 HTML 表单元素的样式,以使其 ...

  2. （四）Jquery Mobile表单

    Jquery Mobile表单与列表 一.JM表单      1.表单      普通html表单            效果:          2.只能输入数字的表单           效果:  ...

  3. jquery mobile 表单提交 图片/文件 上传

    jquerymobile 下面 form 表单提交 和普通html没区别,最主要是 <form 要加一个 data-ajax='false' 否则 上传会失败 1  html代码 <!do ...

  4. Jquery Mobile表单

    三个前提: 1.每个form必须设置method和action属性 2.每个form必须有页面范围内唯一的id标识 3.每个form必须有一个label标签,通过设置它的for属性来匹配元素的id & ...

  5. jQuery Mobile 表单输入元素

    jQuery Mobile 文本输入 输入字段是通过标准的 HTML 元素编写的,jQuery Mobile 会为它们设置专门针对移动设备的美观易用的样式.您还可以使用新的 HTML5 <inp ...

  6. ajax使用formdata 提交excel文件表单到rails解析

    .modal-body .container-fluid .row .col-md-12 1.下载模板文件 = link_to '模板文件' .row .col-md-12 = form_tag '' ...

  7. 主攻ASP.NET MVC4.0之重生:Jquery Mobile 表单元素

    相关代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

  8. jquery插件-表单提交插件-jQuery.Form

    1.介绍 JQuery Form插件是一款强大的Ajax表单提交插件,可以简单方便的实现让我们的表单 由传统的提交方式转换成Ajax无刷新提交! 他提供了两个核心的方法ajaxForm以及ajaxSu ...

  9. jQuery Form 表单提交插件-----formSerialize，fieldSerialize，fieldValue，resetForm，clearForm，clearFields的 应用

    一.jQuery Form的其他api  1.  formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...

随机推荐

  1. DataSource

    数据库连接池原理:在内存中开辟一段存储空间用来存储多个Connection连接,避免频繁的创建Connection,从而提高效率.代码如下: package jcbc.ds.test1; import ...

  2. show,hide与fadeIn、fadeOu的区别

    show,hide——>是通过改变height,width,opacity来实现动画的显示与隐藏的 fadeIn.fadeOut——>只通过opacity来实现动画的显示与隐藏的 它们两个 ...

  3. 文成小盆友python-num2 数据类型、列表、字典

    一.先聊下python的运行过程 计算机是不能够识别高级语言的,所以当我们运行一个高级语言程序的时候,就需要一个“翻译机”来从事把高级语言转变成计算机能读懂的机器语言的过程.这个过程分成两类,第一种是 ...

  4. 安装python3.4

    1.http://www.python.org下载适合自己机型的镜像文件 2.一路“next”到底,安装python到C盘上 3.计算机-属性-高级系统设置-环境变量,将刚刚安装的python路径添加 ...

  5. django解决跨域请求的问题

    跨域请求可以用jsonp来解决,不过今天我发现一个很好用的包:django-cors-headers 只需要简单地配置一下就可 被请求方的setting.py中的配置如下: INSTALLED_APP ...

  6. 用委托、匿名函数、Lambda的方式输出符合要求的数

    最近看了一些博客,对委托和匿名函数和Lambda的方式有了一些更深的理解,在前人的基础上.我也写3个例子 using System; using System.Collections.Generic; ...

  7. mysql group_concat函数是有长度限制的

    在表关联查询中,特别是一对多关系的表查询中,group_concat函数是很有用的一个函数,帮助我们减少对数据库查询的次数,减少服务器的压力. 但是今天使用group_concat函数查询数据库时,发 ...

  8. 这样就算会了PHP么？-10

    关于基本的文件读写内容: <?php echo "readfile function:<br>"; readfile("tm.txt"); e ...

  9. 通过基于 Linux 的软件 VPN 设备连接到 Windows Azure 虚拟网络

    摘要 本文章将说明如何通过使用软件 VPN 设备,将本地办公室或站点连接到 Windows Azure 虚拟网络.在构建原型或在构建可以尽快利用云的"开发/测试"工作流时,软件VP ...

  10. 微信内置浏览器的JsAPI(WeixinJSBridge续)_Alien的笔记

    微信内置浏览器的JsAPI(WeixinJSBridge续)_Alien的笔记 微信内置浏览器的JsAPI(WeixinJSBridge续)进入全屏 之前有写过几篇关于微信内置浏览器(WebView) ...