How to perform a MySQL insert via jQuery/Ajax within the Zend Framework

A quick brief background:

I am in the process of creating a drawing program that uses the HTML 5 canvas element. I would like to have the user to be able to save the contents of their drawing at any given time. So far, I am able to create an array that holds the contents of the drawing via javascript.

What I would like to do:

What I am trying to do now is create a 'Save' Button that upon being pressed, the array is inserted into a MySQL Table. I am currently trying to teach myself how to do this via jQuery/Ajax within the Zend Framework. The only thing that I'm not sure about is how do I get the Zend Controller to receive the data from the Ajax request.

This is what I have so far:

Code snippet from index.phtml:

<button type="submit" id="saveButton" name="saveButton">Save</button>
<script type"text/javascript">
    $(document).ready(function()
    {           
        $("#saveButton").click(function()
        {
            $.ajax(
            {
                url: "/CableDesign/public/create-drawing/save",
                data: drawingArray,
                type: "POST",
                success: function(response){ alert('Success!'); }
            });
        });
    });
</script>

Code snippet from my controller: CreateDrawingController.php

  public function indexAction()
{
        if($this->_request->isXmlHttpRequest())
    {
        // This is where I would retrieve my array from the Ajax request and insert its contents into my database table.
        $drawingArray = $this->getParam('drawingContents');
        $drawingModel = new Application_Model_DbTable_DrawingModel();
        $boolInsert = $drawingModel->insertContents($drawingArray);

        if ($boolInsert)
            $this->view->message = "Successful save!";
   开发者_如何学C     else
            $this->view->message = "Fail to save your drawing.";
    }
    }

From the above-mentioned code, I know that I am going about this all wrong and I was wondering if anyone out there can help me through this process. Thank you so much in advance.

Edit:

I made the changes that sudol suggested, here is the final copy of the code that I got to work:

My updated Controller CreateDrawingController.php:

    class CreateDrawingController extends Zend_Controller_Action
{

    public function init()
    {

    }

    public function indexAction()
    {

    }

    public function saveAction()
    {
        if($this->getRequest()->isXmlHttpRequest())
        {
            //$drawingArray = $this->getRequest()->getParams();
            $drawingArray = $this->getRequest()->getParam('drawingArray');
            $drawingModel = new Application_Model_DbTable_DrawingModel;
            $boolInsert = $drawingModel->insertContents($drawingArray);

            if ($boolInsert)
                $this->view->message = "Successful save!";
            else
                $this->view->message = "Fail to save your drawing.";
        }
    }

    private function printArray($array)
    {
        echo '<pre>';
        print_r($array);
        echo '</pre>';
    }
}

The updated code snippet in my index.phtml

<script type"text/javascript">
    $(document).ready(function()
    {           
        $("#saveButton").click(function()
        {
            $.ajax(
            {
                url: "/CableDesign/public/create-drawing/save",
                data: { drawingArray : drawingArray },
                type: "POST",
                success: function(response){ alert('Success!'); }
            });
        });
    });
</script>

The Internal Server 500 Errors were being caused by two things:

1. I had left out the parentheses in the getRequest portion of the following if statement:

   if ($this->getRequest()->isXmlHttpRequest())

2. I had forgotten to enable layouts and I enabled them via Zend's CLI Tools for Windows using the following command:

   zf enable layout

Thanks for all the help sudol! Hope this helps anyone else out there. :)

You're pretty close,

using your ajax call:

$.ajax(
    {
        url: "/public/create-drawing/save",
        data: drawingContents,
        type: "POST",
        success: function(response){
        alert('Success!');
    }
});

You will want a new Action in your CreateDrawingController called saveAction instead of the indexAction. You can retrieve the data by doing $this->getRequest()->getParams(), then save it as you are doing. Something like:

public function saveAction()
{
    if($this->getRequest()->isXmlHttpRequest())
    {
        $drawingArray = $this->getRequest()->getParams();
        $drawingModel = new Application_Model_DbTable_DrawingModel();
        $boolInsert = $drawingModel->insertContents($drawingArray);

        if ($boolInsert)
            $this->view->message = "Successful save!";
        else
            $this->view->message = "Fail to save your drawing.";
    }
}

Note: I did not test this code! But I think it's correct. You are very close in the first place.

Hope this helps :)