Question

我通过使用get函数从inputbox和inputbox1中获取值，并在Page1.html中使用Jquery进行了一些计算，并通过使用jquery的set函数在inputbox2中进行设置来存储变量Z及其值。现在，我想在Page2.html中传递变量Z及其值。请帮我。

Jquery Example
Page1.html

<!DOCTYPE html>
<html>
<body>

<p>Click the button to get a time-based greeting:</p>
INCOME: <input type="text" id="myinput" value="">
DEDUCTION: <input type="text" id="myinput1" value="">
GROSS INCOME: <input type="text" id="myinput2" value="">

<button id="click1">CALCULATE NET INCOME</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$("#click1").click(function a(){
        
		myfunction();
        
    });

   
function myfunction() {
var x, y, z;
var x = $("#myinput").val();
var y = $("#myinput1").val();

	z = x - y;
	 

	$("#myinput2").val(z);
	
		
	
}

</script>

</body>
</html>

Page2.html

<!DOCTYPE html>
<html>
<body>

<p>Click the button to get a time-based greeting:</p>
INCOME: <input type="text" id="myinput3" value="">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>


</script>

</body>
</html>

Answer 1

只需更改一些小功能就是您的myfunction函数：最后添加更多内容

创建表单元素。
设置属性

将数据发送到第二页。

function myfunction() {
var x, y, z;
var x = $("#myinput").val();
var y = $("#myinput1").val();
    z = x - y;
    $("#myinput2").val(z);

var form = document.createElement("form"); // <-- created a form element
    form.setAttribute("yourData", z); //  <--  Here is your value
    form.setAttribute("action", "index2.php"); //  <--  Setting the path where I want to send the data
    form.submit(); //  <--  Sending the data    
}

现在这是index2.php中的一些代码（发送数据的位置）：

<?php
    $redeivedData = $_POST['yourData']; //<-- Your data received 
?>
<!DOCTYPE html>
<html>
<body>

<p>Click the button to get a time-based greeting:</p>
INCOME: <input type="text" id="myinput3" value=" <?php echo $redeivedData; ?>"> <!--I just put your data here .. -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</body>
</html>

请注意，我使用php是因为我们需要服务器端语言才能阅读收到的数据。

Answer 2

您可以为此目的使用cookies或localStorage。

使用Cookie：

在两个页面中重复以下代码：

        function updateCookie(name, value) {
            document.cookie = name + "=" + value + "; expires=" + AddMin(5) + "; path=/";//path is neccessary 4 live this cookie in all similar address.
        };
        function deleteCoockie(name) {
            document.cookie = name + "=; expires=" + (new Date(0)).toUTCString() + ";";
        };
        function readCookie(name) {
            return ((document.cookie.match(new RegExp(name + " ?= ?[^=]*?([^;]*)", "g")) || [""])[0]).substr(name.length + 1);
        };

        function AddMin(m) {
            var d = new Date(); d.setMinutes(d.getMinutes() + m);
            return d.toUTCString();
        };

现在进入您的myfunction：

updateCookie("VarName4Transfer", "DesiredValue4Transfer");

并在目标页面中：

var TransferedVariable2ThisPage = readCookie("VarName4Transfer");
deleteCoockie("VarName4Transfer");

使用jquery

2 个答案: