2016-04-26 38 views
0

enroll.html中有一個按鈕。頁面的代碼如下:如何在JavaScript中調用背景中的另一個頁面

<HTML> 
<HEAD> 
<META http-equiv=Content-Language content=en-us> 
<META http-equiv=Content-Type content="text/html; charset=windows-1252"> 
<style TYPE="text/css"> 
    <!-- BODY    { font-family:arial,helvetica; margin-left:5; margin-top:0} 
      A     { color:#FF5500; text-decoration:underline} 
      A:hover,A:active { color:#0055FF; text-decoration:underline} 
     --> 
</style> 
<Script Language="JavaScript"> 
<!-- 
function inStrGrp(src,reg) 
{ 
    var regex=new RegExp("[" + reg + "]","i"); 
    return regex.test(src); 
} 

function check() 
{ 
    var uname=document.scan.elements[0].value 
    var bError=false 

    if (uname.length==0) 
    { 
     window.alert("Name is required.\n") 
     return false 
    } 
    if (uname.indexOf("\\")>=0) 
     bError=true 

    if (inStrGrp(uname,'/.:*?"<>| ')) 
     bError=true 

    if (bError) 
    { 
     window.alert('User name can not contain the following characters:\n \\/. :*?"<>|\n') 
     return false 
    } 
    else 
     return true 
} 
--> 
</Script> 

<title>Enroll New Fingerprint.</title> 
</HEAD> 
<BODY onload="document.scan.name.focus();"> 
<center> 
<table border="0" width="800"> 
    <tr> 
    <td width="100%" colspan="3"> 
     <p>&nbsp;</p> 
     <p><u><b>Online Demonstration</b></u></p> 
     <div align="center"> 
     <table border="1" width="100%" height="260"> 
     <tr> 
      <td width="20%" align="center" rowspan="2"> 
       <p>&nbsp;</p> 
       <p><font color="#0055FF">Enroll</font></p> 
       <p><a href="logon.asp">Logon</a></p> 
       <p>&nbsp;</p> 
      </td> 
      <td width="80%" height="30"> 
       <b><i>Enroll Finger</i></b> 
      </td> 
     </tr> 
     <tr> 
      <td width="80%"> 
     <p>Thanks for your registration. You can enroll two fingers for the name you registered.</p> 

     <form name="scan" method="POST" action="http://10.11.201.170/data/sultan/enroll.asp" onsubmit="return check()"> 
     <p>Please input your name: <input type="text" name="name" size="20">&nbsp;&nbsp;&nbsp;&nbsp;</p> 
     <p>If you want to enroll 2 fingers, please check the box. <input type="checkbox" name="chk2Finger" value="2">&nbsp;&nbsp;</p> 
     <p>&nbsp; 
     <input type="submit" value=" Enroll " name="btnEnroll"></p> 
     </form> 

      </td> 
     </tr> 
     </table> 
     </div> 
     <p>&nbsp;</p> 
    </td> 
    </tr> 
    <tr> 
    <td width="100%" colspan="3"> 
     <p align="center"><small>Copyright © 2004 Futronic 
     Technology Company Limited. All Rights Reserved.</small></td> 
    </tr> 
</table> 
</center> 
</BODY> 
</HTML> 

當我按下注冊按鈕,我想加載背景verify.asp命名頁面。我怎樣才能做到這一點 ?

verify.asp的代碼如下:

<HTML> 
<HEAD> 
<META http-equiv=Content-Language content=en-us> 
<META http-equiv=Content-Type content="text/html; charset=windows-1252"> 
<style TYPE="text/css"> 
    <!-- BODY    { font-family:arial,helvetica; margin-left:5; margin-top:0} 
      A     { color:#FF5500; text-decoration:underline} 
      A:hover,A:active { color:#0055FF; text-decoration:underline} 
     --> 
</style> 
<Script Language="VBScript" Src="GetInfo.vbs"> 
</Script> 
<title>Enroll Fingerprint.</title> 
</HEAD> 
<BODY Onload="GetLearnModel()";> 
<center> 
<table border="0" width="800"> 
    <tr> 
    <td width="100%" colspan="3"> 
     <p>&nbsp;</p> 
     <p><u><b>Online Demonstration</b></u></p> 
     <div align="center"> 
     <table border="1" width="100%" height="260"> 
     <tr> 
      <td width="20%" align="center" rowspan="2"> 
       <p>&nbsp;</p> 
       <p><a href="enroll.asp">Enroll</a></p> 
       <p><a href="logon.asp">Logon</a></p> 
       <p>&nbsp;</p> 
      </td> 
      <td width="80%" height="30"> 
       <b><i>Enroll Finger</i></b> 
      </td> 
     </tr> 
     <tr> 
      <td width="80%"> 
     <Form name="scan" method="Post" action="famenroll2.asp?name=<%=Request("name")%>&check=<%=Request("check")%>&finger=<%=Request("finger")%>"> 
     <Input type="hidden" name="LearnModel" value=""> 
     <Input type="text" name="SlNo" value=""> 
     </Form> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
      <p><font size="5" color="#ff0000"><%=Request.Form("SlNo")%></font><font size="5">&nbsp;&nbsp;Enroll Successfully!</font></p> 
      </td> 
     </tr> 
     </table> 
     </div> 
     <p>&nbsp;</p> 
    </td> 
    </tr> 
    <tr> 
    <td width="100%" colspan="3"> 
     <p align="center"><small>Copyright © 2004 Futronic 
     Technology Company Limited. All Rights Reserved.</small></td> 
    </tr> 
</table> 
<% Dim Conn,strSQL,objExec,NumOfRecords,se_name,finger 
      cust_no=Request.QueryString("name") 
      Set Conn = Server.Createobject("ADODB.Connection") 
      Conn.Open "Driver={Oracle in XE};DBQ=xe;UID=biotpl;PWD=biotpl;"   

      'Query for the customer entry in FP_ENROLL Table 
      strSQL2 = "INSERT INTO TEST values(1,'OS')" 

       Set objExec = Conn.Execute(strSQL2) 

      'Query for the no of fingers to be taken for a customer in FP_FINGER_SETUP Table     
      'Set objExec = Conn.Execute("select FINGURE_NO NoF from BIOTPL.FP_FINGER_SETUP where USER_TYPE=" & Request.QueryString("cust_type")) 
      'NumOfFingers = objExec("NoF") 

      'Conn.Close() 
      Set objExec = Nothing 
      Set Conn = Nothing 
%> 
</center> 
</BODY> 
</HTML> 
+0

你這是什麼意思負荷在後臺頁面?你能澄清一個littile –

回答

1

添加ID在這條線

<input type="submit" value=" Enroll " name="btnEnroll"> 

所以就變成:

<input type="submit" value=" Enroll " id="buttonEnroll" name="btnEnroll"> 
<div id="result"></div> 

,比寫這個劇本

<script> 
     $("#buttonEnroll").on('click',function(e){ 
      e.preventDefault(); 
      $("#result").load("verify.asp"); 
      alert("Page loading completed"); 
     }); 
    </script> 

#result is for loading that page in result id div. 

希望有助於!

添加這是你的頭標記

<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script> 
+0

我將在哪裏將Ajax /測試,HTML頁? –

+0

我只是改變了它verify.asp,你可以改變你想要的頁面,將其造成的div – hemanjosko

+0

請給出一個警告消息,這樣我可以理解,頁面加載完成 –

1

Ajax可用於在背景加載頁。 jQuery supports AJAX功能,它比第一個鏈接中描述的更容易。如果您的目的是驗證註冊,則需要解析AJAX請求中出現的回覆。先前的解析答案可以在here找到。

的基本步驟是

  1. 的ID添加到您的表單提交按鈕(說「註冊」)

  2. 包括jQuery JavaScript庫到您的項目通過添加標題下面 < script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>‌

3.內置腳本標籤,使用類似的方法如下。

$("#enroll").click(function(){ 
    $.ajax({ 
     url: "verify.asp", 
     success: function(result){ 
         /* Parse the result and do whatever you want to do here */ 
     } 
     }); 
}); 
+0

我需要的代碼。我怎樣才能做到這一點 ? –

+1

@ C.Bandara請更新您的答案,而不是添加代碼作爲評論。您的答案被標記爲「低質量」,如果它保持這種狀態,可能會在不久的將來被刪除。 –

+0

請不要推薦w3schools.com:https://meta.stackoverflow.com/questions/280478/why-not-w3schools-com – 2016-04-26 08:36:50

0

//1st way:: 
 

 
function doFunction(event) { 
 
    event.preventDefault(); 
 
    //here you can load verify.aspx by using 
 
    $("#resultdiv").load("verify.aspx", {}, function (data) { 
 
    alert("loading complete"); 
 
    }); 
 
} 
 

 

 
//2nd way: 
 
//By using ajax call 
 

 
$('#enroll').on('click', 'input[type="submit"]', function(e){ 
 
    e.preventDefault(); 
 
    $.post('http://mywebsite/verify.aspx',{ 'data': $('#txt_search').val() } ,function(data) { 
 
    console.log(data); // this would show you the returned data. 
 
    }); 
 
});
You can do it in 2ways: 
 

 
HTML: 
 

 
1st way:: 
 
========= 
 
Add onclick to your enroll button. 
 
<input type="submit" value="Enroll" onclick="doFunction();" id="enroll" name="btnEnroll"></p> 
 
<div id="resultdiv"> 
 
    </div> 
 

 
2nd way: 
 
======== 
 
By using ajax call

+0

但形式的作用是http://10.11.201.170/data/sultan /enroll.asp。所以當我點擊註冊按鈕時,頁面重定向到http://10.11.201.170/data/sultan/enroll.asp。我怎樣才能阻止呢? –

+0

嘗試我的代碼在哪裏我添加e.preventDefault()停止重定向的東西 – hemanjosko

+0

你在哪裏添加了e.preventDefault()?我沒有看到任何東西。 –

0

這裏內部修改enroll.html改良的js

<HTML> 
 
<HEAD> 
 
<META http-equiv=Content-Language content=en-us> 
 
<META http-equiv=Content-Type content="text/html; charset=windows-1252"> 
 
<style TYPE="text/css"> 
 
    <!-- BODY    { font-family:arial,helvetica; margin-left:5; margin-top:0} 
 
      A     { color:#FF5500; text-decoration:underline} 
 
      A:hover,A:active { color:#0055FF; text-decoration:underline} 
 
     --> 
 
</style> 
 
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> 
 

 
<title>Enroll New Fingerprint.</title> 
 
</HEAD> 
 
<BODY> 
 
<center> 
 
<table border="0" width="800"> 
 
    <tr> 
 
    <td width="100%" colspan="3"> 
 
     <p>&nbsp;</p> 
 
     <p><u><b>Online Demonstration</b></u></p> 
 
     <div align="center"> 
 
     <table border="1" width="100%" height="260"> 
 
     <tr> 
 
      <td width="20%" align="center" rowspan="2"> 
 
       <p>&nbsp;</p> 
 
       <p><font color="#0055FF">Enroll</font></p> 
 
       <p><a href="logon.asp">Logon</a></p> 
 
       <p>&nbsp;</p> 
 
      </td> 
 
      <td width="80%" height="30"> 
 
       <b><i>Enroll Finger</i></b> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td width="80%"> 
 
     <p>Thanks for your registration. You can enroll two fingers for the name you registered.</p> 
 

 
     <form name="scan" > 
 
     <p>Please input your name: <input type="text" name="txtName" size="20" id="txtname">&nbsp;&nbsp;&nbsp;&nbsp;</p> 
 
     <p>If you want to enroll 2 fingers, please check the box. <input type="checkbox" name="chk2Finger" value="2">&nbsp;&nbsp;</p> 
 
     <p>&nbsp; 
 
     <input type="button" value="Enroll" name="btnEnroll" id="btnEnroll"></p> 
 
     </form> 
 

 
      </td> 
 
     </tr> 
 
     </table> 
 
     </div> 
 
     <p>&nbsp;</p> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td width="100%" colspan="3"> 
 
     <p align="center"><small>Copyright © 2004 Futronic 
 
     Technology Company Limited. All Rights Reserved.</small></td> 
 
    </tr> 
 
</table> 
 
</center> 
 
</BODY> 
 
</HTML> 
 

 
<script type="text/javascript"> 
 

 
\t \t function inStrGrp(src,reg) 
 
\t \t { 
 
\t \t \t var regex=new RegExp("[" + reg + "]","i"); 
 
\t \t \t return regex.test(src); 
 
\t \t } 
 

 
$(document).ready(function(){ 
 

 
\t $('#btnEnroll').on('click',function(){ 
 
\t \t var uname = $('#txtname').val(); 
 
\t \t 
 
\t var bError=false 
 

 
    if (uname.length==0) 
 
    { 
 
     window.alert("Name is required.\n") 
 
     return false 
 
    } 
 
    if (uname.indexOf("\\")>=0) 
 
     bError=true 
 

 
    if (inStrGrp(uname,'/.:*?"<>| ')) 
 
     bError=true 
 

 
    if (bError) 
 
    { 
 
     window.alert('User name can not contain the following characters:\n \\/. :*?"<>|\n') 
 
     return false 
 
    } 
 
    else 
 
\t \t var url = "enroll.asp?name="+uname; 
 
\t \t window.location = url; 
 
     return true 
 

 
\t 
 
\t 
 
\t }); 
 

 

 

 
}); 
 

 

 
</script>

變化在JavaScript代碼的網址,並把你的。如果你的URL看起來像

http://10.11.201.170/data/sultan/enroll.asp

這則

變化,像下面

var url = "http://10.11.201.170/data/sultan/enroll.asp?name="+uname; 

和你enroll.asp將保持不變腳本部分變量網址。

希望這將有助於。

相關問題