通过ajax将数据发布到html页面

时间:2015-02-18 03:13:25

标签: javascript html ajax

我是新手,我试图弄清楚是否可以通过ajax将特定数据值(网址和字符串)从一个HTML页面传递到另一个HTML页面。比如说我有"位置1.html"我想将一个特定的值(名称,URL)发送给" List.html"可以在li listview中显示值。我希望能够从许多位置html文件中添加数据(例如"位置2.html","位置2.html"等)。我找到了这个例子,但它使用ASP。

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_post

这是我尝试过的,但我甚至不知道它是否正确。

<html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head>

    <style>
        div.disabled {
        background: lightgrey;
        }
    </style>
    <div data-role="page" id="Location1">
    <div data-role="header" data-position="fixed">
         <h1>Location 1</h1> 
    </div>

    <div role="main" class="ui-content">
    <button class="rbutton" data-icon="star">Disable</button>

    </div>

    <div data-role="footer" data-position="fixed">
        <h1>My page footer</h1>
    </div>

    </div>
    <script>
    $('.rbutton').on('click',function() {
    $(this).prop("disabled",true);
    $.post("List.html",
    {
      name: "Donald Duck",
      city: "Duckburg"
    },
    function(data,status){
        alert("Data: " + data + "\nStatus: " + status);
    });
    });
    </script>

 <html>
 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
 </head>

 <div data-role="page" id="Favorites">

 <div data-role="header" data-position="fixed">
     <h1>Favorites</h1> 
 </div>

 <div role="main" class="ui-content">
    <ul id="favorites_list"></ul>
 </div>

 <div data-role="footer" data-position="fixed">
    <h1>My page footer</h1>
 </div>

 </div>
 </html>

1 个答案:

答案 0 :(得分:0)

您无法使用Javascript在此类网页之间发布数据。

您可以传递网址中的数据: http://example.com/list.html?name=Donald&city=Duckburg

要获得这些值,您可以使用此功能(来自this answer):

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" :      decodeURIComponent(results[1].replace(/\+/g, " "));
}

您还可以使用会话cookie或localStorage在用户在同一窗口中浏览时保留值。查看here了解相关信息。