Question

为什么提交后会刷新？我使用jquery和jqm我无法解决这个问题。在应用程序的第一页中，我使用相同的代码进行登录并正常工作。

完整代码 - create-ticket.html：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.4.3.js"></script>
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.min.css" />
        <title>Ticket</title>
    </head>
    <body>
        <div data-role="page">
            <div data-role="header">
                <h1>Create Ticket</h1>
            </div>
            <div class="ui-content" data-role="main">
            <a href="main.html"><button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-back">Back</button></a>
            <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-camera" onclick="setUpCamera();">Camera</button>
            <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-grid" onclick="getImage();">Gallery</button>
            <img style="display:none; width: 100%;" id="myImage" src="" />
            <form>
                <div class="ui-field-contain">
                <label for="name" style="font-weight: bold">Name</label><input id="name" name="name" type="text">
                <label for="description" style="font-weight: bold">Description</label><textarea id="description" cols="30" name="description" rows="10"></textarea>
                <label for="quantity" style="font-weight: bold">Quantity</label><input id="quantity" type="text" name="quantity" />
                <label for="price" style="font-weight: bold">Price RM</label><input id="price" type="text" name="price" />
                </div>
                <input type="submit" value="Submit" data-inline="true" />
            </form>
            </div>
            <div data-role="footer">
                <h1>Developed by Group 10</h1>
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script>
        $('form').submit(function(){
            var postData = $(this).serialize();

            $.ajax({
                type: 'POST',
                data: postData,
                url: 'http://test_post/create_ticket.php',
                success: function(data){
                    console.log(data);
                    alert('Your comment was successfully added');
                },
                error: function(){
                    console.log(data);
                    alert('There was an error adding your comment');
                }
            });

            return false;
        });
        </script>
    </body>
</html>

Answer 1

试试这个。删除表单标记，然后在用户单击按钮时创建触发器。

HTML

<div class="ui-field-contain">
        <label for="name" style="font-weight: bold">Name</label><input id=
        "name" name="name" type="text"> <label for="description" style=
        "font-weight: bold">Description</label>
        <textarea cols="30" id="description" name="description" rows="10">
</textarea> <label for="category" style="font-weight: bold">Category</label>
<label for="quantity" style=
        "font-weight: bold">Quantity</label><input id="quantity" name=
        "quantity" type="text"> <label for="price" style=
        "font-weight: bold">Price RM</label><input id="price" name="price"
        type="text">
    </div><input id="submitButton" data-inline="true" type="submit" value="Submit">

JS

$("#submitButton").click(function() {
    var postData = $(this).serialize();
    $.ajax({
        type: 'POST',
        data: postData,
        url: 'http://mylink/create_ticket.php',
        success: function(data) {
            console.log(data);
            alert('Your comment was successfully added');
        },
        error: function() {
            console.log(data);
            alert('There was an error adding your comment');
        }
    });
});

Answer 2

使用preventDefault()

$('form').submit(function(e){
    e.preventDefault();
    //Your code
    ....................    
});

Cordova提交不同页面的数据

2 个答案: