如何通过使用 jQuery 移动单击 div 来请求页面内容？

Question

我正在尝试从回调页面 (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";

到目前为止。

Answer 1

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