Ajax请求只工作在索引页面
问题描述：
我正在使用一个在framework7中构建的移动应用程序模板来开发我的应用程序在cordova上，我需要在每个页面上发出ajax请求以从php web服务获取其数据。我取得了index.html页面一个请求并能正常工作，而不是工作时尝试了同样的要求复制到另一个页面Ajax请求只工作在索引页面
这里是index.html的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
<!-- font Raleway link -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,300,700' rel='stylesheet' type='text/css'>
<!--<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">-->
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"/>
<!-- all css here -->
<!-- Path to Framework7 Library CSS-->
<link rel="stylesheet" href="css/framework7.ios.min.css">
<link rel="stylesheet" href="css/framework7.ios.colors.min.css">
<link rel="stylesheet" href="css/swipebox.css">
<!-- font-awesome.min CSS -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- style CSS -->
<link rel="stylesheet" href="style.css">
<!-- style CSS -->
<link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<!-- login screen start-->
<div class="pagelogin">
<div class="page-content login-screen-content registerbody">
<div class="register-content">
<h3><img src="img/logo2.png" alt=""></h3>
<div style="color:#FFFFFF;width:80%;margin-left:auto;margin-right:auto;text-align:center;background-color:#FF0004;border-radius:10px;padding:5px;margin-bottom:15px;display:none" id="reslt"></div>
<form action="SignIn()" method="post">
<div class="inputbox">
<span>Username:</span><br>
<input type="text" name="UserName" id="UserName" placeholder="Username">
</div>
<div class="inputbox">
<span>Password:</span><br>
<input type="password" name="Password" id="Password" placeholder="***********">
</div>
<div class="inputbox">
<a data-popup=".popup-forgetpass" class="open-popup" href="#">Forget Password?</a>
</div>
<div class="inputbox">
<input style="background: #5c8bf7 none repeat scroll 0 0;border: medium none;color: #ffffff;height:60px;" type="button" class="button button-big" onClick="SignIn()" value="Login">
</div>
</form>
<p></p>
</div>
</div>
</div>
<!-- login screen start-->
<!-- forget password start-->
<script type="text/javascript">
function SignIn() {
var UserName = $("input[name=\"UserName\"]").val();
var Password = $("input[name=\"Password\"]").val();
$.ajax({
type : "POST",
url : 'http://example.com/index.php/mobile/users/login/' + UserName + '/' + Password,
contentType: "application/json; charset=utf-8",
dataType : 'json',
cache: false,
success: function(data) {
if(data == 'true')
{
document.location = "home.html";
}else{
document.getElementById('reslt').style.display = "block";
$("#reslt").html('Username or password incorrect..!');
}
},
error: function(req, err){ console.log('my message : ' + err); }
});
};
</script>
<div class="popup popup-forgetpass">
<div class="registerbody">
<a href="#" class="close-popup closebutton"><i class="fa fa-times"></i></a>
<div class="register-content">
<h3><img src="img/logo2.png" alt=""></h3>
<form action="#">
<div class="inputbox">
<span>Email:</span><br>
<input type="email" name="password" placeholder="[email protected]">
</div>
<div class="inputbox">
<button class="button button-big">Remember me</button>
</div>
</form>
<p></p>
</div>
</div>
</div>
<!-- forget password end-->
<!-- resister popup start-->
<div class="popup popup-register">
<div class="registerbody">
<a href="#" class="close-popup closebutton"><i class="fa fa-times"></i></a>
<div class="register-content">
<h3><img src="img/logo2.png" alt=""></h3>
<form action="#">
<div class="inputbox">
<span>Full Name:</span><br>
<input type="text" name="fulname" placeholder="Full Name">
</div>
<div class="inputbox">
<span>Username:</span><br>
<input type="text" name="username2" placeholder="Username">
</div>
<div class="inputbox">
<span>Email:</span><br>
<input type="email" name="email" placeholder="[email protected]">
</div>
<div class="inputbox">
<span>Password:</span><br>
<input type="password" name="password2" placeholder="***********">
</div>
<div class="inputbox">
<button class="button button-big">Sign Up</button>
</div>
</form>
</div>
</div>
</div>
<!-- resister popup start-->
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/Push.js"></script>
<!-- Js -->
<!-- jquery-1.11.3.min js -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Path to Framework7 Library JS -->
<script type="text/javascript" src="js/framework7.min.js"></script>
<!--jquery.swipebox js -->
<script type="text/javascript" src="js/jquery.swipebox.js"></script>
<!-- Path to your app js -->
<script type="text/javascript" src="js/my-app.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
</body>
</html>
这里是另一页是请求没有工作
<!-- We don't need full layout here, because this page will be parsed with Ajax-->
<!-- Top Navbar-->
<div class="navbar">
<div class="navbar-inner">
<div class="left"><a href="#" class="back link"><i class="fa fa-angle-left"></i><span>Back</span></a></div>
<div class="center sliding"><h4>Sign In</h4></div>
<div class="right">
<!-- Right link contains only icon - additional "icon-only" class--><a href="#" data-panel="right" class="link icon-only open-panel"> <i class="fa fa-navicon"></i></a>
</div>
</div>
</div>
<div class="pages">
<!-- Page, data-page contains page name-->
<div data-page="about" class="page">
<!-- Scrollable page content-->
<div class="page-content">
<div class="content-block">
<div class="content-block-inner">
<div class="register-content">
<h3><img src="img/logo2.png" alt=""></h3>
<div style="color:#FFFFFF;width:80%;margin-left:auto;margin-right:auto;text-align:center;background-color:#FF0004;border-radius:10px;padding:5px;margin-bottom:15px;display:none" id="reslt"></div>
<form action="SignIn()" method="post">
<div class="inputbox">
<span>Username:</span><br>
<input type="text" name="UserName" id="UserName" placeholder="Username">
</div>
<div class="inputbox">
<span>Password:</span><br>
<input type="password" name="Password" id="Password" placeholder="***********">
</div>
<div class="inputbox">
<a data-popup=".popup-forgetpass" class="open-popup" href="#">Forget Password?</a>
</div>
<div class="inputbox">
<input style="background: #5c8bf7 none repeat scroll 0 0;border: medium none;color: #ffffff;height:60px;" type="button" class="button button-big" onClick="SignIn()" value="Login">
</div>
</form>
</div>
</div>
<script type="text/javascript">
function SignIn() {
var UserName = $("input[name=\"UserName\"]").val();
var Password = $("input[name=\"Password\"]").val();
$.ajax({
type : "POST",
url : 'http://example.com/index.php/mobile/users/login/' + UserName + '/' + Password,
contentType: "application/json; charset=utf-8",
dataType : 'json',
cache: false,
success: function(data) {
if(data == 'true')
{
document.location = "home.html";
}else{
document.getElementById('reslt').style.display = "block";
$("#reslt").html('Username or password incorrect..!');
}
},
error: function(req, err){ console.log('my message : ' + err); }
});
};
</script>
</div>
</div>
</div>
</div>
任何想法尝试？
答
- 添加您的脚本后 jQuery包含。
- 使用
onSubmit="SignIn()"而不是action="SignIn()" -
request didn't work编辑您的表格，哪些错误出现？ - 在第二页加载jQuery？
没有错误出现也没有发生。 –
在第二页我试图加载jQuery，但没有任何希望 –
在SignIn（）中放置一个console.log（）并检查它是否被调用。我认为这个功能从来没有被解雇。 – Grork