0

我有一段 ajax 脚本试图为我发布一个表单。目前没有ajax，表单将正确发布并发送数据。我想要的是一个 ajax 帖子，因此它不会刷新页面并且它也会发布数据。一页上有多个表格。

我的 js 脚本如下所示：

        function post_form(action)
        {
            var token = $('.forms').attr('id');
            var itemId = $('.forms').find('input.id').val();
            var instaUrl = 'https://api.instagram.com/v1/media/'+itemId+'/likes?access_token='+token+'';
            console.log(token);
            console.log(itemId);
            console.log(instaUrl);
            var dataString = token;
            $.ajax({
                type: "POST",
                url: instaUrl,
                data: dataString,
                crossDomain: true,
                dataType: 'jsonp',
                beforeSend: function()
                {
                   $("#loading").fadeIn("slow");
                    if ( action == "like" )
                    {
                        $("#open"+comment_id).hide();
                        $("#loading_like_or_unlike"+comment_id).html('<img src="loader.gif" align="absmiddle" alt="Loading...">');
                    }
                    else if ( action == "unlike" )
                    {
                        $("#close"+comment_id).hide();
                        $("#loading_like_or_unlike"+comment_id).html('<img src="loader.gif" align="absmiddle" alt="Loading...">');
                    }
                    else {}

                },
                success: function(response)
                {
                    if ( action == "like" )
                    {
                        $("#close"+comment_id).show();
                    }
                    else if ( action == "unlike" )
                    {
                        $("#open"+comment_id).show();
                    }
                    else {}
                    $("#loading").fadeOut("slow");
                }
            });
            event.preventDefault();
        }

$(document).ready(function() {
    $('button.like').each(function() {
        $(this).on('click', function(){
            post_form();
        });
    });
});

现在在我的标记中，我有一个在隐藏输入值中有一个 id 的表单。发布后的表单会查找 id 并使用带有类似和不像开关的大小写切换器。它使用 instagram php 库来连接并获取图像的数据，如您所见：

try {

    $instagram = new Instagram\Instagram;

    $instagram->setAccessToken($_SESSION['instagram_access_token']);
    $token = $_SESSION['instagram_access_token'];
    //$clientID = $_SESSION['client_id'];

    $current_user = $instagram->getCurrentUser();
    $tag = $instagram->getTag('folkclothing');
    $media = $tag->getMedia(isset($_GET['max_tag_id']) ? array( 'max_tag_id' => $_GET['max_tag_id'] ) : null);


    $liked_media = $current_user->getLikedMedia();
    /* echo 'https://api.instagram.com/v1/media/'. $item->getId() .'/likes?access_token='.$token.''; */

    if ( isset( $_POST['action'] ) ) {

    echo '<br/>FORM IS SUBMITTED, INSPECT WHAT WAS SENT';        
        print_r($_POST);

        $id = $_POST['id'];

                switch( strtolower( $_POST['action'] ) ) {
            case 'like':
                $current_user->addLike( $id );
                break;
            case 'unlike':
                $current_user->deleteLike( $id );
                break;
                }
       }

} catch ( Exception $e ) {
    // yes there is an error
    $error = $e->getMessage();

}

// view rendering stuff 

// display the error
if ( $error  != '' ) 
{
    echo "<h2>Error: ".$error."</h2>";
} 


echo '<section id="images">';

foreach ( $media as $item ) {

    echo '<article class="instagram-image">';
    // define the form and set the action to POST to send the data to this script
    echo '<form id="'. $token .'" class="forms" action="'; echo URL::current(); echo '" method="post">';

        $id = $item->getId();

        echo '<a title="' . $item->getCaption() .'" class="fancybox" href="' . $item->link . '"><img alt="' . $item->getCaption() .'" src="' . $item->images->standard_resolution->url . '" /></a>';
        echo '<div class="formSubmit-feedback"></div>';
        //echo '<img src="/public/img/377.gif" alt="loader"/>';
        if ( $current_user->likes($item) ){
            echo '<button class="ajax instabtn unlike icon-heart" type="submit" name="action" value="Unlike"></button>';
        } else {
            echo '<button class="ajax instabtn like icon-heart" type="submit" name="action" value="Like"></button>';
        }
        echo '<input class="id" type="hidden" name="id" value="'; echo $id; echo '">';

        echo '<p>'; echo $item->likes->count; echo '</p>';
        //echo '<p>'.$item->getId().'</p>';
        //echo '<p>By: <em>' . $item->user->username . '</em> </p>';
        //echo '<p>Date: ' . date('d M Y h:i:s', $item->created_time) . '</p>';
        //echo '<p>$item->comments->count . ' comment(s). ' . $item->likes->count . ' likes. ';

    echo '</form>';
    echo '</article>';
}
echo '</section>';

表单有效，我肯定知道，但我真的需要知道如何将其发布到正确的位置并进行切换，以便它喜欢/不喜欢图像。

有谁知道解决这个问题的方法？

谢谢

4

1 回答 1

0

所以数据库更改正确发生但页面没有正确反映更改？

我不确定 ajax 成功是否在其范围内有动作...尝试在 php 脚本中回显该动作并使用 ajax 响应 var 来控制图像。

于 2013-08-07T15:42:30.297 回答