Ajax方法传递到action,前端传模型和聚焦

By admin in 4858.com on 2019年5月5日

 
/*******在前端拼接Model,后台一贯用模子类去接受************/

前面写过1篇文章Jquery Ajax方法传值到action,本文是对该文的互补
假诺 controller中的方法是之类:

万壹 controller中的方法是之类:
public ActionResult ReadPerson(PersonModel model) 
        { 
            string s = model.ToString(); 
            return Content(s); 
        }
 
public ActionResult ReadPersons(List<PersonModel> model) 
        { 
            string result = “”; 
            if (model == null) return Content(result); 
            foreach (var s in model) 
            { 
                result += s.ToString(); 
                result += “————-“; 
            }
            return Content(result); 
        }
 当中PersonModel定义如下:
public class PersonModel 
    { 
        public int id 
        { 
            set; 
            get; 
        } 
        public string name 
        { 
            set; 
            get; 
        }
 
        public int age 
        { 
            set; 
            get; 
        }
 
        public bool gender 
        { 
            set; 
            get; 
        } 
        public string city 
        { 
            set; 
            get; 
        }
 
        public override string ToString() 
        { 
            string s = string.Format(@”id:{0} 
name:{1} 
age:{2} 
gender:{3} 
city:{4} 
“, id, name, age, gender, city); 
            return s; 
        } 
    }
那么controller方法分别收受单个model和一个model的List。选拔通过ajax传递参数。
对于传递单个参数的情景,如果js代码如下:
var person = { 
               id: “001”, 
               name: “zhangsan”, 
               age: “20”, 
               gender: true, 
               city: “shanghai” 
           };
 
var option = { 
               url: ‘/test/ReadPerson’, 
               type: ‘POST’, 
               data: person, 
               dataType: ‘html’, 
               success: function (result) { alert(result); } 
           }; 
$.ajax(option);
 从chrome中截图能够看看如下:
传递的数目是壹串Form数据,根据命名相配的条件,也是能够获得数据的。
将option 的代码改成如下
var option = { 
               url: ‘/test/ReadPerson’, 
               type: ‘POST’, 
               data: JSON.stringify(person), 
               dataType: ‘html’, 
               success: function (result) { alert(result); } 
           }; 
$.ajax(option);
当中JSON.stringify方法具名称叫 stringify ( value [ , replacer [ , space
] ] ),依照ECMA-26二标准stringify
函数再次来到的是JSON格式的字符串。它能够有1个参数。摘抄如下:
The stringify function returns a String in JSON format representing an
ECMAScript value. It can take three parameters. The first parameter is
required. The value parameter is an ECMAScript value, which is usually
an object or array, although it can also be a String, Boolean, Number or
null. The optional replacer parameter is either a function that alters
the way objects and arrays are stringified, or an array of Strings and
Numbers that acts as a white list for selecting the object properties
that will be stringified. The optional space parameter is a String or
Number that allows the result to have white space injected into it to
improve human readability.
暗中认可的ContentType的属性值是”application/x-www-form-urlencoded”
 看请求头的截图:4858.com 1

此前写过1篇小说Jquery
Ajax方法传值到action,本文是对该文的补给
只要 controller中的方法是之类:

 //前端   –1

复制代码 代码如下:

从而,传递到controller的是贰个json字符串,MVC依照命名相配也是足以获取到参数的值。
将将option 的代码改成如下
var option = { 
                url: ‘/test/ReadPerson’, 
                type: ‘POST’, 
                data: person, 
                dataType: ‘html’, 
                 contentType: ‘application/json’, 
                 success: function (result) { alert(result); } 
                }; 
把contentType改成json格式,那么获得的是失误的音信。
固然person是json对象,可是jquery中的ajax,data会自动的被转变来查询字符串格式key1=value一&key贰=value二那种样式,很明朗那种样式不是json格式,由此会出错。
要防止调换到查询字符串格式,只必要设置processData为fasle就能够。processData默许是true。
此间须求小心的是:当内定了contentType的时候,数据将不再依照Form
Data的样式提交了,而是形成Request Data的情势提交。可以从图上的Request
Header中看出。供给小心的是,Form
Data提交的多寡足以由FormCollection得到到。Request
Data格局交给的则不可能通过FormCollection得到。
若是把processData设置为暗中同意值true。4858.com 2

