Processing PHP page using AJAX in MVC

Question

I have a form and I want to add AJAX functionality to this form.

Architecture: MVC

I have a basic form like this:

<form id="customForm" method="post">
        <input type="text" id="name" name="zone_name" value="" class="input-block-level" />
        <button type="submit" id="save" >Save</button>
  </form>

I have this JS on my MVC-View:

$('#save').click(function()
{
    var name = $('#name').val();
    $.ajax
    ({
    type: 'POST',
    url: 'http://localhost/myApp/process',
        data: "{name:"+name+"}",
            success: function (result) {
                alert(result);
            },
            error: function () {  
            alert('fail');              
            }
        });
    });

I have a process class which is there in controller and have this code within

class process {
    function __construct() {
        echo 'Constructor';
    }
}

But Doing all this gives me Error message through AJAX. Why is this happening? Is there any other way of doing this. Here under is snapshot:

enter image description here

Here under is my .HTACCESS rule

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-l

RewriteRule ^(.+)$ index.php?url=$1 [QSA,L]

So when I am directly navigation to my process class its working. But not with AJAX. What would be the possible reason for this?? Here under is the screenshot:

enter image description here

When you navigate to it you are using `GET`, then when you use Ajax you are using `POST`, is your controller [RESTful](http://en.wikipedia.org/wiki/Representational_state_transfer)? Do you define your routes somewhere and have to make them respond to more than one [HTTP Verb](http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol)? — naththedeveloper, Jul 23 '13 at 07:34
No actually i am accessing it on a page called `localhost/myApp/myPage` And on there the Ajax is calling this `process` class... — Django Anonymous, Jul 23 '13 at 07:36
1. you don't need `"` here: `"{name:"+name+"}"`, you need an object, not a string: `data: {name: name},` — vladkras, Jul 23 '13 at 07:38
@vladkras even better he could just do `data: $('#customForm').serialize()` and save building the data manually — naththedeveloper, Jul 23 '13 at 07:43
@FDL what if he wants to send only `name`, and just didn't include other fields in his example to make it shorter? — vladkras, Jul 23 '13 at 07:45

score 2 · Accepted Answer · answered Jul 23 '13 at 07:52

2

your button must not submit the form, make its type button:

<button type="button" id="save" >Save</button>

answered Jul 23 '13 at 07:52

daghan

788
7
15

Konsole · Answer 2 · 2013-07-23T08:04:52.643

0

What is the ajax status code? Is it generating any error message? You can get the status code as:

$('#save').click(function(e)
{
    e.preventDefault(); //prevent default button action
    var name = $('#name').val();
    $.ajax
    ({
    type: 'POST',
    url: 'http://localhost/myApp/process',
        data: "{name:"+name+"}",
            success: function (result) {
                alert(result);
            },
            error: function (xhr, status, errorMessage) {  
             alert(xhr.status);              
            }
        });
    });

If the status code is zero the network access my be forbidden. I see localhost in your ajax url and 192.168.1.6 in your alert box.

edited Jul 23 '13 at 08:04

answered Jul 23 '13 at 07:44

Konsole

3,389
3
24
38

This thread has some good explanation on ajax status code zero http://stackoverflow.com/questions/2000609/jquery-ajax-status-code-0 – Konsole Jul 23 '13 at 07:48
OK on this note http://stackoverflow.com/a/2016085/1182021 I don't think any `XSS` is happening and page does not exist as I am able to access the page through `http://localhost/myApp/process` – Django Anonymous Jul 23 '13 at 07:51
Check the ajax call in firebug. The firebug generally displays ajax error like 500 Internal Server Error and 403 Forbidden error. I think this function is not available in chrome element inspector. – Konsole Jul 23 '13 at 08:01
I suspect that your ajax call is not being complete because the submit button reloads the page before getting the ajax response. Sorry for bad english. – Konsole Jul 23 '13 at 08:06

Processing PHP page using AJAX in MVC

2 Answers2