通过Ajax post Json类型的数据到Controller

清疚 2022-04-10 11:21 194阅读 0赞

View

function postSimpleData() {
            $.ajax({
                type: "POST",
                url: "/Service/SimpleData",
                contentType: "application/json", //必须有
                dataType: "json", //表示返回值类型，不必须
                data: JSON.stringify({ 'foo': 'foovalue', 'bar': 'barvalue' }),  //相当于 //data: "{'str1':'foovalue', 'str2':'barvalue'}",
                success: function (jsonResult) {
                    alert(jsonResult);
                }
            });
        }
        function postListString() {
            $.ajax({
                type: "POST",
                url: "/Service/ListString",
                contentType: "application/json",
                dataType: "json",
                data: JSON.stringify({ "BuIds": ["1", "2", "3"] }),
                success: function (jsonResult) {
                    alert(jsonResult);
                }
            });
        }
        function postEmployees() {
            $.ajax({
                type: "POST",
                url: "/Service/Employees",
                contentType: "application/json",
                dataType: "json",
                data: JSON.stringify({
                    "Employees": [
                                        { "firstName": "Bill", "lastName": "Gates" },
                                        { "firstName": "George", "lastName": "Bush" },
                                        { "firstName": "Thomas", "lastName": "Carter" }
                                     ]
    
                }),
                success: function (jsonResult) {
                    alert(jsonResult);
                }
            });
        }

Controller

[HttpPost]
            public ActionResult SimpleData(string foo, string bar)
            {
                return Json("SimpleData", JsonRequestBehavior.AllowGet);
            }
    
            [HttpPost]
            public ActionResult ListString(List<string> buIds)
            {
                return Json("ListString", JsonRequestBehavior.AllowGet);
            }
            [HttpPost]
            public ActionResult Employees(List<Employee> Employees)
            {
                return Json("Employees", JsonRequestBehavior.AllowGet);
            }

public class Employee
        {
    
            public string FirstName { get; set; }
    
            public string LastName { get; set; }
        }

结果![11144123-fefae94a7a9b48eba7c1287778e90a8e.png][]

值得注意的有2点：

1）Ajax 选项中

contentType: "application/json"

这一条必须写，表明request的数据类型是json。

而

dataType: "json"

这一条表示返回值的类型，不必须，且依据返回值类型而定。

2）选项中

data: JSON.stringify({ 'foo': 'foovalue', 'bar': 'barvalue' })

很多时候我们将数据写作：

{ 'foo': 'foovalue', 'bar': 'barvalue' }

这样会导致错误，因为js会默认将这个json对象放到表单数据中，故而导致controller接收不到。

有两种办法处理：第一种方式是用JSON.stringify()函数，其中JSON被Ecmascript5定义为全局对象。有关该函数的用法，见[此处][Link 1]。

第二种方式是直接用双引号包裹起来，比如data: "\{'str1':'foovalue', 'str2':'barvalue'\}"。

[11144123-fefae94a7a9b48eba7c1287778e90a8e.png]: /images/20220331/6e32409405c74348beb5cd5b3a99e722.png
[Link 1]: http://www.cnblogs.com/anychem/archive/2012/04/02/2429785.html

发表评论取消回复

表情：

评论列表（有 0 条评论，194人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery post java对象_java中支持前端jq通过ajax提交（post)json内容到控制器

public class TestFilter implements HandlerInterceptor \{ @Override public boolean preH

矫情吗；*/ 2022年11月03日 05:27/ 0 赞/ 128 阅读

相关 ajax json post,jQuery ajax POST json

You are probably passing encoded Unicode characters to decode\_json, not binary UTF-8 ch

待我称王封你为后i/ 2022年09月03日 12:12/ 0 赞/ 256 阅读

相关 ajax post ashx json,ashx 获取ajax Post到后台json数据

前台页面代码： var json = \[\{ "Name": "Pavan Kumar Pabothu", "Age": 27, "ID": 361621 \}, \{ "

迈不过友情╰/ 2022年09月03日 11:17/ 0 赞/ 300 阅读

相关 HttpClient通过Post方式发送Json数据

服务器用的是Springmvc，接口内容： \[java\] [view plain][] [copy][view plain] [print][view pla

清疚/ 2022年06月14日 02:46/ 0 赞/ 220 阅读

相关 ajax使用POST提交json数据

$(document).ready(function () { var schoolList={ "pageCount": "2",

梦里梦外;/ 2022年05月29日 12:06/ 0 赞/ 317 阅读

相关【PHP】如何处理Ajax通过POST传递过来的数据

声明：index.html 与 info.php 处于同一级目录当传输一个参数时 <!DOCTYPE html> <html lang="en">

- 日理万妓/ 2022年05月24日 09:54/ 0 赞/ 209 阅读

相关通过Ajax post Json类型的数据到Controller

View function postSimpleData() { $.ajax({ type: "POST",

清疚/ 2022年04月10日 11:21/ 0 赞/ 195 阅读

相关 postman 提交post，提交json类型的数据

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1

心已赠人/ 2022年03月25日 06:28/ 0 赞/ 308 阅读

相关 SpringMVC通过Ajax处理数据Json数据

1、所需要的jar jackson-annotations.jar jackson-core.jar jackson-databind.jar 2、@Respo

╰+攻爆jí腚メ/ 2022年02月25日 02:16/ 0 赞/ 333 阅读

相关 ajax post json到服务器的小细节

1.服务器端，spring mvc 代码： @RequestMapping(value = "/save") @ResponseBody public BaseMod

深碍√TFBOYSˉ_/ 2021年12月20日 15:39/ 0 赞/ 212 阅读