Ajax将php文件加载到div中

Question

如果我有动态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>

现在，ondiv在一个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);
    });
});

Answer 1

您正在发送“ idvalue”而不是变量。 尝试：

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

var idvalue = ??

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

}）;

Answer 2

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

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

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

您还可以使用data属性将用户的ID保存在dom中。

另一种方式是用户的ID作为存储ID的DIV，以便有一个唯一的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);
        });

    })

})