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

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

WBOY원래의: 2016-05-16 16:05:111083검색

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

질문은 다음과 같습니다.

a.html 페이지에서 ff9c23ada1bcecdd1a0fb5d5a0f18437의 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 프로그래밍 설계에 도움이 되기를 바랍니다.

성명：

이전 기사：JavaScript 함수 소개 함수 유형_javascript 기술다음 기사：JavaScript 함수 소개 함수 유형_javascript 기술

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

관련 기사