复制代码 代码如下:

 var data = [];

public ActionResult ReadPerson(PersonModel model) 
        { 
            string s = model.ToString(); 
            return Content(s); 
        }

如果把processData设置为false。4858.com 3

public ActionResult ReadPerson(PersonModel model) 
        { 
            string s = model.ToString(); 
            return Content(s); 
        }

data.push({ name: ‘Id’, value: “123” }),
data.push({ name: ‘Overage’, value: “3%” }),
data.push({ name: ‘SampleQty’, value: “143” }),
data.push({ name: ‘Qty’, value: “123” }),

public ActionResult ReadPersons(List<PersonModel> model) 
        { 
            string result = “”; 
            if (model == null) return Content(result); 
            foreach (var s in model) 
            { 
                result += s.ToString(); 
                result += “————-“; 
            }
            return Content(result); 
        }

如上二种方法,依照application/json的档案的次序传给都会倒闭,因为json是依据文本的格式,上边二种艺术传送的都不是json文本。因而会出错。
因此,把option改成:
var option = { 
    url: ‘/test/ReadPerson’, 
    type: ‘POST’, 
    data:JSON.stringify(person), 
    dataType: ‘html’, 
    contentType: ‘application/json’, 
    success: function (result) { alert(result); } 
}; 
则传递的正是json文本,因而依赖命名相称,就会收获值了。4858.com 4

public ActionResult ReadPersons(List<PersonModel> model) 
        { 
Ajax方法传递到action,前端传模型和聚焦。            string result = “”; 
            if (model == null) return Content(result); 
            foreach (var s in model) 
            { 
                result += s.ToString(); 
                result += “————-“; 
            }
            return Content(result); 
        }

 

里头PersonModel定义如下:

对此较为轻松是数据类型,有时候不钦命contentType也能透过命名相称传值。不过对于有个别复杂点的数据类型,有时钦定contentType:
‘application/json’,管理起来特别有利于。
假若一个controller里的action方法是经受三个List类型的参数,举个例子:
public ActionResult ReadPersons(List<PersonModel> model)
那么js中先构造那样的一个json对象的数组。如下
var persons = [{
                id: “001”,
                name: “zhangsan”,
                age: “20”,
                gender: true,
                city: “shanghai”
            },
            {
                id: “002”,
                name: “lisi”,
                age: “21”,
                gender: false,
                city: “beijing”
            }
            ];
偏偏3个数组传递是作为data传递是,Form
Data也是不可能识别出的。因而把这几个数组再度结缘二个json情势。如下:当中json的键值用model是为着能和controller中的参数名同样,能够包容。
var jsonp = { model: persons };
           var option = {
               url: ‘/test/ReadPersons’,
               type: ‘POST’,
               data: jsonp,
               dataType: ‘html’,
               success: function (result) { alert(result); }
           };
出于未钦点contentType,由此是默许的application/x-www-form-urlencoded。此时是依照Form
Data的方法传递的,

里面PersonModel定义如下:

//异步提交(直接传data数组不用改变和钦定后台接受的变量名称)–2

复制代码 代码如下:

能够从截图中看出。但是那种格式的数量,controller中只可以获得钦命model用二个成分,不恐怕得到成分中属性的值。

复制代码 代码如下:

