javascript - 提交多个输入字段 jQuery/PHP 的最佳方式？

Question

我正在尝试将我的类似系统升级到更实用的东西。

目前我有<a href="https://mysite/dash.php?like=<? echo $postid; ?>">Like</a>然后在 PHP 中有类似的东西:如果设置了 $_GET['like']，则获取用户 ID 和帖子 ID 并调用一个名为 like_status($post_id,$user_id); 的函数

不过，我一直在做这样的事情:

状态显示的主要部分:

<script src="https://mysite/stuff/jquery.min.js"></script>
<script src="https://mysite/stuff/js/global.js"></script>
<input type="hidden" id="postid" value="<? echo $postid; ?>">
<input type="hidden" id="userid" value="<? echo $session_user_id; ?>">
<span id="like-button" style="color:red;">Like</span>

Javascript/jQuery:

$('span#like-button').on('click', function(){
    var postid = $('input#postid').val();
    var userid = $('input#userid').val();
    if (postid != ''){
        $.post('https://mysite/stuff/ajax/like.php', {postid: postid, userid: userid}, function(data){
            document.getElementById('like-button').innerHTML = data;
        });
    }
});

最后，我的 like.php 脚本:

<?php
if(isset($_POST['postid']) === true && empty($_POST['userid']) === false){
    include $_SERVER['DOCUMENT_ROOT'].'/stuff/init.php';
    if(is_liked($_POST['postid'],$_POST['userid']) === true){
        unlike_status($_POST['postid'],$_POST['userid']);
        echo 'Like';
    } else {
        like_status($_POST['postid'],$_POST['userid']);
        echo 'Unlike';
    }
}
?>

我的不同/相似函数运行良好。我现在有一个像系统一样工作的系统，但它让用户每次都刷新和一切，这非常不方便。我想使用此方法自动更新点赞按钮，而无需刷新页面或进行任何操作。这样，用户可以在页面上喜欢多个东西，而不必每次都刷新页面。我还认为它更安全，因为 $_GET['like'] 可以更改为任何 id，即使用户不是其他用户的 friend ，或者状态不存在。

我的问题:

好的，所以每当我点击赞按钮时，都没有任何反应。我也在一个单独的页面中尝试过这个(将类型从隐藏更改为文本，并手动输入数据)但它也没有用。 javascript 似乎没有执行。我在谷歌浏览器中打开了控制台，当我点击按钮时，没有任何反应。点赞不会发布到数据库，按钮也不会更新。

谁能解释我做错了什么？可能会指出正确的方向来解决这个问题？

---

更新

我尝试在一个页面中组合 Javascript/HTML 以获得动态变量。

这是针对每个状态显示的内容:

<script src="https://mysite/stuff/jquery.min.js"></script>
    <script type="Javascript">
$(document.body).on('click','#like-button', function(
        var postid<? echo $status_id; ?> = $('input#postid<? echo $status_id; ?>').val();
        var userid<? echo $status_id; ?> = $('input#userid<? echo $status_id; ?>').val();
        $.post('https://mysite/stuff/ajax/like.php', {postid: postid<? echo $status_id; ?>, userid: userid<? echo $status_id; ?>}, function(data){
            document.getElementById('like-button').innerHTML = data;
        });
));
</script>
<input type="hidden" id="postid<? echo $status_id; ?>" value="<? echo $status_id; ?>">
<input type="hidden" id="userid<? echo $status_id; ?>" value="<? echo $session_user_id; ?>">
<span id="like-button" style="color:red;"><? if(isliked($status_id,$session_user_id) === true){ ?>Unlike<? } else { ?>Like<?}?></span>

我仍然无法让它执行脚本。

Answer 1

您始终可以只使用 $('#fomrm_id').serialize()，在 POST 数据 中一次获取所有表单字段。它会刷新页面，因为您必须将 return false; 添加到 jQuery.click 事件的末尾。

如果这些元素是动态创建的(或者在你的情况下脚本在创建之前被执行)，你需要设置适当的 .on 事件，这个不好，因为它绑定(bind)到可能不存在的元素。

应该是:

$(document.body).on('click','#like-button', function(){..}); - 将它绑定(bind)到 文档主体，它始终存在，但如果匹配，将检查第二个参数中的选择器。