2. 程式人生 > >通過AJAX和PHP，提交JQuery Mobile表單(兩篇)

通過AJAX和PHP，提交JQuery Mobile表單(兩篇)

阿新 • • 發佈：2019-02-11

通過AJAX和PHP，提交JQuery Mobile表單

http://blog.itechol.com/space-4-do-blog-id-6533.html

File name: callajax.php

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

File name: index.php
[html] view plaincopyprint?
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.     <title>Submit a form via AJAX</title>
  5.       <linkrel="stylesheet"href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css"/>
  6.       <scriptsrc="http://code.jquery.com/jquery-1.5.2.min.js"></
    script>
  7.       <scriptsrc="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.     <divdata-role="page"id="callAjaxPage">
  37.         <divdata-role="header">
  38.             <h1>Call Ajax</h1>
  39.         </div>
  40.         <divdata-role="content">
  41.             <formid="callAjaxForm">
  42.                 <divdata-role="fieldcontain">
  43.                     <labelfor="firstName">First Name</label>
  44.                     <inputtype="text"name="firstName"id="firstName"value=""/>
  45.                     <labelfor="lastName">Last Name</label>
  46.                     <inputtype="text"name="lastName"id="lastName"value=""/>
  47.                     <h3id="notification"></h3>
  48.                     <buttondata-theme="b"id="submit"type="submit">Submit</button>
  49.                 </div>
  50.             </form>
  51.         </div>
  52.         <divdata-role="footer">
  53.             <h1>GiantFlyingSaucer</h1>
  54.         </div>
  55.     </div>
  56. </body>
  57. </html>





+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
jQuery mobile 表單提交

http://blog.csdn.net/tjpu_lin/article/details/28394253

最近在做手機頁面用jQuery mobile開發，在用到form表單提交到時遇到了問題。

後臺是用servlet進行處理的，想通過Servlet裡面的重定向進行頁面跳轉發現在手機上根本沒有用，出現errorpage提示資訊。

查詢網上資料以及jQuery mobile API得知 jQuery mobile表單提交預設是ajax提交，所以頁面跳轉寫在servlet裡面根本就不會實現頁面跳轉功能。

於是我按照教程在form裡面加了  data-ajax=“false”這一屬性，發現別說是頁面跳轉不行，就連後臺的資料庫操作都做不了，報了500錯誤。

想了好久既然用ajax提交，那麼就用ajax進行頁面跳轉

[html] view plaincopyprint?在CODE上檢視程式碼片派生到我的程式碼片
  1. <scripttype="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>
[html] view plaincopyprint?在CODE上檢視程式碼片派生到我的程式碼片
  1. <formmethod="post"id="feedbackform">
  2. t;span style="white-space:pre"></span>//相關表單元素  
  3.     <inputtype="button"id="submitbtn"value="提交">
  4. </form>

注意的是js裡面的data [html] view plaincopyprint?在CODE上檢視程式碼片派生到我的程式碼片
  1. $('#feedbackform').serialize()  
是必須要有的，不然servlet裡面用requset.getParameter接受的資料是null，ajax和後臺成功互動後用changePage跳轉到成功後顯示的頁面。




相關推薦

通過AJAX和PHP，提交JQuery Mobile表單(兩篇)

通過AJAX和PHP，提交JQuery Mobile表單 http://blog.itechol.com/space-4-do-blog-id-6533.html File name: callajax.php [php] view plaincopyprint? <?php      $f

jquery-mobile表單提交問題

關於使用jquery-mobile表單提交遇到的問題    當你使用了jquery-mobile的時候，如果你在前臺提交一個了一個form表單，而在後臺你處理完業務邏輯之後想要重定向到另一個方法或頁面的時候。切記要在form表單處新增一個data-ajax=“false”。

jQuery Mobile 表單滑動條和開關

1、jQuery Mobile 滑動條控制元件 滑動條允許您從一個範圍的數字中選擇一個值： <!DOCTYPE html> <html> <head> <me

ajax上傳檔案 基於jquery form表單上傳檔案