$.ajax({

public class PersonModel 
    { 
        public int id 
        { 
            set; 
            get; 
        } 
        public string name 
        { 
            set; 
            get; 
        }

4858.com 5如果把data改成JSON.stringify(jsonp),如下:    
var option = {
              url: ‘/test/ReadPersons’,
              type: ‘POST’,
              data: JSON.stringify(jsonp),
              dataType: ‘html’,
              success: function (result) { alert(result); }
          }; 

public class PersonModel 
    { 
        public int id 
        { 
            set; 
            get; 
        } 
        public string name 
        { 
            set; 
            get; 
        }

url: “/order/RfidOrder/ChangeDetailInfoee”,
data: data,
success: function (data) {
}
});

        public int age 
        { 
            set; 
            get; 
        }

那么传递过去的Form
Data是壹串字符串,controller跟不可能分辨出这几个东西,因而获不到值。要是唯有设置contentType:
‘application/json’,而传递的又不是json格式的多少,如下:
var option = {
    url: ‘/test/ReadPersons’,
    type: ‘POST’,
    data: jsonp,
    dataType: ‘html’,
    contentType: ‘application/json’,
    success: function (result) { alert(result); }
};
因为jquery的ajax方法会把data调换到查询字符串,因而就成为如下的楷模。那串文本当然不切合json格式,因而会并发上边包车型大巴谬误。

        public int age 
        { 
            set; 
            get; 
        }

//后台定义接收–叁

        public bool gender 
        { 
            set; 
            get; 
        } 
        public string city 
        { 
            set; 
            get; 
        }

假设设置contentType: ‘application/json’,并且安装data:
JSON.stringify(persons),如下:
var option = {
                url: ‘/test/ReadPersons’,
                type: ‘POST’,
                data: JSON.stringify(persons),
                dataType: ‘html’,
                contentType: ‘application/json’,
                success: function (result) { alert(result); }
            };
那么能够获得到实在完整的json数据了4858.com 6

        public bool gender 
        { 
            set; 
            get; 
        } 
        public string city 
        { 
            set; 
            get; 
        }

[Route(“ChangeDetailInfoee”)]
[ValidateInput(false)]

        public override string ToString() 
        { 
            string s = string.Format(@”id:{0} 
name:{1} 
age:{2} 
gender:{3} 
city:{4} 
“, id, name, age, gender, city); 
            return s; 
        } 
    }

最后,此处再演示一个更复杂的参数类型,以便加深领会。
率先看一下Controller中的方法签名,TestClassB
和三个TestClassA的List。稍显复杂。
public ActionResult Fortest(TestClassB TB,List<TestClassA> TA)
        {
            string result = “”;
            return Content(result);
        }
再看TestClassA和TestClassB,更显复杂。不过结构要清楚的话,也不是很难。
public class TestClassA
    {
       public string a1 { set; get; }
       public List<string> a2 { set; get; }
    }
    public class TestClassB
    {
        public string b1 { set; get; }
        public InnerTestClassC ITCC { set; get; }
        public class InnerTestClassC
        {
            public List<int> c1 { set; get; }
        }
    } 看js代码:稳步的构造出一个json格式。
$(“#btn”).click(function () {
            var jsondata = { TB: {}, TA: [] };
            jsondata.TB.b1 = “b1”;
            jsondata.TB.ITCC = {};
            jsondata.TB.ITCC.c1 = new Array(1, 2, 3, 4);
            var ta1 = {};
            ta1.a1 = “a1”;
            ta1.a2 = new Array(“a”, “b”, “x”, “y”);
           var ta2 = {};
            ta2.a1 = “a2”;
            ta2.a2 = new Array(“a2”, “b2”, “x2”);
            jsondata.TA.push(ta1);
            jsondata.TA.push(ta2);
            var option = {
                url: ‘/test/Fortest’,
                type: ‘POST’,
                data: JSON.stringify(jsondata),
                dataType: ‘html’,
                contentType: ‘application/json’,
                success: function (result) { alert(result); }
            };
            $.ajax(option);
        });
最终,发送出去的json字符串如下:
{“TB”:{“b1″:”b1″,”ITCC”:{“c1″:[1,2,3,4]}},”TA”:[{“a1″:”a1″,”a2”:[“a”,”b”,”x”,”y”]},{“a1″:”a2″,”a2”:[“a2″,”b2″,”x2”]}]}
Controller接收到那几个json串后,就能够自行的相配参数了。具体获得的参数如下截图:

        public override string ToString() 
        { 
            string s = string.Format(@”id:{0} 
name:{1} 
age:{2} 
gender:{3} 
city:{4} 
“, id, name, age, gender, city); 
            return s; 
        } 
    }

public void ChangeDetailInfoee(ListOption option)
{
}

那么controller方法分别收受单个model和三个model的List。选取通过ajax传递参数。
对于传递单个参数的景观,若是js代码如下:

 4858.com 74858.com 8

那正是说controller方法分别收受单个model和叁个model的List。采纳通过ajax传递参数。
对于传递单个参数的情状,假若js代码如下:

 

复制代码 代码如下:

