AJAX执行php而不刷新页面答案

【问题标题】：AJAX execute php without refreshing pageAJAX执行php而不刷新页面
【发布时间】：2015-11-28 13:25:17
【问题描述】：

我不太懂javascript，AJAX，需要快速编写这段代码，所以如果你们能提供帮助，那就太好了！我的网页上有一个点赞按钮，允许用户点赞内容：

html代码如下：

<form action=\"\" method=\"post\" enctype=\"multipart/form-data\"><button name=\"like$i\">like</button></form>

还有php代码：

for ($i = 100; $i >= 0; $i-=1) {
$primid = latest1($i);
$id = $user_data['id'];
if(isset($_POST["like" . $i]) && already_liked($id, $primid)===false) {
    add_like($id,$primid);

}
if(isset($_POST["like" . $i]) && already_liked($id, $primid)===true){
    echo "you have already liked this art";
}
}

所有代码都可以正常工作，但是当我单击“赞”按钮时；页面刷新并不理想......

我知道你可以使用 AJAX 来解决这个问题；我一直在寻找答案，但它们似乎都是用于插入内容等的表单...... 如果我看起来很懒，我很抱歉，但我必须快速完成这个并且暂时没有时间正确学习 ajax：S

提前致谢 =)

【问题讨论】：

标签： javascript php ajax

【解决方案1】：

观察以下代码：

jQuery.ajax({
    url: '/some/file.php', //link to your php
    method: 'POST', // Method, you can use GET too
    data: $('#the-form').serialize() //get form values
}).done(function (response) { //works if response is success
    // Do something with the response
}).fail(function () { //works if response is fail
    // Whoops; show an error.
});

【讨论】：

【解决方案2】：

你可以这样做：

HTML

<form action="" method="post" id="likeForm" onsubmit="return false;">
    <input type="submit" name="like<?php echo $id; ?>" value="Like" />
</form>

旁注： onsubmit="return false;" 用于防止 ajax 中的 uncaught exception: out of memory 错误。

jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $('#likeForm').submit(function(){
            var value = $(this).children().attr('name');
            var param = {value: value};
            $.ajax({
                type: 'POST',
                url: 'yourpage.php',  // change this yourpage.php to point to a page where you want to process your ajax request
                cache: 'false',
                data: param,

                beforeSend: function(){
                    // before send
                },

                success: function(data){
                    // success
                },

                error: function(){
                    // error
                }
            });
        });
    });
 </script>

yourpage.php

<?php

    for($i = 100; $i >= 0; $i-=1) {
        $primid = latest1($i);
        $id = $user_data['id'];
        if(isset($_POST['value']) && $_POST['value'] == "like" . $i && already_liked($id, $primid)===false) {
            add_like($id,$primid);

        }
        if(isset($_POST['value']) && $_POST['value'] == "like" . $i && already_liked($id, $primid)===true){
            echo "you have already liked this art";
        }
    }

?>

【讨论】：

【解决方案3】：

只是为了编译你需要的所有东西：

JavaScript 代码：

function submitFormData(inputForm) {
    jQuery.ajax({
        url: '/some/file.php', //link to your php
        method: 'POST', // Method, you can use GET too
        data: $(inputForm).serialize() //get form values
    }).done(function (response) { //works if response is success
        // Do something with the response
    }).fail(function () { //works if response is fail
        // Whoops; show an error.
    });
}

HTML代码：

<form action="" method="post" enctype="multipart/form-data">
    <button type="button" onclick="submitFormData(this.form);" name="like$i">like</button>
</form>

祝任务执行顺利。

【讨论】：

只需给按钮标签type="button"，否则它将提交表单，默认情况下将视为提交按钮。