通过AJAX和PHP，提交JQuery Mobile表单

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


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.     
  17.         function onError(data, status)  
  18.         {  
  19.             // handle an error  
  20.         }          
  21.     
  22.         $(document).ready(function() {  
  23.             $("#submit").click(function(){  
  24.     
  25.                 var formData = $("#callAjaxForm").serialize();  
  26.     
  27.                 $.ajax({  
  28.                     type: "POST",  
  29.                     url: "callajax.php",  
  30.                     cache: false,  
  31.                     data: formData,  
  32.                     success: onSuccess,  
  33.                     error: onError  
  34.                 });  
  35.     
  36.                 return false;  
  37.             });  
  38.         });  
  39.     </script>  
  40.     
  41.     <!-- call ajax page -->  
  42.     <div data-role="page" id="callAjaxPage">  
  43.         <div data-role="header">  
  44.             <h1>Call Ajax</h1>  
  45.         </div>  
  46.     
  47.         <div data-role="content">  
  48.             <form id="callAjaxForm">  
  49.                 <div data-role="fieldcontain">  
  50.                     <label for="firstName">First Name</label>  
  51.                     <input type="text" name="firstName" id="firstName" value=""  />  
  52.    
  53.                     <label for="lastName">Last Name</label>  
  54.                     <input type="text" name="lastName" id="lastName" value=""  />  
  55.                     <h3 id="notification"></h3>  
  56.                     <button data-theme="b" id="submit" type="submit">Submit</button>  
  57.                 </div>  
  58.             </form>  
  59.         </div>  
  60.     
  61.         <div data-role="footer">  
  62.             <h1>GiantFlyingSaucer</h1>  
  63.         </div>  
  64.     </div>  
  65. </body>  
  66. </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.         });  
  16.   
  17.   
  18. </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跳转到成功后显示的页面。

posted @ 2016-09-09 07:53  JokerJason  阅读(3023)  评论(0)  编辑  收藏  举报

It's not who you are underneath, it's what you do that defines you

Brick walls are there for a reason :they let us prove how badly we want things