JQuery-AJAX無需刷新頁面即可在數據庫中插入數據

Question

我有這個dropwonlist，這個數字是選票。 在下面的代碼中，我將控制器的功能放在管理投票的位置。 使用route-action-template可以很好地工作。 我的問題是，如何使用JQuery-AJAX代碼執行相同操作而不刷新頁面？

下拉列表的默認值為votacion.votCalificacion ，這是數據庫中的投票值

這是投票的下拉列表：

<form id="post">
    <select id="cd-dropdown" class="cd-select">
        <option value="-1" selected>{{ voto.votCalificacion }}</option>
        <option>-</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
    </select>
</form>

這是控制器管理投票的功能：

public function gestionarVotoAction($pysStr, $votCalificacion)
{
    $em = $this->getDoctrine()->getManager();
    $pys = $em->getRepository('PYSBundle:Pys')->findPys($pysStr);
    $usuario = $this->get('security.context')->getToken()->getUser();

    $voto = $em->getRepository('UsuarioBundle:Usuario')->findVoto($usuario, $pys);

    if(!$voto) 
    {
        $voto = new Voto($usuario, $pys);
    }

    if ($votCalificacion == "-") 
    {
        $em->remove($voto);
    }
    else
    {
        $voto->setVotCalificacion($votCalificacion);
        $voto->setVotFecha(new \DateTime("now"));

        $em->persist($voto); 
    }

    $em->flush();
    return $this->redirect($this->generateUrl('usuario_pelicula', array('pysStr' => $pysStr)));
}

Answer 1

以下代碼是我的問題的解決方案：

AJAX調用：

$('#cd-dropdown').bind('change', function(){
    ajaxVotar($( '#cd-dropdown' ).val(), $('#id-pelicula').val()); 
});


function ajaxVotar(voto, pelicula) 
{ 
    $.getJSON('/app_dev.php/es/user/pelicula/'+pelicula+'/'+voto, function(j){ 
        $('#votacion-media-peli').html(j.media);
    }); 
}

在控制器的函數中，將html.twig視圖render替換為JSON響應：

(...)
$votosPelicula = $em->getRepository('UsuarioBundle:Usuario')->findVotosDePelicula($pys);
$media = self::media($votosPelicula);

$response = new Response(json_encode (array('result'=>$result, 'media' => $media))); 
$response->headers->set('Content-Type', 'application/json'); 

return $response;

Answer 2

$('cd-dropdown').change(function(){
  $.post('path-to-route', {data: $(this).val()}, function(res){
    console.log('Done!'); //or whatnot
  });
});

我在ajax調用中使用的data鍵可能需要更改，具體取決於PHP中的$ _POST變量。

Answer 3

您必須創建一個資源（例如php頁面），該資源需要您要保存的信息（參數），例如： www.example.com/savevote.php 。 然后您使用jQuery這樣：

$.post("savevote.php", {"votCalificacion": $("#cd-dropdown").val()}, function(returned_data){
// do something with your returned data
});

無論如何，周圍都有大量教程供您檢查。 只是谷歌！

祝好運！