<script src="/static/js/jquery.js"></script><script> $("#reg-btn").click(function () { // 1. 取到使用者填寫的資料 var for

jquery mobile 表單輸入

<div data-role="content"> <form method="post" action="${ctx}/mes/mobile/outtestSave"> <div data-role="fieldcontain" styl

Django通過Ajax利用FormData動態提交表單（包括檔案，字串）

0 需求背景 有的時候我們上傳表單，經過後臺處理之後再分發回原來頁面，這時必定會重新整理這個頁面。為了解決這個問題，我們採用JS動態提交表單元素，如：file、text等型別，可以很好的解決這一問題。 1 DOM結構 <form method="post" enctype=

jquery在表單提交之前，給submit按鈕繫結ajax請求需要注意的細節

場景： 一般情況下，我們在一個form表單中新增很多資訊，在submit提交操作之前，我們有可能需要驗證一些必要的資訊，比如說：提交前，我們需要驗證當前註冊的賬戶名稱是否已經在資料庫中存在的情況，這個時候就需要在submit按鈕提交前繫結一個ajax非同步的click事件。

AJAX PHP無刷新form表單提交的簡單實現(推薦)

username mime win root 支持 對象 希望 meta {} 下面小編就為大家帶來一篇AJAX PHP無刷新form表單提交的簡單實現(推薦)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧 ajax.php <

Ajax提交數據後，清空form表單

由於 清空 bsp style 不同 註意 res RM input 按鈕不同，頁面相同，還需要顯示的數據不同，這裏會由於頁面的緩存問題，導致，每次點開這個頁面顯示的數據相同。 這不是我們想要的。這就需要清楚表單數據了。 如下： $(‘#myform‘)[0].reset(

使用jQuery.form外掛，實現完美的表單非同步提交

時間真快，轉眼一個月快結束了，一個月沒寫部落格了！手開始生了，怎麼開始呢…… 抓住6月份的尾巴，今天的主題是 通過該外掛，我們可以非常簡單的實現表單的非同步提交，並實現檔案上傳、進度條顯示等等。 現在我們從一個ASP.NET同步表單提交開始，然後再將其轉化為非同步的表單提交。我寫了3

1、Jquery form表單ajax提交 2、jquery.filter校驗多個相同型別的文字框是否輸入資料有重複

JSP引用該JS <script type="text/javascript" src="http://malsup.github.com/jquery.form.js"></script> 表單儲存按鈕 onclick=save(); func

通過ajax得到資料，顯示http://localhost:8081/專案名/[object%20Object] 404 (Not Found) 錯誤。

今天在使用easyui-datagrid 中的toolbar，通過ajax得到資料時，出現http://localhost:8080/專案名/[object%20Object] 404 (Not Found) 錯誤。 toolbar: [{ id: 'btn

表單序列化，jq中的serialize，ajax提交整個form表單，無需逐個拼寫json

</pre><pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x

mui上拉載入通過ajax獲取資料，實現分頁

上拉重新整理程式碼 $(document).ready(function(){ //上拉載入下拉重新整理 mui.init({ pullRefresh: {

通過Ajax和SpringBoot互動的示例

1. 開始 1.1 說明 很久沒有管理部落格，這幾天想了想，還是打算把日常學習的東西記錄下來。公司最近專案需要用到SpringBoot，微服務在Spring社群的崛起，使得SpringBoot受到了更多的青睞。使用SpringBoot這個微框架，能

jsp 通過 Ajax 和servlet之間的連線及資料傳遞示例

效果圖：很基本的例子，不過剛開始把第三步open（）連線中url 寫錯了，老是訪問不到，如果出現相同的問題，可以再js部分第二步中通過alert（“xmlReq.readystate=”+xmlReq+"   "+"xmlReq.status="+xmlReq.status

通過JS和CSS，實現網頁載入中的動畫效果

需要材料： 一張loading動畫的gif圖片 基本邏輯： 模態框遮罩 + loading.gif動圖， 預設隱藏模態框 頁面開始傳送Ajax請求資料時，顯示模態框 請求完成，隱藏模態框

JavaScript和jquery取消表單提交

JavaScript取消表單提交： 1、表單提交事件onsubmit，事件函式返回false時，可以取消表單的提交。 用法示例：onsubmit="return func();"或者form.onsubmit=function(){return false;} &l

什麼是 Ajax 和 JSON，它們的優缺點？

AJAX：是一種建立快速動態網頁的技術，可以使網頁實現非同步更新阿賈克斯的優點：1，頁面無重新整理2.使用非同步方式與伺服器通訊3.按需取資料缺點：對搜尋引擎的支援比較，對於一些手機還不是很好的支援ajax json：是為了讓資料格式成為一種標準，更簡單的被Ja

ajax和form方式提交表單資料量大的問題

ajax和form方式提交表單資料量大後臺request中的paramMap只有9999的資料,有一部分資料沒有了.在form中新增屬性enctype="multipart/form-data"使用檔案上傳的方式,不過這樣後臺取表單資料的方法就需要修改.只能迴圈fileIte