没有成功的POST数据html

Question

when i make a request with ajax i can see that the post value, but when i see the console log it return me this message ---

no success post data

and also in the symfony web debug toolbar i can see what there are no ajax request have been make .

This is my html code ---

<form method="post" id="searchform">
        <div align="center" class="col-md-10">
            <input  type="text" id= "contentSearch" name="contentSearch" >
        </div>
    <div class="form-group"><button type="submit" class="btn btn-default" id="submitSearch">
            Search
        </button></div>
</form>

This is my javascript code ---

    <script>
$(document).ready(function () {
$("#searchform").on('submit', function (e) {
    $.ajax({
        url: '/home',
        type: 'post',
        data: { contentSearch : $('#contentSearch').val()},
        success: function (data) {
            console.log(data)
        }
    });

   return false;
});
});
    </script>

Controller code ---

routing code ---

content:
    path:     /home
    defaults: { _controller: AdminBundle:Home:home }

Controller code ---

<?php
namespace AdminBundle\Controller;    
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;    
class homeController extends Controller {
/**
 * @param Request $request
 * @return Response
 */
 // route of /home
function homeAction(Request $request) {

 if ($request->getMethod() == 'POST') {
 $request = $request->request->get('contentSearch');
 // do something with the  $request
 $result;
}}
return $this->render('AdminBundle:Home:home.html.twig', array(
        'pageTitle' => 'my ajax',
        'menu' => $this->menu,
        'result' => $result
            )
);

Do any one knows how to solve this problem !!!!

Answer 1

when you submit a form, the default behaviour is to load the form "action" page with the supplied input fields. if no action is specified, it simply passes the value to the current page and reloads it.

http://www.w3.org/TR/html401/interact/forms.html#h-17.13.3

What you need to do is prevent the form from submitting so the ajax request can fire. use preventDefault to achieve this.

$("#searchform").on('submit', function (e) {
e.preventDefault();
$.ajax({
    url: '/home',
    type: 'post',
    data: { contentSearch : $('#contentSearch').val()},
    success: function (data) {
        console.log(data)
    }
});