标签：mvc   ajax   jquery   前台向后台传数据   

一、引言

MVC中view向controller传递数据的时候真心是一个挺让人头疼的一件事情。因为原理不是很懂只看一写Dome，按葫芦画瓢只能理解三分吧。

二、解读Jquery个Ajax函数

$.get(),$.post(),$.ajax(),$.getJSON()

1、$.get(url,[data],[callback])

参数说明

url:请求地址，MVC中一般为：“/QueryScores/Search/” （/controller/action/）

data：请求数据列表，MVC中action的参数，一定要注意这里的data是用key/value键值对的，key一定与action的参数的名称一定相同才行。

callback：请求成功后的回调函数，我们一般定义为function（str），这里的function就为回调函数，str为action的返回值。

我们举个例子：

<span style="font-size:18px;">                        var item = $(":radio:checked").val();
                        $.get("/QueryScores/Search/", {item:item}, function (string) {
                            alert(string);
                        });</span>

<span style="font-size:18px;">        public String Search(string item)
        {
            return "123";
        }
</span>

是挺好写的是吧，如果我们想要return回来的json格式的值的时候，get方法就会局限了，这个时候就需要后面的函数了。

2、$.post(url,[data],[callback],[type])

前三个都跟上面的是一样的我就不说了，

type：请求的数据类型，可以是html，xml，json等类型，如果我们设置这个参数为json，那么返回的格式则是json格式的，如果没有设置，就和$.get（）返回的格式一样，都是字符串格式的。

代码：

<span style="font-size:18px;">$.post("data.php",$("#firstName.val()"),function(data){
$("#postResponse").html(data.name);
},"json"//设置了获取数据的类型，所以得到的数据格式为json类型的
);</span>

3、$.ajax(option)

如果我们需要更加精确的参数的时候，我们就可以用到这个。

看看它的定义：

<span style="font-size:18px;">$.ajax({
url: "ajax/ajax_selectPicType.aspx",
data:{Full:"fu"},
type: "POST",
dataType:'json',
success:CallBack,
error:function(er){
BackErr(er);}
});</span>

我们我们可以看到它定义了url，data，type，daatatype，success，error的定义，增加了错误处理。

4、$.getJSON(url,[data],[callback])

它的获取的数据类型一定是json。

<span style="font-size:18px;"> $.getJSON("/Stu/Get/" + id, null, function (jsonObj) {
            if (jsonObj.Statu == "ok")
            {
                $("#Id").val(jsonObj.Data.Id);
                $("#Name").val(jsonObj.Data.Name);
                $("#CId").val(jsonObj.Data.CId);
            }
        });</span>

三、总结：

在如今我们开发前台的是后，后台直接与底层的HTTPRequest本来就听烦的。JQuery既然已经分装了js，我们就可以考虑AJAX应用了，

MVC中前台如何向后台传递数据------$.get(),$post(),$ajax(),$.getJSON()总结

标签：mvc   ajax   jquery   前台向后台传数据   

原文地址：http://blog.csdn.net/qiumuxia0921/article/details/42272225