如何在Silex中使用JQuery Ajax

Question

i try to understand how Silex an JQuery work together.But i dont understand it and i hope that u can help me.

I have an twig-Template witch include the AJAX call. i don't understand how i can bind the Ajax call to my Application.

JS:

$(document).ready(function () {
/*
setInterval(function () {
    $.ajax({
        url: '/Chat/services/AjaxCom.php',
        type: 'GET',
        method: 'GET',
        data: {message: message},
        success: function () {
            console.log(data);
        },
        error: function () {php
            console.log('error');
        }
    });
    return false;
}, 100);
*/
$('form').submit(
    function (event) {

        event.preventDefault();
        var daten = $('#message').val();
        $.ajax({
            url: '/Chat/web/index.php',
            type: 'GET',
            data: {message: daten},
            success: function (daten) {
                alert(daten);
                $('#message').val(' ');
                //console.log(daten);
            },
            error: function () {
                console.log('error at writing');
            }

        });


    });

});

I wand to call this class:

<?php
 namespace resources\services;
 resources\controller\UserOnline;
 use resources\objects\Message;
 use Silex\Application;

 /**
 * Class AjaxCom
 * @package resources\controller
 */
 class AjaxCom
 {

/**
 * @var array
 */
private $chatOutput = [];
/**
 * @var array
 */
private $userOutput = [];
/**
 * @var
 */
private $ddConnect;


/**
 * @return array
 */
public function getChatOutput()
{
    return $this->chatOutput;
}

/**
 * @return array
 */
public function getUserOutput()
{
    return $this->userOutput;
}


/**
 * AjaxCom constructor.
 * @param $datenbankVerbindung
 */
public function __construct($datenbankVerbindung)
{
    $this->ddConnect = $datenbankVerbindung;
}


/**
 * @return array
 */
public function showChatData()
{
    $posts = $this->ddConnect->fetchAll("SELECT * FROM messages");


    foreach ($posts as $post) {

        /*
         * post wird an die function buildMessageFromRow übergeben
        array chatOutput bekommt Die Id aus DB=>Message
        chatOutput[id objekt message] = objekt message d.h soviel id wie es gibt so viele Objekte gibt es. Jede zeile ist ein Objekt
        */
        $message = $this->buildMessagerFromRow($post);
        $this->chatOutput[$message->getId()] = $message;
    }

    return $this->getChatOutput();
}

/**
 * @return array
 */
public function showOnUser()
{
    $users = $this->ddConnect->fetchAll("SELECT * FROM user WHERE status='1'");
    foreach ($users as $userOnline) {
        $userOnline = $this->buildUserFromRow($userOnline);
        $this->userOutput[$userOnline->getId()] = $userOnline;

    }

    return $this->getUserOutput();

}

/**
 * @param $message
 * @param $writer
 */


public function writeChatDateInDb($message,$writer)
{
    $this->ddConnect->insert(
        'messages',
        array(
            'message' => $message,
            'writer' => $writer,
        )
    );


}

private function buildMessagerFromRow($rowSet)
{
    return new Message(
        $rowSet['id'],
        $rowSet['message'],
        $rowSet['writer']
    );
}
private function  buildUserFromRow($rowset){
    return new UserOnline(
        $rowset['id'],
        $rowset['name'],
        $rowset['password'],
        $rowset['status']
    );

}
}

Can Somebody explain me, how i can connect the JS and the Class? Thx for your help Micha

Answer 1

Normally you would route everything to your index.php by using .htacces.

<IfModule mod_rewrite.c>
    Options -MultiViews

    RewriteEngine On
    #RewriteBase /path/to/app
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [QSA,L]
</IfModule>

Now every request should be routed to index.php. Then you simply add routes in your index.php or include a routing file.

JS

$('form').submit(
    function (event) {
        event.preventDefault();
        var daten = $('#message').val();
        $.ajax({
            url: '/chat',
            type: 'POST',
            data: {message: daten},
            success: function (daten) {
                alert(daten);
                $('#message').val(' ');
            },
            error: function () {
                console.log('error at writing');
            }
        });
    });
});

PHP

use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;

$app->post('/chat', function (Request $request) {
    $ajaxCom = new AjaxCom();
    $data = $request->get('message');
    $response = $ajaxCom->yourFunction($data);
    return $response;
});