jQuery Mobile：如何正确提交表单数据

Posted 2023-05-09

技术标签:

【中文标题】jQuery Mobile：如何正确提交表单数据【英文标题】：jQuery Mobile: How to correctly submit form data 【发布时间】：2013-02-18 18:28:57 【问题描述】：

这是一个 jQuery Mobile 问题，但它也与纯 jQuery 有关。

如何在没有页面转换的情况下将表单数据发布到设置为表单操作属性的页面。我正在构建 phonegap 应用程序，我不想直接访问服务器端页面。

我尝试了几个示例，但每次表单都将我转发到目标 php 文件。

【问题讨论】：

你能提供你最近失败的代码尝试吗？ @user2001897 你找到解决这个问题的方法了吗？ 【参考方案1】：

简介

这个例子是使用 jQuery Mobile 1.2 创建的。如果您想查看最近的示例，请查看此article 或更复杂的one。您会发现 2 个工作示例进行了详细解释。如果您有更多问题，请在文章 cmets 部分中提问。

表单提交是一个常见的 jQuery Mobile 问题。

实现这一点的方法很少。我将列出其中的几个。

示例 1：

如果您使用 phonegap 应用程序并且不想直接访问服务器端 php，这是最好的解决方案。如果您想创建 phonegap ios 应用，这是一个正确的解决方案。

index.html

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <style>
        #login-button 
            margin-top: 30px;
                
    </style>
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>    
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
    <div data-role="page" id="login" data-theme="b">
        <div data-role="header" data-theme="a">
            <h3>Login Page</h3>
        </div>

        <div data-role="content">
            <form id="check-user" class="ui-body ui-body-a ui-corner-all" data-ajax="false">
                <fieldset>
                    <div data-role="fieldcontain">
                        <label for="username">Enter your username:</label>
                        <input type="text" value="" name="username" id="username"/>
                    </div>                                  
                    <div data-role="fieldcontain">                                      
                        <label for="password">Enter your password:</label>
                        <input type="password" value="" name="password" id="password"/> 
                    </div>
                    <input type="button" data-theme="b" name="submit" id="submit" value="Submit">
                </fieldset>
            </form>                              
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>
    <div data-role="page" id="second">
        <div data-theme="a" data-role="header">
            <h3></h3>
        </div>

        <div data-role="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">
            <h3>Page footer</h3>
        </div>
    </div>
</body>
</html>

check.php：

<?php
    //$action = $_REQUEST['action']; // We dont need action for this tutorial, but in a complex code you need a way to determine ajax action nature
    //$formData = json_decode($_REQUEST['formData']); // Decode JSON object into readable PHP object

    //$username = $formData->'username'; // Get username from object
    //$password = $formData->'password'; // Get password from object

    // Lets say everything is in order
    echo "Username = ";
?>

index.js：

$(document).on('pagebeforeshow', '#login', function()  
        $(document).on('click', '#submit', function()  // catch the form's submit event
        if($('#username').val().length > 0 && $('#password').val().length > 0)
            // Send data to server through ajax call
            // action is functionality we want to call and outputJSON is our data
                $.ajax(url: 'check.php',
                    data: action : 'login', formData : $('#check-user').serialize(), // Convert a form to a JSON string representation
                        type: 'post',                   
                    async: true,
                    beforeSend: function() 
                        // This callback function will trigger before data is sent
                        $.mobile.showPageLoadingMsg(true); // This will show ajax spinner
                    ,
                    complete: function() 
                        // This callback function will trigger on data sent/received complete
                        $.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
                    ,
                    success: function (result) 
                            resultObject.formSubmitionResult = result;
                                        $.mobile.changePage("#second");
                    ,
                    error: function (request,error) 
                        // This callback function will trigger on unsuccessful action                
                        alert('Network error has occurred please try again!');
                    
                );                   
         else 
            alert('Please fill all nececery fields');
                   
            return false; // cancel original event to prevent form submitting
        );    
);

$(document).on('pagebeforeshow', '#second', function()     
    $('#second [data-role="content"]').append('This is a result of form submition: ' + resultObject.formSubmitionResult);  
);

var resultObject = 
    formSubmitionResult : null

【讨论】：

【参考方案2】：

我遇到了同样的问题，我从 index.html 调用另一个 .php 页面。 .php 页面正在保存和检索数据并绘制饼图。但是我发现当添加饼图绘制逻辑时，页面根本不会加载。罪魁祸首是从我的 index.html 调用 .php 页面的行：

<form action="store.php" method="post">

如果我将其更改为：

<form action="store.php" method="post" data-ajax="false">

，它会正常工作的。

【讨论】：

【参考方案3】：

关于使用 PHP 和发布数据

使用 data-ajax = "false" 是<form> 标签上的最佳选择。

【讨论】：

【参考方案4】：

问题是 JQuery Mobile 使用 ajax 提交表单。解决这个问题的简单方法是禁用 ajax 并将表单作为普通表单提交。

简单的解决方案：form action="" method="post" data-ajax="false"

【讨论】：

现有的两个答案已经提到了这个修复。用评论详细说明其中一个答案可能更合适。

以上是关于jQuery Mobile：如何正确提交表单数据的主要内容，如果未能解决你的问题，请参考以下文章

jQuery Mobile - 如何将表单提交到 URL 并传输到 DOM 内的另一个页面？

jQuery Mobile-jquery Mobile 怎么用ajax提交表单

jQuery Mobile，表单提交时的页面更改

jQuery mobile - 当我提交表单时切换页面

jquery mobile 表单提交图片/文件上传