Question

我已经阅读过其他有类似问题的用户的帖子，但他们似乎都想让ajax替换页面上的内容。

在我的情况下，我的ajax只是与用户点击＆＃39;喜欢＆＃39;在图像上。我只是希望他们喜欢注册，没有页面刷新。任何人都可以告诉我下面的代码有什么问题吗？

<script>
    function submitLikeForm()  {
        var form = jQuery("#like_form");
            $.ajax({ 
                type: "GET", 
                url: form.attr("action"), 
                data: form.serialize(), 
                success:   function() 
            });
        }
    </script>

这是我的表单（它在大型PHP文件中回显，所以我不想粘贴整个文件，只是相关部分）：

<form name='like_form' id='like_form' action='liked_button.php'>
   <input type='image' img src='https://i.imgur.com/pMmYaYM.jpg' class='like_button button' name='like_button' onClick='return submitLikeForm()'>
   <input type='hidden' name='hidden_image' class='hidden_image' value='$image_info'>
   <input type='hidden' name='hidden_folder' class='hidden_folder' value='$random_directory'>
   <input type='hidden' name='hidden_name' class='hidden_name' value='$image_name'>
   <input disabled type='text' name='total_likes' class='total_likes' value='$liked_count'>
 </form>

将表单发送到php页面，我可以在其中获取值并将其存储在表格中。

Answer 1

您的成功函数中存在语法错误。尝试在浏览器中使用开发人员控制台来捕获这样的错误。此外，我认为您需要添加return false以确保页面不会重新加载，具体取决于您调用此函数的方式。

试试这个：

function submitLikeForm()  {
    var form = $("#like_form");

    $.ajax({ 
    type: "GET", 
    url: form.attr("action"), 
    data: form.serialize(), 
    success:   function() {
        //
    }
    });

    // dont actually submit through to the action url
    return false;
}

Answer 2

您的问题是图像输入类型的默认提交操作。

对于ajax回调，我建议使用链接而不是“提交”按钮。

<a class='like_button'><img ... /></a>

当你使用jQuery时，将你的事件绑定到它的click事件并阻止默认操作。

jQuery('.like_button').on('click', function(e) {
    e.preventDefault();
    submitLikeForm();
});

Answer 3

<script type="text/javascript">
    function submitLikeForm()  {
        event.preventDefault();
        var form = jQuery("#like_form");
            $.ajax({ 
                type: "GET", 
                url: form.attr("action"), 
                data: form.serialize(), 
                success:   function() 
            });
        }
    </script>

了解有关event.preventDefault（）click here

的更多信息

如何在没有页面刷新的情况下提交Jquery ajax函数？

3 个答案: