Php 来自同一ajax调用的不一致返回
如果从菜单页面(test_menu.html)调用提交页面(test_page2.html),则始终返回空白页面。如果直接调用提交页面(test_page2.html),则返回正常值 很抱歉向那里提交大量内容,内容尽可能简单 有没有人有相同的经验,知道这是一个bug还是我的代码中遗漏了什么?现场演示可从以下位置访问: testament.html的内容Php 来自同一ajax调用的不一致返回,php,jquery,Php,Jquery,如果从菜单页面(test_menu.html)调用提交页面(test_page2.html),则始终返回空白页面。如果直接调用提交页面(test_page2.html),则返回正常值 很抱歉向那里提交大量内容,内容尽可能简单 有没有人有相同的经验,知道这是一个bug还是我的代码中遗漏了什么?现场演示可从以下位置访问: testament.html的内容 <html> <head> <meta name="viewport" content="
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>TEST</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div data-role="page" id="createcamp">
<div data-theme="b" data-role="header" data-position="fixed">
<h1 id="header" data-theme="e">Menu</h1>
</div>
<div class="cntrBlock">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Menu</li>
<li><a href="test_page2.html">Goto Page 2</a></li>
</ul>
</div>
<div data-theme="b" data-role="footer" data-position="fixed">
<h1 id="footer">Copyright © ABC</h1>
</div>
</div>
</body>
</html>
测验
菜单
菜单
版权及副本;基础知识
test_page2.html的内容
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>TEST</title>
<script type="text/javascript">
$(document).ready(function(){
$(function () {
$('#form1').submit(function(e) {
e.preventDefault();
$.ajax({
cache: false,
type: "POST",
dataType: "json",
data: $('#form1').serialize(),
url: $('#form1').attr('action'),
complete: function (HttpRequest, textStatus) {
console.log(HttpRequest);
$obj = JSON.parse(HttpRequest.response);
$('#loginname').val($obj.login);
}});
return false;
});
});
});
</script>
</head>
<body>
<div data-role="page" id="createcamp">
<div data-theme="b" data-role="header" data-position="fixed">
<h1 id="header" data-theme="e">Submit Page</h1>
</div>
<div data-role="content">
<div class="campBlock">
<div id="message"></div>
<form action="test_php.php" method="POST" id="form1" name="form1">
<fieldset>
<label for="login" id="login_msg">Login</label>
<input type="text" name="loginname" id="loginname" />
<input type="submit" value="Submit"/>
</fieldset>
</form>
</div>
</div>
</div>
</body>
</html>
测验
$(文档).ready(函数(){
$(函数(){
$('#form1')。提交(函数(e){
e、 预防默认值();
$.ajax({
cache:false,
类型:“POST”,
数据类型:“json”,
数据:$('#form1')。序列化(),
url:$('#form1').attr('action'),
完成:功能(HttpRequest、textStatus){
日志(HttpRequest);
$obj=JSON.parse(HttpRequest.response);
$('#loginname').val($obj.login);
}});
返回false;
});
});
});
提交页面
登录
test_php.php的内容
<?php
$arr = array('login' => 'pass', 'message' => 'Well done!');
echo json_encode($arr);
?>
您的测试页面2.html应该如下所示 从中删除head、html和body标记 测试内容\u page2.html
<script type="text/javascript">
$(function () {
$('#form1').submit(function(e) {
e.preventDefault();
$.ajax({
cache: false,
type: "POST",
dataType: "json",
data: $('#form1').serialize(),
url: $('#form1').attr('action'),
complete: function (HttpRequest, textStatus) {
console.log(HttpRequest);
$obj = JSON.parse(HttpRequest.response);
$('#loginname').val($obj.login);
}
});
return false;
});
});
</script>
<div data-role="page" id="createcamp">
<div data-theme="b" data-role="header" data-position="fixed">
<h1 id="header" data-theme="e">Submit Page</h1>
</div>
<div data-role="content">
<div class="campBlock">
<div id="message"></div>
<form action="test_php.php" method="POST" id="form1" name="form1">
<fieldset>
<label for="login" id="login_msg">Login</label>
<input type="text" name="loginname" id="loginname" />
<input type="submit" value="Submit"/>
</fieldset>
</form>
</div>
</div>
</div>
$(函数(){
$('#form1')。提交(函数(e){
e、 预防默认值();
$.ajax({
cache:false,
类型:“POST”,
数据类型:“json”,
数据:$('#form1')。序列化(),
url:$('#form1').attr('action'),
完成:功能(HttpRequest、textStatus){
日志(HttpRequest);
$obj=JSON.parse(HttpRequest.response);
$('#loginname').val($obj.login);
}
});
返回false;
});
});
提交页面
登录
当您从test\u menu.html
转到test\u page2.html
时,它是通过ajax调用加载的,而不是普通的HTTP(我认为这是jQuery mobile功能)。看起来只有页面正文通过此调用加载,因此您没有表单提交处理程序,因为它位于head
标记内
如果在浏览器中直接转到test_page2.html
,它将通过正常的HTTP请求加载,并在head
标记中使用表单提交处理程序script
有关jQuery移动导航的更多信息:
因此,我建议:
中移动带有提交处理程序的脚本
标记,以便可以通过jQuery移动ajax导航例程加载它$(document).ready
)您可以尝试$.getJSON(test_php.php?parameter=“+参数,函数(数据){})不知道为什么需要删除所有html、头部和身体,因为test_page2.html是一个外部html文件,但不是test_menu.html的一部分。尝试过但仍然返回一个空白页。感谢vbo,我阅读了移动导航并解决了问题。由于我没有足够的声誉,我无法在8小时内回答自己的问题。我将发布最终版本8小时后,我将在这里进行编辑。编辑:我已经添加了一些建议,说明如何在您的特定情况下解决此问题。是的,我也会这样做。现在我面临另一个挑战。这是一项如此简单的编码工作。是的,对不起。我是stackexchange的新手。谢谢提醒。