Ajax将php文件加载到div中

时间:2014-06-23 23:11:31

标签: php jquery

Hy我有动态div包含搜索结果,我想代码如果点击其中一个div而不是加载php文件到某个div。 问题是我无法通过发送POST / GET请求来弄清楚如何做到这一点。

这是搜索结果:

<div id="srcfrd">
    <img src='webimgs/nopf.jpg'>
    <span class="name"><h4>&nbsp;fullname</h4></span>
    <input type="text" id="friendid" value="1" hidden>
    <br/>
</div>
<div id="srcfrd">
    <img src='webimgs/nopf.jpg'>
    <span class="name"><h4>&nbsp;fullname</h4></span>
    <input type="text" id="friendid" value="2" hidden>
    <br/>
</div>
<div id="srcfrd">
    <img src='webimgs/nopf.jpg'>
    <span class="name"><h4>&nbsp;fullname</h4></span>
    <input type="text" id="friendid" value="3" hidden>
    <br/>
</div>

现在,在其中一个div上点击它应该在另一个div中加载一个php文件。 php文件应根据POST / GET id请求打印好友详细信息。

这是我的js(它是加载php但我需要添加id值来显示正确的用户)

    $('#srcfrd').click(function() {
    $.get('showfriend.php', function(data) {
        $('#middelfeedbody').html(data);
    });
});

这里我被困了

    $('#srcfrd').click(function() {

    var idvalue = ??

    $.get('showfriend.php?id="+idvalue+"', function(data) {
        $('#middelfeedbody').html(data);
    });
});

2 个答案:

答案 0 :(得分:0)

您正在发送“idvalue”而不是您的变量。试试:

$('#srcfrd').click(function() {

var idvalue = ??

$.get('showfriend.php?id='+idvalue, function(data) {
    $('#middelfeedbody').html(data);
});

});

答案 1 :(得分:0)

我想您正在尝试添加隐藏字段以将用户的ID存储在dom中。

// Wrong
<input type="text" id="friendid" value="1" hidden>

// Good
<input type="hidden" name="friendid" value="1">

您还可以使用data attribute在dom中保存用户ID。

另一种方法是将用户的id存储为div的ID,以便拥有唯一的ID,然后使用名为user的类来设置样式和javascript。

<div class="user" id="user-1">
    <img src='webimgs/nopf.jpg'>
    <span class="name"><h4>&nbsp;fullname</h4></span>
    <input type="text" name="friendid" value="1" hidden>
    <br>
</div>
<div class="user" id="user-2">
    <img src='webimgs/nopf.jpg'>
    <span class="name"><h4>&nbsp;fullname</h4></span>
    <input type="text" name="friendid" value="2" hidden>
    <br>
</div>
<div class="user" id="user-3">
    <img src='webimgs/nopf.jpg'>
    <span class="name"><h4>&nbsp;fullname</h4></span>
    <input type="text" name="friendid" value="3" hidden>
<br>
</div>

然后在javascript中我们将事件绑定到user类的每个出现。

$(function(){

    $('.user').click(function(){

        // Retrieve the id from the hidden field.
        var id_value = $(this).find('input[name="friendid"]').val();

        // Retreive the user's ID from the ID attribute
        // var id_value = this.id.substring(5); // let's get rid of the prefix

        // if you're using a data attribute
        // may be data-user
        // then we'll use this instead
        // var id_value = $(this).data('user');

        $.get('showfriend.php', {id: id_value}, function(data) {
            $('#middelfeedbody').html(data);
        });

    })

})