3

我有一个包含 HEAD 部分和 BODY 部分的 HTML 文件 (index.html)。在 BODy 部分中，我有一个带有指向 php 文件的 POST 操作的表单。

如果我将 jQueryMobile 的 CDN 添加到 HEAD 部分...那么 POST 将停止工作。这怎么可能，以及如何避免这种情况？

所以我的头看起来像这样：

<head>
    <title>My Mobile App</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="apple-touch-icon" href="images/icon57.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="images/icon72.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="images/icon114.png" />
    <link rel="apple-touch-startup-image" href="images/icon320.png" />
    <link rel="apple-touch-startup-image" sizes="768x1004" href="images/icon320.png" />
</head>

** if I comment the jquery.mobile script line the POST works **

带有 POST 的 BODY 看起来像这样：

<body>
    <div data-role="page" id="index">
                <header data-role="header" data-position="fixed">
                    <h1>Mobile APP</h1>
                </header>
                <div data-role="content">
                    <b>Login</b>
                    <form method="POST" action="prologin.php">
                        Name: <input type="text" name="name"><br>
                        Password: <input type="password" name="pass"><br>
                        <input type="submit" value="Login" data-inline="true" data-icon="gear">
                    </form>
                </div>

                <footer data-role="footer" data-position="fixed">
                    <h1>bla bla</h1>
                </footer>
    </div>
</body>

现在我的 PHP 文件 prologin.php 更加复杂，但出于调试目的，我将其简化为：

<?php
echo 'name='.$_POST['name'].' and pass='.$_POST['pass'];
?>

因此，当我使用 jQuery.mobile 脚本时，单击登录按钮的结果是一个未定义的页面，如果我查看页面源...它是空的，我的意思是它看起来像：

name= and pass=

，所以没有发布任何内容如果我用 jQuery.mobile 注释脚本行，结果显示它应该是什么，我的意思是：

name=myusername and pass=mypassword

（当然 myusername 和 mypassword 是我在输入框中输入的值）我做错了什么？

同样的页面和代码在另一台服务器上工作得很好。但现在它不再起作用了。有什么问题？原主机也是CENTOS系统，配置基本相同。在工作服务器上我有 PHP 版本 5.3.3 而在这个（不工作）我有 PHP 版本 5.1.6 如何使用 jquery mobile 影响 HTML POST 以使其停止工作？

我的意思是，我该如何解决？

我会尝试更新我的 PHP，但在此服务器上还有其他依赖于此版本的应用程序，我会避免更新。

4

2 回答 2

5

只需将此属性添加到您的表单中：

data-ajax="false"

它将防止 jQuery Mobile 劫持表单提交逻辑。

您的表单应如下所示：

<form method="POST" action="prologin.php" data-ajax="false">
于 2013-07-23T19:26:45.070 回答
0

您可以将 data-ajax="false" 添加到您的表单标记中，但这首先会关闭使用 jquery mobile 的大部分酷功能。

我想出的解决同样问题的解决方案是使用“pagebeforechange”事件来查看正在发出的请求，并使用内置的“changePage”方法将任何获取请求更改为发布请求。

这是我正在做的一个例子。重要的是要注意，在加载 jquery 移动库之前，所有这些代码都放在 head 部分！

编辑：我从我正在使用的项目中删除了不相关的代码部分，它可能在这个过程中被破坏了。您可以获得未编辑的代码版本，在这里可以正常工作，但您必须编辑掉所有不相关的无关项目：

函数 load_mobile_resources()

我在每个移动页面的 head 部分调用上述函数，如下所示：

 <?php
 load_modile_resources();
 ?>

减少且可能损坏的代码如下：

 <script type="text/javascript">

    $(function() {



        // =============================================
        // ALL PAGES
        // =============================================

        // -- pagebeforechange --
        $(document).on( "pagebeforechange", function( event, data ){
            if ( typeof data.toPage === "string" ) {                    
                // intercept a page change request
                // can alter any aspect of this request, if needed                  

                if ('options' in data) {
                    if ('type' in data.options && data.options.type == 'post') {
                        //console.log('type is already post -- NOT converting get to post (it probably just was)');
                    }else{
                        // intercept this get request and make it a post request with the avsession value injected

                        // This is an example of how you can exclude certain pages or paths from the get to post conversion
                        if(! (data.toPage.indexOf('resources/') == -1) ){
                            //console.log('this is a resources request -- NOT converting get to post');

                        // Don't want to mess with the built in popup feature
                        }else if('role' in data.options && data.options.role == 'popup'){
                            //console.log('this is a popup -- NOT converting get to post');

                        // Don't want to mess with the built in handling after a popup is closed
                        }else if(data.options.changeHash == false && data.options.fromHashChange == true){
                            //console.log('this is a popup being closed (or browser fwd/back) -- NOT converting get to post');

                        }else{
                            // -- ok we want to mess with this one ...
                            // -- stop the current process
                            // console.log('converting get request to a post');
                            event.preventDefault();
                            convert_get_to_post(data.toPage, false);
                        }
                    }
                }

            }
        });

    }); // end function


    function convert_get_to_post(urlStr, forceReload){
        postData = new Object;
        var urlObj = $.mobile.path.parseUrl(urlStr);

        // Note:  I commented out, but didn't totally remove, examples of how you can ensure
        //        that certain data is always passed around.  Int his case it was a session
        //        key called avsession

        if(urlObj.search){
            // -- ensure any query string parameters are sent as post data
            var dataStr = urlObj.search.toString();
            dataStr = dataStr.replace(/^\?/,'');
            dataPairs = dataStr.split('&');
            //console.log('here is the dataPairs');
            //console.log(dataPairs);
            //var avsessionFound=0;
            for (x in dataPairs) {
                dataPair = dataPairs[x];
                //console.log(dataPair);
                var dataSet = dataPair.split('=');
                //console.log('here is the dataSet');
                //console.log(dataSet);
                postData[dataSet[0]]=dataSet[1];
                //if(dataSet[0]=='avsession'){
                //  avsessionFound=1;
                    //console.log('avsession found: '+dataSet[1]);
                //}
            }
            //if(avsessionFound==0){
                // inject the avsession value into the post data
                //postData['avsession'] = $.jStorage.get('avsession', '');
            //}
            //console.log('here is the postData');
            //console.log(postData);

            // send this request as a post
            $.mobile.changePage(urlObj.hrefNoSearch, {data: postData, type: 'post', reloadPage: forceReload});

        }else{
            // no query string to worry about jsut send this as a post with the avsession value injected
            //postData['avsession'] = $.jStorage.get('avsession', '');
            $.mobile.changePage(urlObj.hrefNoSearch, {data: postData, type: 'post'});
        }

    }
</script>
于 2013-07-23T19:44:53.570 回答