通过 jQuery.Ajax 向 MVC 控制器发送多个项目

Posted 2023-03-31

【中文标题】通过 jQuery.Ajax 向 MVC 控制器发送多个项目

【英文标题】：Sending Multiple Items to MVC Controller via jQuery.Ajax

【发布时间】：2009-06-16 15:17:57

【问题描述】：

如果您使用 jQuery 之类的东西序列化表单，它通常会将 JSON 键和值映射到您要发布到的控制器操作上的对象的属性。所以：

jQuery:

function PostForm() 
    $.ajax(
        url: "/Home/TestMVC",
        type: "POST",
        dataType: "application/JSON",
        data:  $('#form').serialize(),
        complete: callFunction
        
    );

假设主要细节包含将参数名称作为键的元素，它们应该直接映射到对象：

行动：

public void TestMVC(MyObject obj)

//Obj should now contain the data from the serialised form

发布：

Name: "Bob"
Age: "999"
Sex: "Unknown"

有人知道这是如何工作的吗？每次我将表单 和任何其他数据 传递给控制器​​时，它都会中断。

我想向控制器发送数据的内容以及可以包含任意数量和类型的键/值对的 QueryString。我可以在服务器上提取这些键/值对，因为我无法在方法签名上为它们创建对象。但是，这无法按预期工作。

jQuery:

function PostForm() 

    $.ajax(
        url: "/Home/TestMVC",
        type: "POST",
        dataType: "application/JSON",
        data: 
         
           Obj: $('#form').serialize(),
           TheWeirdQueryString: $('.additionalParams').serialize(),
        
    );
;

行动：

public void TestMVC(MyObject obj, String TheWeirdQueryString)

//Obj now does NOT contain the element, it is NULL. Whereas TheWeirdQueryString works fine. 

帖子：

Obj: name=bob&age=999&sex="unknown"
TheWeirdQueryString: param1=1&param2=2

我认为这是因为我实际上已经创建了一个 JSON 对象作为数据并将属性设置为对象的名称。

Firebug 中出现的 POST 值存在差异。当我单独发布对象时，POST 值是对象/表单的所有键及其对应的值。在第二个示例中，有两个简单的属性，我给它们的名称，每个都包含一个 QueryString (Foo=1&Bar=2)，并且 MVC 不能将 QueryString 映射到对象的成员（或者它会出现）。

到底有没有像在第一个实例中那样开始工作，而且还要向动作的第二个参数发送额外的数据？我猜它是为 jquery 对表单进行序列化时创建的所有现有属性添加一个额外的属性。

我真正想要的 POST 是：

Name: "Bob"
Age: "999"
Sex: "Unknown"
TheWeirdQueryString: param1=1&param2=2

【问题讨论】：

你能发布你在这两种情况下看到的 POST 值吗？我不太明白你的描述。

完成。最后一个例子是我正在尝试制作的帖子。

【参考方案1】：

$.ajax 方法中的

dataType 参数是响应类型（您期望从服务器返回的数据类型），而不是请求。试试这个：

function PostForm() 
    $.ajax(
        url: "/Home/TestMVC",
        type: "POST",
        dataType: "application/JSON",
        data: $('#form').serialize() + "&" + $('.additionalParams').serialize()
    );
;

或：

function PostForm() 
    $.ajax(
        url: "/Home/TestMVC" + "?" + $('.additionalParams').serialize(),
        type: "POST",
        dataType: "application/JSON",
        data: $('#form').serialize()
    );
;

更新：

试试这个：

控制器：

public void TestMVC(MyObject obj, String[] TheWeirdQueryString)

客户：

function PostForm() 
    $.ajax(
        url: "/Home/TestMVC",
        type: "POST",
        dataType: "application/JSON",
        data: $('#form').serialize() + "&" + $('.additionalParams').serialize()
    );
;

但在客户端，您的附加参数必须采用以下格式：

TheWeirdQueryString[0]=param1&TheWeirdQueryString[1]=param2&...&TheWeirdQueryString[n]=paramN

所以 $('.additionalParams') 元素必须具有“id”和/或“name”属性，例如：TheWeirdQueryString[1]、TheWeirdQueryString[2] ... TheWeirdQueryString[N]

希望对你有帮助

【讨论】：

jquery 结果接收到一个 JSON 对象，我的引用是因为我认为数据的 创建了一个 JSON 对象？第一个示例不起作用。它只是将这些参数添加到我需要将所有参数作为单个参数放在字符串中的第一个对象中。如果我使用 Request.QueryString.

，第二个示例有效

第一个例子应该也能工作 - 你试过了吗？： var additionalParam = Form["additionalParam"];

我试过 var content = $('.additionalParam').serialize()? form["additionalParam"] 不同吗？

不错的解决方案，我实际上投票给你第一个，因为它正在工作。您发布的新的将不起作用，因为我需要密钥的名称（即元素的 ID/名称）对其执行处理。 （我把它变成了一个键/值对的字典）

【参考方案2】：

数据是一个对象

...
data:  
    x :$('#form').serialize(), 
    y:'something else'

...

【讨论】：

是的，这种方式的问题在于它会将 x 视为对象的属性，如第二个示例所示。我认为，这将键映射到 MVC 上的属性。

也许不是使用serialize()，而是使用来自这个插件malsup.com/jquery/form的formSerialize()@

【参考方案3】：

如果您想要一个键/值对字典，另一种解决方案：

public void TestMVC(MyObject obj, IDictionary<string, object> TheWeirdQueryString)

客户：

function PostForm() 
    $.ajax(
        url: "/Home/TestMVC",
        type: "POST",
        dataType: "application/JSON",
        data: $('#form').serialize() + "&" + $('.additionalParams').serialize()
    );
;

$('.additionalParams').serialize() 格式：

TheWeirdQueryString[0].Key=param0&TheWeirdQueryString[0].Value=value0&TheWeirdQueryString[1].Key=param1&TheWeirdQueryString[1].Value=value1&...&TheWeirdQueryString[n].Key=paramN&TheWeirdQueryString[n].Value=valueN

更新：

你需要这样的东西：

<input class="additionalParams" type="text" name="TheWeirdQueryString[0].Key" value="param0" />
<input class="additionalParams"type="text" name="TheWeirdQueryString[0].Value" value="value0" />
<!-- ... -->
<input class="additionalParams"type="text" name="TheWeirdQueryString[n].Key" value="paramN" />
<input class="additionalParams"type="text" name="TheWeirdQueryString[n].Value" value="valueN" />

【讨论】：

是 POST 格式应该是什么，还是我需要自己做格式。它一直在做 key:value key:value 而不是你发布的内容