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

Posted 2023-05-09

【中文标题】如何通过使用 jQuery 移动单击 div 来请求页面内容？

【英文标题】：How to request page content by clicking a div with jQuery mobile?

【发布时间】：2011-11-14 18:55:36

【问题描述】：

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

到目前为止。

【问题讨论】：

这很好，但我会考虑使用适当的 jQM 页面事件，而不是 $(document).ready，尤其是如果您打算将页面添加到您的应用程序中。

【参考方案1】：

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