使用jQuery.Ajax向ASP.NET MVC控制器Post数据

jQuery自带了Ajax的函数，你可以使用它从远程服务器下载网页，但问题是，大部分Ajax都是通过GET这种方式与远程服务器交互的。

 

但如果你想通过Ajax向远程服务器传递数据呢？当然jQuery.Ajax里面有一个参数data参数允许你传递发送到服务器的数据。 但问题是，这个数据默认是采用GET方式，即附加在请求字符串（URL QueryString）后面实现的，也就是说你会受到URL最大不能超过4KB的限制。而如果你尝试用POST方法向ASP.NET MVC控制器发送数据的时候，在控制器一端，你会发现数据没有传入到控制器上。比如说下面的jQuery代码：

 

代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head >
     < title > Tools </ title >
     < link  href ="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"  rel ="stylesheet"  type ="text/css" />
     < LINK  rel ="stylesheet"  href ="http://jqueryui.com/demos/demos.css"   />
     < script  type ="text/javascript"  src ="Scripts/jquery-1.4.2.min.js" ></ script >
     < script  type ="text/javascript"  src ="Scripts/jquery-ui-1.8.6.custom.min.js" ></ script >
     < script  type ="text/javascript"  src ="Scripts/tinymce/tiny_mce.js" ></ script >
     < script  type ="text/javascript"  src ="Scripts/tinymce/jquery.tinymce.js" ></ script >
</ script >
     < script  language ="javascript"  type ="text/javascript" >
         var  editor_selector  =   " #note_editor " ;
         var  annotation_catalog_url  =   ' /Comment/Save ' ;

         function  show_annotation_dialog() {
            $(editor_selector).tinymce({
                mode:  " textareas " ,
                theme:  " simple "
            });
        }

         function  save_handler() {
             if  (tinyMCE.get( ' note_editor ' )) {
                 var  html  =  tinyMCE.get( ' note_editor ' ).getContent();
                 var  comment  =  {
                        Id:  - 1 ,
                        User:  '' ,
                        PageUrl:  ''   +  window.location.href,
                        Content: html
                };

                $.ajax({
                    url: annotation_catalog_url,
                    type:  ' POST ' ,
                    dataType:  ' json ' ,
                    data: comment,
                    contentType:  ' application/json; charset=utf-8 ' ,
                    success:  function  (data) {
                         if  (data  !=   null )
                            $( ' #result ' ).html(data.Message);
                    }
                });
            }
        }

        $(document).ready( function  () {
            $( ' #submit ' ).click(save_handler);            
        });
     </ script >
</ head >
< body >
    < div  id ="note_editor" >
    </ div >
    < input  type ="button"  value ="提交"  id ="submit"   />    

    < div  id ="result" >
    </ div >
</ body >

 

点击提交后，在控制器一端根本没有被调用，这是因为虽然你的jQuery代码指明了数据类型是json，但是数据格式并不是json格式的。你需要将对象序列化成json格式，使用json2.js就可以做这个事情，下载地址是：http://www.json.org/js.html 。

 

代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head >
     < title > Tools </ title >
     < link  href ="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"  rel ="stylesheet"  type ="text/css" />
     < LINK  rel ="stylesheet"  href ="http://jqueryui.com/demos/demos.css"   />
     < script  type ="text/javascript"  src ="Scripts/jquery-1.4.2.min.js" ></ script >
     < script  type ="text/javascript"  src ="Scripts/jquery-ui-1.8.6.custom.min.js" ></ script >
     < script  type ="text/javascript"  src ="Scripts/tinymce/tiny_mce.js" ></ script >
     < script  type ="text/javascript"  src ="Scripts/tinymce/jquery.tinymce.js" >
     < script type = " text/javascript "  src = " Scripts/json2.js " > </ script >
</ script >
</ script >
     < script  language ="javascript"  type ="text/javascript" >
         var  editor_selector  =   " #note_editor " ;
         var  annotation_catalog_url  =   ' /Comment/Save ' ;

         function  show_annotation_dialog() {
            $(editor_selector).tinymce({
                mode:  " textareas " ,
                theme:  " simple "
            });
        }

         function  save_handler() {
             if  (tinyMCE.get( ' note_editor ' )) {
                 var  html  =  tinyMCE.get( ' note_editor ' ).getContent();
                 var  comment  =  {
                        Id:  - 1 ,
                        User:  '' ,
                        PageUrl:  ''   +  window.location.href,
                        Content: html
                };

                $.ajax({
                    url: annotation_catalog_url,
                    type:  ' POST ' ,
                    dataType:  ' json ' ,
                    data: JSON.stringify(comment),
                    contentType:  ' application/json; charset=utf-8 ' ,
                    success:  function  (data) {
                         if  (data  !=   null )
                            $( ' #result ' ).html(data.Message);
                    }
                });
            }
        }

        $(document).ready( function  () {
            $( ' #submit ' ).click(save_handler);            
        });
     </ script >
</ head >
< body >
    < div  id ="note_editor" >
    </ div >
    < input  type ="button"  value ="提交"  id ="submit"   />    

    < div  id ="result" >
    </ div >
</ body >

 

 

如果你在服务器的控制器一端，发生数据没有被正确地反序列化（如果你用ASP.NET MVC 3 RC之前的版本应该就会碰到这个问题）。这是因为虽然客户端指明了数据是json对象，但是，服务器MVC路由器不知道如何解释这个对象，要在服务器端加上json反序列化支持，请在global.asax.cs的Application_Start()函数里，添加下面一行代码（表示你要支持json反序列化）：

 

 

ValueProviderFactories.Factories.Add( new  JsonValueProviderFactory());

 

在ASP.NET MVC 3 RC以后的版本就不需要添加这一行代码了。