L'utilisation d'ajax dans zend framework 2

je suis vraiment nouveau dans le zend framework 2 et à la programmation d'applications web. Dans mon application, je veux avoir un bouton qui déclenche une fonction qui modifie le contenu d'une base de données et renvoie une Chaîne qui je peux utiliser pour mettre à jour le contenu visible de la site web. Comme je ne veux pas le site web pour recharger lorsque le bouton est cliqué, je tiens à le faire à l'aide d'ajax. Après avoir lu quelques ajax tutoriels, j'ai imaginé que la solution aurait l'air somilar:

La partie HTML:

 <head>

 <script type="text/javascript">

 function myFunction() {

var xmlhttp = new XMLHttpRequest();
    //I am working with Chrome

    xmlhttp.onreadystatechange=function(){

        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){

                var text = xmlhttp.responseText;
        document.getElementById("text_paragraph").innerHTML =                 
                            text;
            }
                    };

        xmlhttp.open("GET", "function.php", true);
        xmlhttp.send();

}

 </script>

 </head>

 <body>
 ......
 <button id="function_button" onClick="myFunction()">Click</button>
 <p id = "text_paragraph">Initial text"</p>
 ......  
 </body>

Avec le .fichier php function.php (pour le début, j'ai juste envie de retourner une valeur de texte) :

<?php

     echo "Text triggered by the button click";
?>

Quand j'essaie de tester le bouton, rien ne se passe. Apparemment, le xmlhttp.statut 404 et la function.php le fichier ne peut pas être trouvé. Je suppose que soit l'endroit où j'ai mis le function.php fichier (c'est dans le même dossier que le .phtml - fichier de l'affichage de la page) ou l'url im en utilisant dans le xmlhttp.ouvrez - la fonction est mal. Pourriez-vous me dire comment utiliser ajax dans zf2 correctement? Je vous remercie pour votre temps, chaque réponse est très apprécié.

Vous avez html erreur de syntaxe <p id ="text_paragraph">texte</p>
Vous avez raison, merci qisho.
Vous devriez vérifier api.jquery.com/jQuery.ajax pour simplifier votre requête ajax de manière significative.
Et aussi de regarder à l'utilisation d'un outil de débogage comme FireBug pour Firefox ou utiliser les outils de développement de Chrome/Safari.
vous devriez également vérifier Backbone.js

OriginalL'auteur fedorSmirnov | 2013-09-27

Tout d'abord je tiens à vous remercier pour toutes vos réponses. Ils ont vraiment été d'une grande aide. À l'aide de jQuery est en effet beaucoup plus à l'aise, et pas seulement pour les appels Ajax, qu'à l'aide de Javascript. James, je vous remercie beaucoup pour votre réponse. J'ai essayé de l'utiliser, mais j'ai probablement fait quelque chose de mal parce qu'il n'a pas de travail. J'ai trouvé une autre solution pour mon problème et je tiens à le poster ici afin de autour de cette question.

Le code que je vais poster est un petit exemple qui ne fonctionne tout simplement une chose simple: sur un utilisateur à cliquer sur un bouton dans un site web créé par zend framework 2, un champ d'entrée est lu, le contenu de celui-ci est transférée à un serveur de fonction, qui, selon les données qu'il reçoit, renvoie à un certain résultat. Après avoir reçu le résultat, le site est mis à jour sans être rechargé.

Que je vais utiliser des objets Json pour la communication, il est nécessaire d'activer le Json stratégies dans zf2 par adjonction, codeline à l'module.config.php:

//module/Application/config/module.config.php

'view_manager' => array (
                'display_not_found_reason' => true,
                'display_exceptions' => true,
                'doctype' => 'HTML5',
                'not_found_template' => 'error/404',
                'exception_template' => 'error/index',
                'template_map' => array (
                        'layout/layout' => __DIR__ .   
'/../view/layout/layout.phtml',
                        'application/index/index' => __DIR__ . 
'/../view/application/index/index.phtml',
                        'error/404' => __DIR__ . 
'/../view/error/404.phtml',
                        'error/index' => __DIR__ . 
'/../view/error/index.phtml' 
                ),
                'template_path_stack' => array (
                        __DIR__ . '/../view' 
                ),
                'strategies' => array (            //Add
                                           //this
                        'ViewJsonStrategy' //line
                )

        ),

Le fichier de vue du site (appelé, par exemple exemple.phtml) va ressembler à ceci:

<html>
<head>

<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>

//Function,  activated by clicking the button

$("#trigger").click(function(){

    var text = $("#input_to_read").val();
    var myData = {textData:text};

    //The post using ajax
    $.ajax({
            type:"POST",
            //URL : /name of the controller for the site /name of the action to be                         
            //                                                executed
            url:"/example/answer",
            data:myData,
            success: function(data){
                                   //The callback function, that is going to be executed 
                                   //after the server response. data is the data returned
                                   //from the server.

                                   //Show the returned text
                                   $("#answer").text(data.text);


                                    },
            failure(function(){alert("Failure!!");})


           });


});


</script>
</head>

<body>

<input id="input_to_read" type="text">
<button id="trigger">Klick</button>
<!-- The answer will be shown here. -->
<p id="answer"></p>
</body>
</html>

La fonction de serveur, qui va être appelée lorsque le bouton est cliqué, est placée dans le contrôleur pour le site web (dans ce cas, le ExampleController) et pourrait ressembler à ceci:

//Make sure to add this line to use Json objects
use Zend\View\Model\JsonModel;

....


public function answerAction(){

#read the data sent from the site
$text = $_POST['textData'];

#do something with the data

$text = $text . "successfully processed";

#return a Json object containing the data

$result = new JsonModel ( array (

                'text' => $text 
        ) );
return $result;
}

très belle étape-par-étape de la représentation de la solution
Je khow c'est un vieux post mais ne pas utiliser de $_POST, ZF2 a filtré demande params que u peut obtenir à partir de $this->params()->fromPost('param name')

OriginalL'auteur fedorSmirnov

0

Généralement la façon dont je le manipuler, c'est de créer un RPC contrôleur de juste retour JSON, puis utiliser quelque chose de bon frameworks javascript comme jQuery, et Knock-out JS, de mettre à jour dynamiquement pertinentes de l'INTERFACE utilisateur domaines. Je crois que la base de Zend contrôleur de classe fournit un $this->_helper->json méthode qui sera de retour JSON au lieu de retourner ce que vous avez définis dans une vue donnée. Dans le cas de Public_RpcController ci-dessous je n'ai même pas définir un point de vue à tous. Il retourne du JSON que je peux utiliser en conjonction avec les frameworks JS pour le côté client de balisage de la manipulation. En utilisant les frameworks JS a un peu de courbe d'apprentissage, mais bien la peine d'apprendre.
```
class Public_RpcController extends MySubClassed_Controller_Action
{
    public function getUserDataAction()
    {
        $output = array();
        $request = $this->getRequest();

        ...

        $output = array(
                'Value1'    => "foobar",
                'Value2'    => "foobar",
        );
        return $this->_helper->json($output);       
    }   
}

//Use Jquery to fetch JSON data to update. 
$.getJSON( "/rpc/get-user-data", function( data ) { 
    //Do something with the JSON data like bind to Knockout template.
});
```
Je vous remercie pour votre réponse. Si vous n'avez pas l'esprit, j'ai quelques questions supplémentaires. Puis-je écrire le getUserDataAction() dans le contrôleur, je suis à l'aide de ce site et de l'appeler avec un jQuery Ajax post ou dois-je écrire un supplément de contrôleur? Dois-je placer le $.getJSON codeline dans la fonction de rappel de l'Ajax de jQuery post?

OriginalL'auteur James

Vous devez vous connecter pour publier un commentaire.