controller中的方法是之类: public
ActionResult ReadPerson(PersonModel model) { string s =
model.ToString(); return Content(s); } public ActionResult
ReadPersons(List…

复制代码 代码如下:

 

var person = { 
               id: “001”, 
               name: “zhangsan”, 
               age: “20”, 
               gender: true, 
               city: “shanghai” 
           };

var person = { 
               id: “001”, 
               name: “zhangsan”, 
               age: “20”, 
               gender: true, 
               city: “shanghai” 
           };

 

var option = { 
               url: ‘/test/ReadPerson’, 
               type: ‘POST’, 
               data: person, 
               dataType: ‘html’, 
               success: function (result) { alert(result); } 
           }; 
$.ajax(option);

var option = { 
               url: ‘/test/ReadPerson’, 
               type: ‘POST’, 
               data: person, 
               dataType: ‘html’, 
               success: function (result) { alert(result); } 
           }; 
$.ajax(option);

 /******直接在前段传List集结,后台用集结去接受,用索引更新Name****  

从chrome中截图能够看看如下:
4858.com 9

从chrome中截图能够观察如下:
4858.com 10

//前端–1

传递的数额是一串Form数据,依照命名相配的基准,也是足以获得数据的。
4858.com 11

传递的数量是一串Form数据,依照命名相称的条件,也是能够收获数据的。
4858.com 12

var data = [];

将option 的代码改成如下

将option 的代码改成如下

data.push({ name: ‘option[0].Id’, value: “123” }),
data.push({ name: ‘option[0].Overage’, value: “3%” }),
data.push({ name: ‘option[0].SampleQty’, value: “143” }),
data.push({ name: ‘option[0].Qty’, value: “123” }),

复制代码 代码如下:

复制代码 代码如下:

data.push({ name: ‘option[1].Id’, value: “124” }),
data.push({ name: ‘option[1].Overage’, value: “4%” }),
data.push({ name: ‘option[1].SampleQty’, value: “144” }),
data.push({ name: ‘option[1].Qty’, value: “124” })

var option = { 
               url: ‘/test/ReadPerson’, 
               type: ‘POST’, 
               data: JSON.stringify(person), 
               dataType: ‘html’, 
               success: function (result) { alert(result); } 
           }; 
$.ajax(option);

var option = { 
               url: ‘/test/ReadPerson’, 
               type: ‘POST’, 
               data: JSON.stringify(person), 
               dataType: ‘html’, 
               success: function (result) { alert(result); } 
           }; 
$.ajax(option);

 

里面JSON.stringify方法具名称叫 stringify ( value [ , replacer [ , space
] ] ),依据ECMA-26二正式stringify
函数重临的是JSON格式的字符串。它能够有三个参数。摘抄如下:
The stringify function returns a String in JSON format representing an
ECMAScript value. It can take three parameters. The first parameter is
required. The value parameter is an ECMAScript value, which is usually
an object or array, although it can also be a String, Boolean, Number or
null. The optional replacer parameter is either a function that alters
the way objects and arrays are stringified, or an array of Strings and
Numbers that acts as a white list for selecting the object properties
that will be stringified. The optional space parameter is a String or
Number that allows the result to have white space injected into it to
improve human readability.
暗中同意的ContentType的属性值是”application/x-www-form-urlencoded”
引自

当中JSON.stringify方法签字为 stringify ( value [ , replacer [ , space
] ] ),根据ECMA-262规范stringify
函数再次来到的是JSON格式的字符串。它能够有3个参数。摘抄如下:
The stringify function returns a String in JSON format representing an
ECMAScript value. It can take three parameters. The first parameter is
required. The value parameter is an ECMAScript value, which is usually
an object or array, although it can also be a String, Boolean, Number or
null. The optional replacer parameter is either a function that alters
the way objects and arrays are stringified, or an array of Strings and
Numbers that acts as a white list for selecting the object properties
that will be stringified. The optional space parameter is a String or
Number that allows the result to have white space injected into it to
improve human readability.
私下认可的ContentType的属性值是”application/x-www-form-urlencoded”
引自

//异步提交(通过点名后台对招待收的变量名称利用索引来对List集结举行填空)–贰

看请求头的截图:

看请求头的截图:

$.ajax({
url: “/order/RfidOrder/ChangeDetailInfoee”,
data: data,
success: function (data) {
}
});

4858.com 13

4858.com 14

//后台定义接收–三

从而,传递到controller的是一个json字符串,MVC依照命名相称也是能够收获到参数的值。

为此,传递到controller的是三个json字符串,MVC依据命名匹配也是足以博获得参数的值。

[Route(“ChangeDetailInfoee”)]
[ValidateInput(false)]
public void ChangeDetailInfoee(List<ListOption> option)
{
}

将将option 的代码改成如下

将将option 的代码改成如下

 

复制代码 代码如下:

复制代码 代码如下:

/*********ListOption********/

var option = { 
                url: ‘/test/ReadPerson’, 
                type: ‘POST’, 
                data: person, 
                dataType: ‘html’, 
                 contentType: ‘application/json’, 
                 success: function (result) { alert(result); } 
                }; 

var option = { 
                url: ‘/test/ReadPerson’, 
                type: ‘POST’, 
                data: person, 
                dataType: ‘html’, 
                 contentType: ‘application/json’, 
                 success: function (result) { alert(result); } 
                }; 

public class ListOption
{
public string Id { get; set; }
public string Overage { get; set; }
public string SampleQty { get; set; }
public string Qty { get; set; }
}

把contentType改成json格式,那么获得的是失误的新闻。
虽说person是json对象,可是jquery中的ajax,data会自动的被转变到查询字符串格式key1=value壹&key贰=value2那种格局,很显明那种方式不是json格式,因而会出错。
要制止调换到查询字符串格式,只须要安装processData为fasle就可以。processData私下认可是true。
此地供给留意的是:当钦点了contentType的时候,数据将不再依据Form
Data的款型提交了,而是改为Request Data的样式提交。能够从图上的Request
Header中看出。要求留意的是,Form
Data提交的数目能够由FormCollection获得到。Request
Data格局提交的则不能够因而FormCollection获得。
只要把processData设置为默许值true。

把contentType改成json格式,那么获得的是失误的新闻。
虽说person是json对象,可是jquery中的ajax,data会活动的被转变来查询字符串格式key一=value1&key二=value2这种方式,很明朗那种情势不是json格式,由此会出错。
要防止转变到查询字符串格式,只需求安装processData为fasle就能够。processData暗中认可是true。
这里供给留意的是:当内定了contentType的时候,数据将不再依据Form
Data的花样提交了,而是改为Request Data的款式提交。可以从图上的Request
Header中看出。必要留意的是,Form
Data提交的数量能够由FormCollection获得到。Request
Data方式提交的则不能够由此FormCollection得到。
假使把processData设置为默许值true。

4858.com 15

4858.com 16

如果把processData设置为false。

如果把processData设置为false。

4858.com 17

4858.com 18

以上二种艺术,依据application/json的类别传给都会倒闭,因为json是基于文本的格式,上面三种方法传递的都不是json文本。因而会出错。

如上二种办法,依照application/json的等级次序传给都会失利,因为json是依据文本的格式,上边三种格局传送的都不是json文本。由此会出错。

因此,把option改成:

因此,把option改成:

复制代码 代码如下:

复制代码 代码如下:

var option = { 
    url: ‘/test/ReadPerson’, 
    type: ‘POST’, 
    data:JSON.stringify(person), 
    dataType: ‘html’, 
    contentType: ‘application/json’, 
    success: function (result) { alert(result); } 
}; 

var option = { 
    url: ‘/test/ReadPerson’, 
    type: ‘POST’, 
    data:JSON.stringify(person), 
    dataType: ‘html’, 
    contentType: ‘application/json’, 
    success: function (result) { alert(result); } 
}; 

则传递的正是json文本,由此依靠命名相称,就能够收获值了。

则传递的就是json文本,由此根据命名相配,就会博得值了。

4858.com 19

4858.com 20

对于较为轻便是数据类型,有时候不内定contentType也能因而命名匹配传值。然则对于有个别复杂点的数据类型,有时钦定contentType:
‘application/json’,管理起来更为便宜。
如若二个controller里的action方法是经受三个List类型的参数,举例:
public ActionResult ReadPersons(List<PersonModel> model)
这正是说js中先构造那样的一个json对象的数组。如下

对于较为轻松是数据类型,有时候不点名contentType也能经过命名相配传值。可是对于有个别复杂点的数据类型,有时钦定contentType:
‘application/json’,处理起来越发有益于。
倘诺二个controller里的action方法是接受一个List类型的参数,举个例子:
public ActionResult ReadPersons(List<PersonModel> model)
那正是说js中先构造那样的二个json对象的数组。如下

复制代码 代码如下:

复制代码 代码如下:

var persons = [{
                id: “001”,
                name: “zhangsan”,
                age: “20”,
                gender: true,
                city: “shanghai”
            },
            {
                id: “002”,
                name: “lisi”,
                age: “21”,
                gender: false,
                city: “beijing”
            }
            ];

var persons = [{
                id: “001”,
                name: “zhangsan”,
                age: “20”,
                gender: true,
                city: “shanghai”
            },
            {
                id: “002”,
                name: “lisi”,
                age: “21”,
                gender: false,
                city: “beijing”
            }
            ];

单独二个数组传递是当做data传递是,Form
Data也是无力回天分辨出的。因而把那几个数组再一次结缘三个json格局。如下:当中json的键值用model是为着能和controller中的参数名同样,能够相配。

单单贰个数组传递是用作data传递是,Form
Data也是心有余而力不足甄别出的。因而把那些数组再度构成3个json方式。如下:个中json的键值用model是为了能和controller中的参数名一样,能够匹配。

复制代码 代码如下:

复制代码 代码如下:

var jsonp = { model: persons };
           var option = {
               url: ‘/test/ReadPersons’,
               type: ‘POST’,
               data: jsonp,
               dataType: ‘html’,
               success: function (result) { alert(result); }
           };

var jsonp = { model: persons };
           var option = {
               url: ‘/test/ReadPersons’,
               type: ‘POST’,
               data: jsonp,
               dataType: ‘html’,
               success: function (result) { alert(result); }
           };

鉴于未钦赐contentType,因而是私下认可的application/x-www-form-urlencoded。此时是比照Form
Data的方法传递的,

鉴于未钦定contentType,因而是暗中同意的application/x-www-form-urlencoded。此时是依据Form
Data的诀要传送的,

4858.com 21

4858.com 22

能够从截图中看到。但是那种格式的数额,controller中不得不获取钦命model用3个因素,不大概获取成分中属性的值。

能够从截图中看到。不过那种格式的数码,controller中不得不获得内定model用3个因素,不只怕获得元素中属性的值。

4858.com 23

4858.com 24

如果把data改成JSON.stringify(jsonp),如下:   

如果把data改成JSON.stringify(jsonp),如下:   

复制代码 代码如下:

复制代码 代码如下:

var option = {
              url: ‘/test/ReadPersons’,
              type: ‘POST’,
              data: JSON.stringify(jsonp),
              dataType: ‘html’,
              success: function (result) { alert(result); }
          };

var option = {
              url: ‘/test/ReadPersons’,
              type: ‘POST’,
              data: JSON.stringify(jsonp),
              dataType: ‘html’,
              success: function (result) { alert(result); }
          };

4858.com 25

4858.com 26

那么传递过去的Form
Data是1串字符串,controller跟不能甄别出这几个东西,因而获不到值。假若一味设置contentType:
‘application/json’,而传递的又不是json格式的数量,如下:

那就是说传递过去的Form
Data是1串字符串,controller跟不能辨识出那几个东西,由此获不到值。假设单单设置contentType:
‘application/json’,而传递的又不是json格式的数目,如下:

那正是说传递过去的Form
Data是一串字符串,controller跟不能够辨别出这一个东西,由此获不到值。假若仅仅设置contentType:
‘application/json’,而传递的又不是json格式的数码,如下:

这正是说传递过去的Form
Data是一串字符串,controller跟不可能识别出这几个事物,因而获不到值。若是仅仅设置contentType:
‘application/json’,而传递的又不是json格式的数码,如下:

复制代码 代码如下:

复制代码 代码如下:

var option = {
    url: ‘/test/ReadPersons’,
    type: ‘POST’,
    data: jsonp,
    dataType: ‘html’,
    contentType: ‘application/json’,
    success: function (result) { alert(result); }
};

var option = {
    url: ‘/test/ReadPersons’,
    type: ‘POST’,
    data: jsonp,
    dataType: ‘html’,
    contentType: ‘application/json’,
    success: function (result) { alert(result); }
};

因为jquery的ajax方法会把data转变来查询字符串,因而就形成如下的旗帜。那串文本当然不适合json格式,因而会晤世上边包车型大巴一无所能。

因为jquery的ajax方法会把data转变来查询字符串,因而就改为如下的指南。那串文本当然不适合json格式,因而会产出上面包车型客车荒谬。

4858.com 27

4858.com 28

4858.com 29

4858.com 30

要是设置contentType: ‘application/json’,并且安装data:
JSON.stringify(persons),如下:

倘使设置contentType: ‘application/json’,并且安装data:
JSON.stringify(persons),如下:

复制代码 代码如下:

复制代码 代码如下:

var option = {
                url: ‘/test/ReadPersons’,
                type: ‘POST’,
                data: JSON.stringify(persons),
                dataType: ‘html’,
                contentType: ‘application/json’,
                success: function (result) { alert(result); }
            };

var option = {
                url: ‘/test/ReadPersons’,
                type: ‘POST’,
                data: JSON.stringify(persons),
                dataType: ‘html’,
                contentType: ‘application/json’,
                success: function (result) { alert(result); }
            };

那么能够获得到真正完整的json数据了

那正是说能够获取到确实完整的json数据了

4858.com 31

4858.com 32

最终,此处再演示2个更错综复杂的参数类型,以便加深了然。
首先看一下Controller中的方法签字,TestClassB
和3个TestClassA的List。稍显复杂。

终极,此处再演示3个更盘根错节的参数类型,以便加深领悟。
首先看一下Controller中的方法签字,TestClassB
和三个TestClassA的List。稍显复杂。

复制代码 代码如下:

复制代码 代码如下:

public ActionResult Fortest(TestClassB TB,List<TestClassA> TA)
        {
            string result = “”;
            return Content(result);
        }

public ActionResult Fortest(TestClassB TB,List<TestClassA> TA)
        {
            string result = “”;
            return Content(result);
        }

再看TestClassA和TestClassB,更显复杂。然而结构要清晰的话,也不是很难。

4858.com ,再看TestClassA和TestClassB,更显复杂。可是结构要明晰的话,也不是很难。

复制代码 代码如下:

复制代码 代码如下:

public class TestClassA
    {
       public string a1 { set; get; }
       public List<string> a2 { set; get; }
    }
    public class TestClassB
    {
        public string b1 { set; get; }
        public InnerTestClassC ITCC { set; get; }
        public class InnerTestClassC
        {
            public List<int> c1 { set; get; }
        }
    }

public class TestClassA
    {
       public string a1 { set; get; }
       public List<string> a2 { set; get; }
    }
    public class TestClassB
    {
        public string b1 { set; get; }
        public InnerTestClassC ITCC { set; get; }
        public class InnerTestClassC
        {
            public List<int> c1 { set; get; }
        }
    }

看js代码:逐步的布局出几个json格式。

看js代码:稳步的构造出三个json格式。

复制代码 代码如下:

复制代码 代码如下:

$(“#btn”).click(function () {
            var jsondata = { TB: {}, TA: [] };
            jsondata.TB.b1 = “b1”;
            jsondata.TB.ITCC = {};
            jsondata.TB.ITCC.c1 = new Array(1, 2, 3, 4);
            var ta1 = {};
            ta1.a1 = “a1”;
            ta1.a2 = new Array(“a”, “b”, “x”, “y”);
           var ta2 = {};
            ta2.a1 = “a2”;
            ta2.a2 = new Array(“a2”, “b2”, “x2”);
            jsondata.TA.push(ta1);
            jsondata.TA.push(ta2);
            var option = {
                url: ‘/test/Fortest’,
                type: ‘POST’,
                data: JSON.stringify(jsondata),
                dataType: ‘html’,
                contentType: ‘application/json’,
                success: function (result) { alert(result); }
            };
            $.ajax(option);
        });

