Jquery mobile 如何将数据动态呈现到jquery移动页面中_Jquery Mobile

Jquery mobile 如何将数据动态呈现到jquery移动页面中

jquery-mobile

Jquery mobile 如何将数据动态呈现到jquery移动页面中,jquery-mobile,Jquery Mobile,我对jQuery Mobile真的很陌生。我正在尝试制作一个有两个页面的简单应用程序。Page1是用户输入搜索数据的地方，Page2是显示结果的地方。非常感谢您的帮助 <!DOCTYPE HTML> <html> <head> <title>Example</title> <script src="jquery-mobile/jquery-1.7.2.min.js"/> <script src="jquery-mob

我对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>


例子
$（文档）.ready（函数（）{
$（“#搜索”）。单击（函数（）{
//进行一些处理并以JSON的形式获取数据
var data=someotherfunction（$（“#searchfor”）.val（）；
//现在让我们假设我想把这些数据传递到第2页。怎么做？
//我在做什么
$（'#page1'）.hide（）；
$（'#page2'）.show（）；//但它会删除页面中的所有样式。
});
});
例子
页脚
第三页
您的搜索返回：{data.value}
页脚

您不妨将第二页设为外部页面，并在其上执行搜索逻辑：

$(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;
});

然后在第二个页面中，您只需接收

$\u 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*/ }
    });

});

$（文档）。在（'click'，'#search'，函数（）{
$.ajax({
url:“/path/to/my script.php”
数据：{search:$（'#searchfor'）.val（）}，
数据类型：“json”，
成功：功能（数据）{
//假设对象数组（JSON）中的响应
var输出=[]；
对于（变量i=0，len=data.length；i'+数据[i].name+''+数据[i].description+''）；
}
var$page=$（'#page2'）.children（'.ui content'）.append（''+output.join（''）+''）；
$.mobile.changePage（$page）；
},
错误：函数（jqXHR、textStatus、errorThrown）{/*别忘了处理错误*/}
});
});

您使用的jQuery Mobile版本已经超过一年（而且根本不稳定）：太棒了！多谢。我更喜欢第一种方法，但当我这样做时，我看到第1页刷新了两次，尽管我重新加载了page:false。另外，我正在将my-script.php设置为html，因此当我指向该my-script.html时，它不会在文档加载后执行jquery函数。@lazyguy我更新了我的答案，但我忘记添加

return false

到

的末尾，单击事件处理程序，这样链接的默认行为将被忽略。这就是造成你双重导航的原因。不要对#search
元素使用click
事件，而是对my script.html
文档中的伪页面使用pageinit
事件。这样，代码将在结果页初始化时运行。您必须将{search:$（'#searchfor'）.val（）}
更改为引用GET变量send to the page的内容。