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