$(“#btn”).click(function () {
            var jsondata = { TB: {}, TA: [] };
            jsondata.TB.b1 = “b1”;
            jsondata.TB.ITCC = {};
            jsondata.TB.ITCC.c1 = new Array(1, 2, 3, 4);
            var ta1 = {};
            ta1.a1 = “a1”;
            ta1.a2 = new Array(“a”, “b”, “x”, “y”);
           var ta2 = {};
            ta2.a1 = “a2”;
            ta2.a2 = new Array(“a2”, “b2”, “x2”);
            jsondata.TA.push(ta1);
            jsondata.TA.push(ta2);
            var option = {
                url: ‘/test/Fortest’,
                type: ‘POST’,
                data: JSON.stringify(jsondata),
                dataType: ‘html’,
                contentType: ‘application/json’,
                success: function (result) { alert(result); }
            };
            $.ajax(option);
        });

末尾,发送出去的json字符串如下:
{“TB”:{“b1″:”b1″,”ITCC”:{“c1″:[1,2,3,4]}},”TA”:[{“a1″:”a1″,”a2”:[“a”,”b”,”x”,”y”]},{“a1″:”a2″,”a2”:[“a2″,”b2″,”x2”]}]}
Controller接收到那几个json串后,就能够活动的合营参数了。具体获得的参数如下截图:

