如何使用javascript將json數據從一個html頁面傳遞到另一html頁面？

Question

我必須傳遞將信息插入datbase表后生成的Json數據，現在我必須將此信息傳遞給其他頁面BookingConformation.html 。

例如，我們將獲得表格服務器Welcome Mr / Mittel先生/女士感謝您預訂上門服務，您的預訂ID為1。所以請告訴我如何通過javascript將表格服務器中的信息傳遞給我，我必須將此信息傳遞至其他頁面，請幫助我。

腳本

<script>
    $(document).ready(function(){
        $("#register-form").validate({
            rules: {
                userName: "required",                           
                email: {
                    required: true,
                    email: true
                },                                              
                userContactNumber: "required"                       
            },
            messages: {
                userName: "Please enter your Name",
                userContactNumber: "Please enter your Mobile number",                           
                email: "Please enter a valid email address",                                           
            },
            submitHandler: function(form) {

                var uName = $('#userName').val();   
                var mailId = $('#email').val();                 
                var mobNum = $('#userContactNumber').val();

                $.ajax({                
                    url:"http://localhost/bookRoom/book.php",
                    type:"POST",
                    dataType:"json",
                    data:{type:"booking", Name:uName, Email:mailId,  Mob_Num:mobNum},                                   
                    ContentType:"application/json",
                    success: function(response){
                    //alert(JSON.stringify(response));
                    //alert("success");                     
                    alert(response);
                    var globalarray = [];
                    globalarray.push(response);
                    window.localStorage.setItem("globalarray", JSON.stringify(globalarray));
                    window.location.href = 'BookingConformation.html';
                },
                    error: function(err){                           
                        window.location.href = 'error.html';
                    }
                });
                return false; // block regular submit
            }
        });
    });
</script>

服務器代碼

    <?php
    header('Access-Control-Allow-Origin: *');//Should work in Cross Domaim ajax Calling request
    mysql_connect("localhost","root","7128");
    mysql_select_db("service");

    if(isset($_POST['type']))
    {
        if($_POST['type']=="booking"){
            $name = $_POST ['Name'];    
            $mobile = $_POST ['Mob_Num'];
            $mail = $_POST ['Email'];               
            $query1 = "insert into customer(userName, userContactNumber, email) values('$name','$mobile','$mail')";
            $query2 = "insert into booking(cust_email, cust_mobile, cust_name) values('$mail','$mobile','$name')";          

            $result1=mysql_query($query1);          
            $result2=mysql_query($query2);
            $id=mysql_insert_id();
            $value = "Welcome Mr/Mrs ".$name."  Thanks for booking home services your booking id is =  ".$id;
            echo json_encode($value);
        }
    }
    else{
        echo "Invalid format";
    }
?>

BookingConformation.html

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function myFunction() {
                 var globalarray = [];
                 var arrLinks =[];
                 arrLinks = JSON.parse(window.localStorage.getItem("globalarray"));
                 document.getElementById("booking").innerHTML = arrLinks;
             }
        </script>
    </head>
    <body>  
        <p id="booking" onclick="myFunction()">Click me to change my HTML content (innerHTML).</p>
    </bod

Y>

Answer 1

如果這是您真正的服務器端代碼，則...完全不安全。 您永遠不應將用戶發布的變量直接傳遞到查詢中。

$query2 = "insert into booking(cust_email, cust_mobile, cust_name) values('$mail','$mobile','$name')";

至少使用“ mysql_real_escape_string”對值進行轉義，或使用准備好的語句。 並且...不再使用mysql，請使用mysqli，它與您所使用的幾乎相同，但不會很快被棄用。

另外，您正在json編碼一個不需要進行json編碼的字符串，它只是一段文本，並且不是有效的json代碼。 這就是為什么@SimarjeetSingh Panghlia答案對您不起作用的原因。

而不是json_encoding該值，而是對結構化數組進行編碼。

$response = array( "status" => true );

if(isset($_POST['type']))
    {
        if($_POST['type']=="booking"){
            $name = mysql_real_escape_string( $_POST ['Name'] ));    
            $mobile = mysql_real_escape_string($_POST ['Mob_Num']);
            $mail = mysql_real_escape_string($_POST ['Email']);               
            $query1 = "insert into customer(userName, userContactNumber, email) values('$name','$mobile','$mail')";
            $query2 = "insert into booking(cust_email, cust_mobile, cust_name) values('$mail','$mobile','$name')";          

            $result1 = mysql_query($query1);          
            $result2 = mysql_query($query2);
            $id = mysql_insert_id();

            $response["message"] = "Welcome Mr/Mrs ".$name."  Thanks for booking home services your booking id is =  ".$id;/* make sure you strip tags etc to prevent xss attack */

        }
    }
    else{
        $response["status"] = false;
        $response["message"] = "Invalid format";
    }

    echo json_encode($response);

    /* Note that you are making the query using ContentType:"application/json", */

這意味着無論查詢是否成功，都應使用json進行響應。 我還建議使用一個名為jStorage的簡單jQuery插件，該插件可輕松獲取/設置對象而無需序列化它們。

Answer 2

你可以試試這個

在首頁上聲明變量

<script type="text/javascript">
    var globalarray = [];
    globalarray.push(response.d);
     window.localStorage.setItem("globalarray", JSON.stringify(globalarray));
</script>

在第二頁上調用該變量

<script type="text/javascript">
         var globalarray = [];
         var arrLinks =[];
         arrLinks = JSON.parse(window.localStorage.getItem("globalarray"));
        console.log(arrLinks);
</script>

Answer 3

您可以使用sessionStorage來存儲和檢索JSON數據。

var complexdata = [1, 2, 3, 4, 5, 6];

// store array data to the session storage
sessionStorage.setItem("list_data_key",  JSON.stringify(complexdata));

//Use JSON to retrieve the stored data and convert it 
var storedData = sessionStorage.getItem("complexdata");
if (storedData) {
  complexdata = JSON.parse(storedData);
}

要在使用后刪除sessionStorage數據，請使用sessionStorage.clear();

如何使用javascript將json數據從一個html頁面傳遞到另一html頁面？

問題描述

3 個解決方案

解決方案1
1 2015-02-12 05:32:02

解決方案2
0 2015-02-12 04:51:50

解決方案3
0 2015-02-12 05:00:51

如何使用javascript將json數據從一個html頁面傳遞到另一html頁面？

問題描述

3 個解決方案

解決方案1 1 2015-02-12 05:32:02

解決方案2 0 2015-02-12 04:51:50

解決方案3 0 2015-02-12 05:00:51

解決方案1
1 2015-02-12 05:32:02

解決方案2
0 2015-02-12 04:51:50

解決方案3
0 2015-02-12 05:00:51