Question

我有一段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并使用与switch不同的案例切换器。它使用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>';

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

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

由于

Answer 1

因此，数据库更改是否正确发生但页面没有正确反映更改？

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

如何通过带有ajax的表单发布数据并使其正常工作？

1 个答案: