如何使用 Json 数据作为参数进行 Jquery Ajax 调用？

Posted 2023-05-08

【中文标题】如何使用 Json 数据作为参数进行 Jquery Ajax 调用？

【英文标题】：How to make an Jquery Ajax call with Json data as parameter?

【发布时间】：2021-07-21 10:36:27

【问题描述】：

我正在 ASP.NET MVC 框架中对 Action 进行 ajax 调用。在操作中，字符串 jsonModel 始终为空。我在这里错过了什么？你能帮忙吗？

仅供参考——我正在尝试保持操作的签名与我使用现有操作的签名相同。如果我们可以检查我们将 Json 数据发送到 Action 的方式以及为什么后续操作无法获取 Json 字符串，那就太好了。

Ajax 调用：

function send(SubmissionID, EntityOrganizationID) 
    var user = $('#commentrecipients').val();
    var comment = $('#Comment').val();  

    var scObj = ;
    scObj["EntityOrganizationID"] = EntityOrganizationID;
    scObj["SubmissionID"] = SubmissionID;
    scObj["Comment"] = comment;
    scObj["RecipientModels"] = user;

    
    var jsonModel = JSON.stringify(scObj);
    alert(jsonModel);

    $.ajax(
        url: "/Submission/SubmissionHeaderCommentAction",
        dataType: "JSON", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
        data: jsonModel,
        async:false,
        success: function (result) 
            // notify the data source that the request succeeded
            options.success(result);
        ,
        error: function (result) 
            // notify the data source that the request failed
            options.error(result);
        
    );

行动：

[AuditItem("SubmissionHeaderCommentAction")]
        public ActionResult SubmissionHeaderCommentAction(string jsonModel) // jsonModel comes as null
        
            //convert json to our poco model
            dynamic data = JObject.Parse(jsonModel);
.........

  return AdComplianceStatusResult(HttpStatusCode.OK, "Comment submitted successfully");
        

【问题讨论】：

这篇文章需要更多细节和清晰度

添加了更多信息。如果您还需要什么，请告诉我。

谢谢，我更新了我的答案。添加了您想要的代码。它已经过测试并且工作正常。

【参考方案1】：

修复你的 ajax

function send(SubmissionID, EntityOrganizationID) 
    var user = $('#commentrecipients').val();
    var comment = $('#Comment').val();  

    var jsonModel= 
    
      entityOrganizationID: EntityOrganizationID,
    submissionID : SubmissionID,
    comment : comment,
   recipientModels = user
;
    $.ajax(
       url: "/Submission/SubmissionHeaderCommentAction",
         data: jsonModel,
         success: function (result) 
            // notify the data source that the request succeeded
            options.success(result);
        ,
        error: function (result) 
            // notify the data source that the request failed
            options.error(result);
        
    );

恕我直言，使用 viewModel 的更好方法

public CommentViewModel

public int EntityOrganizationID get; set;, 
public int SubmissionID get; set;, 
public string Comment get; set;, 
public string  RecipientModels get; set;

通过这个动作

public IActionResult SubmissionHeaderCommentAction(CommentViewModel viewModel )
    

     //do something with data
    
      return Ok("Comment submitted successfully");
    

更新

如果您需要使用现有操作，可以使用此代码（在 Visual Studio 中测试过）

public IActionResult SubmissionHeaderCommentAction(string jsonModel)
    

CommentViewModel result= JsonConvert.DeserializeObject<CommentViewModel>(jsonModel);
    
     ....your code
    

并使用这个 ajax

function send(SubmissionID, EntityOrganizationID) 
    var user = $('#commentrecipients').val();
    var comment = $('#Comment').val();  

    var jsonObj= 
    
      entityOrganizationID: EntityOrganizationID,
    submissionID : SubmissionID,
    comment : comment,
   recipientModels = user
  ;
var jsonModel= = JSON.stringify(jsonObj);

    $.ajax(
       url: "/Submission/SubmissionHeaderCommentAction",
         data:  JsonModel:jsonModel ,
         success: function (result) 
            // notify the data source that the request succeeded
            options.success(result);
        ,
        error: function (result) 
            // notify the data source that the request failed
            options.error(result);
        
    );

【讨论】：

谢谢！这种方法对我很有效。但我正在使用的动作是现有的。我可以选择重用它或复制相同的代码并编写一个新操作，然后将其分解为单个参数并将它们作为 ajax 数据传递，就像你建议的那样。我想知道有什么方法可以让现有的动作保持相同的签名并重用它。

我终于想把它作为一个单独的动作，因为我必须在里面加入更多的逻辑。你的方法真的很有帮助。谢谢。

牛眼！我喜欢这些数据： JsonModel:jsonModel 。这有点棘手。非常感谢您的帮助。干得好。

嗨 Sergey - 我认为你是 Ajax 和 MVC 中最好的之一。我发布了另一个问题。如果你有机会，你能看看它，看看你能不能帮忙？ ***.com/questions/67340550/…

@Partha 谢谢你，但我从未使用过剑道。您是否考虑过为您的应用程序使用一个通用的网络选择列表而不是剑道？

【参考方案2】：

试试看：

 var jsonModel = JSON.stringify(scObj);

  var newObj = data:jsonModel ;//<===========  
  var newJsonModel  = JSON.stringify(newObj);//<===========

$.ajax(
            url: "/Submission/SubmissionHeaderCommentAction",
            dataType: "application/json",  //<=========
            data: newJsonModel ,//<===========
            async:false,
            success: function (result) 
                // notify the data source that the request succeeded
                options.success(result);
            ,
            error: function (result) 
                // notify the data source that the request failed
                options.error(result);
            
        );

行动：

[AuditItem("SubmissionHeaderCommentAction")]
        public ActionResult SubmissionHeaderCommentAction([FromBody]string data ) //<==============
        
            //convert json to our yourPocoModel
           dynamic obj = JObject.Parse(data); 

  return AdComplianceStatusResult(HttpStatusCode.OK, "Comment submitted successfully");
        

*** 已过期

【讨论】：

这是我代码库中的现有操作。没有办法保持参数类型相同并使其工作？否则我必须再次写一个动作。在这种情况下，我可以将其分解为单独的参数并将其传递给 Action。

同样的问题仍然存在。我们必须保持相同的动作签名。如果我将其分解为单独的参数并传递给 Action，它就可以工作。这种方法的唯一问题是我们必须编写另一个动作并将现有的动作放在一边。这一项有效 - public ActionResult SubmissionHeaderCommentActionNew(int SubmissionID, int? EntityOrganizationID, string Comment, int UserID).... data: SubmissionID: SubmissionID, EntityOrganizationID: EntityOrganizationID, Comment: Comment, UserID: UserID ,跨度>

【参考方案3】：

我认为你应该改变你的概念以使事情变得更容易：

function send(SubmissionID, EntityOrganizationID) 
    var user = $('#commentrecipients').val();
    var comment = $('#Comment').val();  

    var scObj = new Object();
    scObj.entityOrganizationID = EntityOrganizationID;
    scObj.submissionID = SubmissionID;
    scObj.comment = comment;
    scObj.recipientModels = user;

    
    var jsonModel = JSON.stringify(scObj);
    alert(jsonModel);

    $.ajax(
        url: "/Submission/SubmissionHeaderCommentAction",
        dataType: "JSON", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
        data: jsonModel,
        async:false,
        success: function (result) 
            // notify the data source that the request succeeded
            options.success(result);
        ,
        error: function (result) 
            // notify the data source that the request failed
            options.error(result);
        
    );

然后简单地返回 json：

public JsonResult SubmissionHeaderCommentAction(int entityOrganizationID, int submissionID, string comment, string  recipientModels)
    
                //so something with data
    
      return Json("Comment submitted successfully", JsonRequestBehavior.AllowGet);
    

【讨论】：

无法保持签名相同。该行动是现有行动。我不想复制操作代码。但你的方法有效。