末段,发送出去的json字符串如下:
{“TB”:{“b1″:”b1″,”ITCC”:{“c1″:[1,2,3,4]}},”TA”:[{“a1″:”a1″,”a2”:[“a”,”b”,”x”,”y”]},{“a1″:”a2″,”a2”:[“a2″,”b2″,”x2”]}]}
Controller接收到那些json串后,就能够半自动的卓殊参数了。具体得到的参数如下截图:

4858.com 33

4858.com 34

4858.com 35

4858.com 36

**总结:

**总结:

**壹.不点名contentType的话,私下认可都以application/x-www-form-urlencoded格局发送。此时固然发送的是json格式的数额,私下认可处境下,jquery的ajax也会把他转为查询字符串的花样(能够透过修改ajax参数修改),以FormData的款式发送出去。
二.不钦定contentType的时候,假设controller中的方法签字相比轻易,那么就算是FormData格局的多少也能由MVC的命名相配规则得到到数量。
三.点名contentType为’application/json’时候,发送的多少必须是契合json规范的字符串。平时,使用
JSON.stringify(jsondata)有较好的可读性,能够获得2个json字符串。当然,不是必须的。使用拼接的字符串,只倘诺符合json规范的,也是能够发送的。
四.壹旦contentType为’application/json’时,发送的data不是相符json典型的字符串,则会出错。
5.平时状态下,尽量钦定contentType为’application/json’,并且发送json字符串作为发送数据,那样可读性更加好,并且对于复杂的函数签名,也能起到很好的相配。

