1. 首頁
  2. 問答
  3. jquery mobile for mobile without postback

jquery mobile for mobile without postback

2012-11-21 95 views
0

我正在使用jquery的移動控件，我有兩個按鈕保存和取消。點擊保存我想保存數據到數據庫。但我想用jquery和json編寫代碼，以便頁面回發將不要一次又一次地點擊保存按鈕。請給我一些想法如何做到這一點，並保存數據到數據庫。
我的代碼是 jquery mobile for mobile without postback

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title> 
    </title> 
    <link href="jquery.mobile-1.1.1.min.css" rel="stylesheet" type="text/css" /> 


    <link href="my.css" rel="stylesheet" type="text/css" /> 
    <style> 
     /* App custom styles */ 
    </style> 
    <script type="text/javascript" src="jquery.min.js"></script> 

    <script type="text/javascript" src="jquery.mobile-1.1.1.min.js"></script> 

    <script type="text/javascript" src="my.js"></script> 

</head> 

<body> 
    <!-- Items Assessment --> 
    <div data-role="page" data-theme="d" id="page10"> 
     <div data-theme="b" data-role="header"> 
      <a data-role="button" data-transition="fade" href="page22" data-icon="home" 
      data-iconpos="right" class="ui-btn-right"> 
       Home 
      </a> 
      <a data-role="button" data-transition="slide" href="page3.html" data- 
icon="arrow-l" 
      data-iconpos="left" class="ui-btn-left"> 
       Back 
      </a> 
      <h3> 
      </h3> 
      <div class="ui-title"> 
       <img style="QuickMove.png"> 
      </div> 
     </div> 
     <div data-role="content" style="padding: 15px"> 

        <div data-role="fieldcontain"> 
         <label for="selectmenu29"><span style="font-family: times new 
roman,times; font-size: medium;"> 
           <b> 
            Room Type: 
           </b> 
          </span> 
         </label> 
         <select name="selectmenu29" id="selectmenu29" data-theme="b" 
data-mini="true" runat="server"> 
          <option value="option1"> 
           Room Type 
          </option> 
         </select> 
        </div> 


        <div data-role="fieldcontain"> 
         <fieldset data-role="controlgroup" data-mini="true"> 
          <label for="textinput43"><span style="font-family: times 
new roman,times; font-size: medium;"> 
           <b> 
            Building &amp; Floor: 
           </b> 
          </span> 
          </label> 
          <input name="" id="textinput43" placeholder="" value="" 
type="text"> 
         </fieldset> 
        </div> 


        <div data-role="fieldcontain"> 
         <label for="selectmenu31"><span style="font-family: times new 
roman,times; font-size: medium;"> 
           <b> 
            Origin: 
           </b> 
          </span> 
         </label> 
         <select name="selectmenu31" id="selectmenu31" data-theme="b" 
data-mini="true"> 
          <option value="option1"> 
           ALL 
          </option> 
         </select> 
        </div> 

        <div data-role="fieldcontain"> 
         <label for="selectmenu33"><span style="font-family: times new 
roman,times; font-size: medium;"> 
           <strong> 
            Destination: 
           </strong> 
          </span> 
         </label> 
         <select name="selectmenu33" id="selectmenu33" data-theme="b" 
data-mini="true"> 
          <option value="option1"> 
           ALL 
          </option> 
         </select> 
        </div> 

        <div data-role="fieldcontain"> 
         <fieldset data-role="controlgroup" data-type="vertical" data- 
mini="true"> 
          <legend> <span style="font-family: times new roman,times; 
font-size: medium;"> 
           <strong> 
            Transport Mode: 
           </strong> 
          </span> 
          </legend> 
          <input name="radiobuttons1" id="radio1" value="radio1" 
type="radio"> 
          <label for="radio1"> 
           Road 
          </label> 
          <input name="radiobuttons1" id="radio2" value="radio2" 
type="radio"> 
          <label for="radio2"> 
           Air 
          </label> 
          <input name="radiobuttons1" id="radio3" value="radio3" 
