如何通过使用jQuery mobile单击div来请求页面内容?

时间:2011-09-11 14:39:21

标签: php jquery ajax mobile jquery-mobile

我正在尝试从回调页面(php)获取数据并使用 jQuery mobile 将其加载到html div中。如果用户点击另一个div,就会发生这种情况。

我实际得到的是

$.('#home-button').bind('vclick', function( e ) {
    $.get('homeCallback.php',function(data){
        $('#displayContent').append(data).trigger('create');
    },'html');
});

其中#home-button是应该触发事件的div,#displayContent是应该放入内容的div。 请求也应该能够传递一些参数。与homeCallback.php?param=1类似,但它也可以使用post方法。 回调不一定只是html,回调php脚本也可能提供JSON数据或任何东西。

我不是JS破解,所以我在解决这个问题时遇到了问题。谢谢你的帮助!

修改 所以我自己找到了解决方案:

$(document).ready(function() {
    $.ajaxSetup ({
        cache: false
    });

    var ajaxLoader = '<img src="images/ajax-loader.gif" alt="loading.." />'; 
    var loadUrl = "homeCallback.php";  

    $('#home-button1').click(function(){
        $('#displayContent').toggle('fast', function() {
            $(this).html(ajaxLoader);
            $(this).toggle('fast', function() {
                $.get(loadUrl + '?option1',function(data){
                    $('#displayContent').html(data);
                },'html');                  
            });
        });
    });

    $('#home-button2').click(function(){
        $('#displayContent').toggle('fast', function() {
            $(this).html(ajaxLoader);
            $(this).toggle('fast', function() {
                $.get(loadUrl + '?option2',function(data){
                    $('#displayContent').html(data);
                },'html');                  
            });
        });
    });
});

这就是homeCallback.php所做的......

<?php
if( isset($_GET["option1"] ))
    echo "option1";
if( isset($_GET["option2"] ))
    echo "option2";

到目前为止。

1 个答案:

答案 0 :(得分:0)

$.('#home-button').bind('click', function() {
    $.ajax({
        url: "homeCallback.php",
        type: "POST",
        data: ({param: 1, param2: 2}),
        success: function(html){
            $("#displayContent").html(html);
        }
    });
});