表單提交使用jQuery和AJAX

Question

我一直在這個代碼

$("#library").submit(function(e){ 
    //return false; 
    e.preventDefault(); 
    dataString = $("#library").serialize(); 
    $.ajax({ 
     type:"POST", 
     url:"<?= base_url() ?>index.php/library/comment", 
     data: dataString, 
     dataType: 'json', 
     success: function(data){ 
      $("#librarycomment").val(""); 
      $('#comment-list').prepend('<li><div class="avatar"><img src="<?= base_url();?>asset/css/library/images/picture.jpg">' + 
             '</div>' + '<div class="colset">' + '<div class="author">' + data.user + 
             '&nbsp;<strong>' + data.date + '</strong>' + 
             '</div>' + '<div class="comment-content">' + 
             data.text + '</div></div></li>').find("li:first").hide().slideDown('slow'); 
     } 
    }); 
}); 

如果我想有一個漂亮的表單驗證，而不必刷新瀏覽器。上面的代碼有些不起作用。

我試圖替換e.preventDefault（）;與

• e.stopPropagation
• 返回假

所有給予什麼都沒有。表單提交數據並將數據存儲到數據庫。然而，ajax部分並不像我期望的那樣安靜。

有誰知道我在這裏錯過了什麼？

Answer 1

class somehelperclass 
{ 
    public function unserialize($input, $pIndex = 'data') 
    { 
     if(!isset($input[$pIndex])) 
      exit('index '.$pIndex.' is not exist'); 
     parse_str($input[$pIndex], $input); 
     $post = array(); 
     foreach($input as $index => $value) 
     { 
      $index = preg_replace('/\;/', '', $index); 
      $post[$index] = $value; 
     } 
     return $input; 
    } 

    public function jsonResponse($array) 
    { 
     header("Content-type: application/json"); 
     echo json_encode($array); 
     exit(); 
    } 
} 

// your controller 

class Library extends CI_Controller 
{ 
    public function comment() 
    { 
     $this->load->library('somehelperclass'); 
     $_POST = $this->somehelperclass->unserialize($_POST, 'data'); 
     $this->somehelperclass->jsonResponse($_POST); 
    } 
} 

// js 

$("#library").submit(function(){ 
    that = $(this); 
    $.ajax({ 
     type: "post", 
     url: "/index.php/library/comment", 
     data: {data: that.serialize()}, 
     dataType: 'json', 
     success: function(response) 
     { 
      $("#librarycomment").val(""); 
      $('#comment-list').prepend('<li><div class="avatar"><img' 
      + ' src="/asset/css/library/images/picture.jpg"></div>' 
      + '<div class="colset"><div class="author">' 
      + response.user + '&nbsp;<strong>' + response.date + '</strong>' + 
      '</div>' + '<div class="comment-content">' + 
      response.text + '</div></div></li>').find("li:first").hide().slideDown('slow'); 
     } 
    }); 
    return false; 
});