> 웹 프론트엔드 > JS 튜토리얼 > Pages_javascript 기술 간 값을 전송하는 JavaScript 방법

Pages_javascript 기술 간 값을 전송하는 JavaScript 방법

WBOY
풀어 주다: 2016-05-16 16:05:11
원래의
1091명이 탐색했습니다.

이 기사의 예에서는 JavaScript가 페이지 간 값 전송을 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

질문은 다음과 같습니다.

a.html 페이지에서

의 onsubmit 이벤트는 foo() 메소드를 호출하여 b.html 페이지를 열고 동시에 매개변수를 b.html에 전달합니다. foo() 메소드에서는 b.html 페이지에 변수 매개변수를 전달해야 합니다. b.html 페이지는 매개변수 값을 허용하지만 서버측 기술은 사용할 수 없습니다.

해결 코드는 다음과 같습니다.

a.html 페이지는 다음과 같습니다.

<html>
<head>
  <title> demo </title>
  <meta name="Author" content="xugang" />
  <script type="text/javascript">
  function foo(){
   var a ="abc"; // a为变量值
   var str = "b.html&#63;id="+a+";";
   //alert(document.frm.action);
   //方案一(无效)
   // document.frm.action = str;
   //方案二(无效)
   // window.location.href = str;
   //方案三(有效)
   window.location.replace(str);
   return false;
  }
 </script>
</head>
<body>
   <FORM name="frm" method="get" 
   onsubmit = "return foo()" >
      <INPUT TYPE="SUBMIT" />
   </FORM>
</body>
</html>
로그인 후 복사

참고: b.html 페이지가 미리 존재해야 합니다.

b.html 매개변수 값을 얻는 코드는 다음과 같습니다.

b.html 코드 부분

var getQueryString = function(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  var r = window.location.search.substr(1).match(reg);
  if (r != null) return r[2]; return "";
}
로그인 후 복사

보충:

myjs.js 코드:

function foo(){ 
    var str = "abc"; 
    //document.forms[0].hid.value = str; 
    var frm = window.event.srcElement; 
    frm.hid.value = str; 
    return true; 
}
로그인 후 복사

a.html 코드:

<html> 
<head> 
 <title> demo </title> 
 <meta name="Author" content="xugang" /> 
 <script src="myjs.js"></script> 
</head> 
<body> 
 <FORM name="frm" METHOD="get" ACTION="b.html" 
 onsubmit="return foo()"> 
  <INPUT TYPE="hidden" id="hid" name="hid"> 
  <INPUT TYPE="submit" value="提交"> 
 </FORM> 
</body> 
</html>
로그인 후 복사

참고: b.html 페이지에 값을 전달할 때 b.html 페이지가 이미 존재해야 합니다!

b.html 코드:

<HTML> 
 <HEAD> 
  <TITLE> New Document </TITLE> 
 </HEAD> 
 <BODY> 
  <SCRIPT LANGUAGE="JavaScript"> 
   document.write(decodeURIComponent(location.search.substr(3)));
  </SCRIPT> 
 </BODY> 
</HTML>
로그인 후 복사

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