0

我正在使用 jquery 移动控件，我有两个按钮保存和取消。单击保存时，我想将数据保存到数据库。但我想使用 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 发布请求来异步执行此操作。

// 将您的输入元素封装在一个表单标签中，例如
// 从表单中获取所有参数
var formData = $("#myForm").serialize();

$.ajax({
 网址：，
 类型：“帖子”，
 数据：表格数据，
 成功：功能（数据）{
  // 保存成功时的动作
 },
 错误：函数（对象，txtStatus，errorThrown）{
  // 处理抛出的错误的操作
 }
});
于 2013-03-25T06:23:39.507 回答
0

看看这个页面，jquery mobile 尽可能通过 ajax 发布数据。您不需要为此将数据序列化为 json。

于 2013-03-25T06:30:36.637 回答