type="radio"> 
          <label for="radio3"> 
           Sea 
          </label> 
          <input name="radiobuttons1" id="radio4" value="radio4" 
type="radio"> 
          <label for="radio4"> 
           Rail 
          </label> 
         </fieldset> 
        </div> 



        <div data-role="fieldcontain"> 
         <fieldset data-role="controlgroup" data-mini="true"> 
          <label for="textinput47"><span style="font-family: times 
new roman,times; font-size: medium;" data-mce-style="font-family: times new 
roman,times; font-size: medium;"> 
           <b> 
            Quantity: 
           </b> 
          </span> 
          </label> 
          <input name="" id="textinput47" placeholder="" value="" 
type="text"> 
         </fieldset> 
        </div> 


        <div data-role="fieldcontain"> 
         <fieldset data-role="controlgroup" data-mini="true"> 
          <label for="textinput73"><span style="font-family: times 
new roman,times; font-size: medium;" data-mce-style="font-family: times new 
roman,times; font-size: medium;"> 
           <b> 
            Width 
           </b> 
           <b> 
            ​: 
           </b> 
          </span> 
          </label> 
          <input name="" id="textinput73" placeholder="" value="" 
type="text"> 
         </fieldset> 
        </div> 

        <div data-role="fieldcontain"> 
         <fieldset data-role="controlgroup" data-mini="true"> 
          <label for="textinput74"><span style="font-family: times  

new roman,times; font-size: medium;" data-mce-style="font-family: times new 
roman,times; font-size: medium;"> 
           <strong> 
            Height: 
           </strong> 
          </span> 
          </label> 
          <input name="" id="textinput74" placeholder="" value="" 
type="text"> 
         </fieldset> 
        </div> 
        <div data-role="fieldcontain"> 
         <fieldset data-role="controlgroup" data-mini="true"> 

         </fieldset> 
        </div> 


        <div data-role="fieldcontain"> 
         <label for="selectmenu26"> 
         </label> 

        </div> 

        <div data-role="fieldcontain"> 
         <fieldset data-role="controlgroup" data-mini="true"> 
          <label for="textinput76"> <span style="font-family: times 
new roman,times; font-size: medium;" data-mce-style="font-family: times new  
roman,times; font-size: medium;"> 
           <b> 
            Weight: 
           </b> 
          </span> 
          </label> 
          <input name="" id="textinput76" placeholder="" value="" type="text"> 
         </fieldset> 
        </div> 

        <div data-role="fieldcontain"> 
         <fieldset data-role="controlgroup" data-type="horizontal" data- 

mini="true"> 
          <legend><span style="font-family: times new roman,times; 
font-size: medium;"> 
           <b> 
            Packing Required? 
           </b> 
          </span> 
          </legend> 


         </fieldset> 
        </div> 






        <div class="ui-grid-a" style="width:100%"> 
       <div class="ui-block-a"> 
        <a data-role="button" data-inline="true" id="btn_save" data- 
transition="fade" data-theme="b" 
        href="#page12" data-icon="check" data-iconpos="right" > 
         Save 
        </a> 
       </div> 
       <div class="ui-block-b" > 
        <a data-role="button" data-inline="true" data-transition="fade" 
    data-theme="b" 
        href="#page12" data-icon="delete" data-iconpos="right" 
runat="server"> 
         Cancel 
        </a> 
       </div> 
      </div> 
     </div> 

     </div> 

</div> 
    </div> 
    </body> 
    </html>

來源

2012-11-21 user1840936

回答

0

你可以只讓一個AJAX POST請求做異步。

 
// Encapsulate your input elements inside a form tag like 
// Get all the Parameters from the form 
var formData = $("#myForm").serialize(); 

$.ajax({ 
url:, 
type:"post", 
data:formData, 
success:function(data){ 
    // Actions when the save was successful 
}, 
error:function(object,txtStatus,errorThrown) { 
    // Actions to handle the error thrown 
} 
});

來源

2013-03-25 06:23:39

0

通過AJAX看看this page，jQuery Mobile的職位數據只要有可能。你不需要將數據序列化爲json。

來源

2013-03-25 06:30:36

相關問題

 相關問題