0

私はjqueryモバイルコントロールを使用しており、保存とキャンセルの2つのボタンがあります。保存をクリックすると、データベースにデータを保存したいのですが、jqueryとjsonを使用してコードを書きたいので、保存のクリックでページのポストバックが何度も発生しないようにしますこれを行う方法とデータベースにデータを保存する方法を教えてください。
私のコードは 

<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>
4

2 に答える 2

0

それを非同期で行うには、ajax post リクエストを作成するだけです。

// 次のようなフォーム タグ内に入力要素をカプセル化します
// フォームからすべてのパラメータを取得します
var formData = $("#myForm").serialize();

$.ajax({
 URL:,
 タイプ：「投稿」、
 データ:フォームデータ、
 成功:関数(データ){
  // 保存成功時のアクション
 }、
 エラー: 関数 (オブジェクト、txtStatus、errorThrown) {
  // スローされたエラーを処理するアクション
 }
});
于 2013-03-25T06:23:39.507 に答える
0

このページを見てください。jquery mobile は、可能な限り ajax 経由でデータを投稿します。そのために、データを json にシリアル化する必要はありません。

于 2013-03-25T06:30:36.637 に答える