Question

我是jQuery Mobile的新手。我想用两页制作一个简单的应用程序。 Page1是用户输入搜索数据的地方，Page2是显示结果的位置。任何帮助是极大的赞赏。

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>

<script src="jquery-mobile/jquery-1.7.2.min.js"/>
<script src="jquery-mobile/jquery.mobile-1.0a3.min.js"/>
<link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>

<script> 

$(document).ready(function() {
    $('#search').click(function() {
    //do some processing and get the data in form of JSON
        var data = someotherfunction($("#searchfor").val());     
    //now lets say I want to pass this data to page2. How to do this?

        // I was doing
        $('#page1').hide();
        $('#page2').show(); // but it removes all the styling from the page.

    });
});

</script>

</head> 
<body> 

<div data-role="page" id="page1">
    <div data-role="header">
        <h1>Example</h1>
    </div>

    <div data-role="content">   
       <input name="searchfor" type="text" id="searchfor"/>

       <input type="button" id="search" data-theme="b" value="search"/>
    </div>

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>


<div data-role="page" id="page2">
    <div data-role="header">
        <h1>Page Three</h1>
    </div>
    <div data-role="content">   
        <p>Your search returned this: {data.value} </p>     
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>

</body>
</html>

Answer 1

您也可以将第二页设为外部页面并在其上执行搜索逻辑：

$(document).on('click', '#search', function () {
    $.mobile.changePage('/path/to/my-script.php?search=' + encodeURIComponent($('#searchfor').val(), { reloadPage : true });

    //prevent the default behavior of the click event
    return false;
});

然后在第二页中，您可以收到$_GET变量，进行搜索并输出结果。

否则，您正在考虑使用$.ajax()通过AJAX请求类似的响应：

$(document).on('click', '#search', function () {
    $.ajax({
        url      : '/path/to/my-script.php'
        data     : { search : $('#searchfor').val() },
        dataType : 'json',
        success  : function (data) {

            //assuming that the response in an array of objects (JSON)
            var output = [];
            for (var i = 0, len = data.length; i < len; i++) {
                output.push('<li><h3>' + data[i].name + '</h3><p>' + data[i].description + '</p></li>');
            }

            var $page =  $('#page2').children('.ui-content').append('<ul data-role="listview">' + output.join('') + '</ul>');

            $.mobile.changePage($page);
        },
        error    : function (jqXHR, textStatus, errorThrown) { /*don't forget to handle errors*/ }
    });

});

如何动态地将数据呈现到jquery移动页面

1 个答案: