我正在构建一个HTML5移动应用程序。我以下列方式使用面板作为页面：
<div class="upage panel" id="account_page" data-header="af-header-4" data-footer="none">
我还有一个如下所示的登录页面：
<div class="upage panel" id="login_page" data-header="af-header-1" data-footer="none">
<div class="upage-outer">
<header class="container-group inner-element uib_w_5" data-uib="app_framework/header" data-ver="1" id="af-header-1">
<h1>Login</h1>
<div class="widget-container wrapping-col single-centered"></div>
<div class="widget-container content-area horiz-area wrapping-col left with-back"><a class="button" id="backButton" href="#mainpage">Back</a>
</div>
<div class="widget-container content-area horiz-area wrapping-col right"></div>
</header>
<div id="login_pagesub" class="upage-content ">
<div class="grid grid-pad urow uib_row_6 row-height-6" data-uib="layout/row" data-ver="0">
<div class="col uib_col_8 col-0_12-12" data-uib="layout/col" data-ver="0">
<div class="widget-container content-area vertical-col">
<div class="widget uib_w_17 d-margins login_status_lbl" data-uib="media/text" data-ver="0" id="login_status_lbl">
<div class="widget-container left-receptacle"></div>
<div class="widget-container right-receptacle"></div>
<div>
<p>Please login to view your account.</p>
</div>
</div><span class="uib_shim"></span>
</div>
</div>
<span class="uib_shim"></span>
</div>
<div class="grid grid-pad urow uib_row_7 row-height-7" data-uib="layout/row" data-ver="0">
<div class="col uib_col_9 col-0_12-12" data-uib="layout/col" data-ver="0">
<div class="widget-container content-area vertical-col">
<div class="table-thing with-label widget uib_w_13 d-margins" data-uib="app_framework/input" data-ver="1">
<input class="wide-control" placeholder="Username" type="text" id="l_username" name="l_username">
</div>
<div class="table-thing with-label widget uib_w_14 d-margins" data-uib="app_framework/input" data-ver="1">
<input class="wide-control" placeholder="Password" type="text" id="l_password" name="l_password">
</div><span class="uib_shim"></span>
</div>
</div>
<span class="uib_shim"></span>
</div>
<div class="grid grid-pad urow uib_row_8 row-height-8" data-uib="layout/row" data-ver="0">
<div class="col uib_col_10 col-0_12-12" data-uib="layout/col" data-ver="0">
<div class="widget-container content-area vertical-col">
<a class="button widget uib_w_15 d-margins" data-uib="app_framework/button" data-ver="1" id="login_btn" onclick="verifyInfo()">Login</a><a class="button widget uib_w_16 d-margins" data-uib="app_framework/button" data-ver="1" id="proceed_btn"
href="#account_page" data-transition="fade">Proceed</a>
<span class="uib_shim"></span>
</div>
</div>
<span class="uib_shim"></span>
</div>
</div>
</div>
<!-- /upage-outer -->
</div>
因此，当用户输入他们的用户名和密码时，他们会点击登录按钮，该按钮附带一个onClick方法来调用jQuery函数。
<a class="button widget uib_w_15 d-margins" data-uib="app_framework/button" data-ver="1" id="login_btn" onclick="verifyInfo()">Login</a>
function verifyInfo(){
var uName=document.getElementById("l_username").value;
var pWord=document.getElementById("l_password").value;
$.ajax(
{
type: 'POST',
url: 'http://localhost/TestWebService/Verify.asmx/UserVerify',
data: "{ \"username\":\""+uName+"\",\"password\":\""+pWord+"\"}",
contentType: 'application/json; charset=utf-8',
dataType: 'json',
//dataFilter: function(data){alert(data);},
success: function(data) {
var response = JSON.stringify(data.d);
if(response == "true"){
alert("true");
$("#account_page").panel("open");
}
else{
document.getElementById('output_u').innerHTML="The Username or Password is incorrect, please try again.";
}
},
error: function(data){alert('Failed on '+data.d);}
});
}
基于此我对这应该如何工作的假设是onClick的登录按钮，用户名和密码被发送到webservice，一个布尔值被发回，我使用json.stringify在比较条件语句中使用。如果已验证（true），则应打开面板（页面）#account_page。但是，这不会发生，而是在XDK控制台中出现以下错误：
Uncaught TypeError: Object [object Object] has no method 'panel'
关于我可以采用哪些不同方法来实现所需功能的任何想法？
提前感谢任何和所有回复。
修改：添加了account_page div以提高可见度
<div class="upage panel" id="account_page" data-header="af-header-4" data-footer="none">
<div class="upage-outer">
<header class="container-group inner-element uib_w_8" data-uib="app_framework/header" data-ver="1" id="af-header-4">
<h1>Account</h1>
<div class="widget-container wrapping-col single-cente red"></div>
<div class="widget-container content-area horiz-area wrapping-col left with-back"><a class="button" id="backButton" href="#mainpage">Back</a>
</div>
<div class="widget-container content-area horiz-area wrapping-col right"></div>
</header>
<div id="account_pagesub" class="upage-content ">
<div class="grid grid-pad urow uib_row_9 row-height-9" data-uib="layout/row" data-ver="0">
<div class="col uib_col_11 col-0_6-12" data-uib="layout/col" data-ver="0">
<div class="widget-container content-area vertical-col">
<div class="widget uib_w_18 d-margins currbalance_label" data-uib="media/text" data-ver="0" id="currbalance_label">
<div class="widget-container left-receptacle"></div>
<div class="widget-container right-receptacle"></div>
<div>
<p>Current Balance:</p>
</div>
</div><span class="uib_shim"></span>
</div>
</div>
<div class="col uib_col_12 col-0_6-12" data-uib="layout/col" data-ver="0">
<div class="widget-container content-area vertical-col">
<div class="widget uib_w_19 d-margins currbalance_datapoint" data-uib="media/text" data-ver="0" id="currbalance_datapoint">
<div class="widget-container left-receptacle"></div>
<div class="widget-container right-receptacle"></div>
<div>
<p>$38.99</p>
</div>
</div><span class="uib_shim"></span>
</div>
</div>
<span class="uib_shim"></span>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
而不是.panel，请尝试使用$.ui.loadContent("#account_page",false,false,"slide");
你也不应该使用本地主机＆＃39;作为请求URL，请使用您的本地IP地址。