**一.不钦赐contentType的话,暗许都以application/x-www-form-urlencoded情势发送。此时固然发送的是json格式的多少,暗许情状下,jquery的ajax也会把他转为查询字符串的款型(能够透过修改ajax参数修改),以FormData的样式发送出去。
2.不钦赐contentType的时候,如果controller中的方法具名比较轻易,那么即便是FormData情势的数据也能由MVC的命名相配规则获得到数码。
三.点名contentType为’application/json’时候,发送的多寡必须是相符json标准的字符串。日常,使用
JSON.stringify(jsondata)有较好的可读性,可以获取3个json字符串。当然,不是必须的。使用拼接的字符串,只假设吻合json规范的,也是足以发送的。
肆.假使contentType为’application/json’时,发送的data不是顺应json标准的字符串,则会出错。
5.惯常状态下,尽量钦定contentType为’application/json’,并且发送json字符串作为发送数据,那样可读性更加好,并且对于复杂的函数具名,也能起到很好的匹配。

本文出自 “一头博客” 博客

正文出自 “三只博客” 博客

Ajax方法传值到action,本文是对该文的补给 假如 controller中的方法是之类:
复制代码 代码如下: public ActionResult Read…

你或者感兴趣的篇章:

  • XMLHttpRequest of ajax
  • AJAX客户端表明,XMLHttpRequest对象
  • AJAX中还要发送八个请求XMLHttpRequest对象管理方法
  • ajax 入门基础之
    XMLHttpRequest对象总括
  • Ajax
    xmlHttpRequest的status的值的含义
  • jquery ajax学习笔记2施用XMLHttpRequest对象的responseXML
  • php中XMLHttpRequest(Ajax)不可能安装自定义的Referer的消除措施
  • Ajax通信原理XMLHttpRequest
  • 怎么着用ajax来创制2个XMLHttpRequest对象
  • AJAX(XMLHttpRequest.status)状态码
  • 堤防jQuery ajax
    Load使用缓存的法子小结
  • jquery ajaxSubmit
    异步提交的简练达成
  • Jquery
    Ajax方法传值到action的诀窍
  • jQuery ajax调用WCF服务实例
  • jquery
    ajax请求方式与唤醒用户正在处理请稍等
  • 因而XMLHttpRequest和jQuery达成ajax的两种方法

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有