php - ajax を使用してフォームからデータを投稿して機能させるにはどうすればよいですか?

Question

フォームを投稿しようとしている ajax スクリプトがあります。現在、ajax がないと、フォームは適切に投稿され、データが送信されます。私が欲しいのはajax投稿なので、ページは更新されず、データも投稿されます。1 ページに複数のフォームがあります。

私の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 を探し、同様の ans とは異なる switcher を使用して case switcher を使用します。次のように、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>';

フォームが機能することは確かですが、これを適切な場所に投稿し、画像が好き/嫌いになるように切り替える方法を本当に知る必要があります。

誰もこれを回避する方法を知っていますか?

ありがとう