jquery mobile破坏了我的POST

时间:2013-07-23 19:22:08

标签: php jquery-mobile post

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

如果我向HEAD部分添加jQueryMobile的CDN ......那么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脚本时,单击Login按钮的结果是一个未定义的页面,如果我查看页面源...它是空的,我的意思是它看起来像:

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,但在这台服务器上有其他依赖此版本的应用程序,我会避免更新。

2 个答案:

答案 0 :(得分:5)

只需将此属性添加到表单中即可:

data-ajax="false"

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

您的表单应如下所示:

<form method="POST" action="prologin.php" data-ajax="false">

答案 1 :(得分:0)

您可以添加数据-ajax =&#34; false&#34;到你的表单标签,但它首先关闭了使用jquery mobile的大部分酷炫功能。

我提出的克服同样问题的解决方案是使用&#39; pagebeforechange&#39;用于查看正在发出的请求的事件,并使用内置的“更改页面”将任何获取请求更改为发布请求。方法

这是我正在做的一个例子。需要注意的是,在加载jquery移动库之前,所有这些代码都放在头部中!

编辑: 我从我正在使用它的项目中删除了不相关的代码部分,它可能在此过程中被破坏了。你可以获得一个在这里工作得很好的代码的未编辑版本,但你必须编辑出所有无关的无关项目:

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