zoukankan      html  css  js  c++  java

  • 通过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跳转到成功后显示的页面。
  • 相关阅读:
    Javascript FP-ramdajs
    微信小程序开发
    SPA for HTML5
    One Liners to Impress Your Friends
    Sass (Syntactically Awesome StyleSheets)
    iOS App Icon Template 5.0
    React Native Life Cycle and Communication
    Meteor framework
    RESTful Mongodb
    Server-sent Events
  • 原文地址：https://www.cnblogs.com/jokerjason/p/5855155.html
Copyright © 2011-2022 走看看