如何将 Json 对象（或字符串数​​据）从 Javascript xmlhttprequest 发送到 MVC 控制器

Question

我在 ASP.NET MVC 中创建了一个 Web 应用程序，并尝试通过 Javascript AJAX 调用控制器。在 Jquery 中，我们可以发送一个 json 对象，MVC 模型绑定器会自动尝试创建一个 .NET 对象并作为参数传入控制器。

但是，我正在使用无法使用 jquery 的网络工作者。所以我通过 vanilla xmlhttprequest 对象进行 AJAX 调用。有没有办法通过这个方法发送Json对象？

我使用了 xmlhttprequest 的 send 方法，但模型对象在控制器中为 null :(

Answer 1

您应该能够使用 JSON2 对其进行字符串化，并在发布帖子时将 Content-Type 标头设置为 application/json。

http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js

你会做这样的事情：

var xhr = new XMLHttpRequest();
xhr.open('POST', '/Controller/Action');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    }
}
xhr.send(JSON.stringify(myData));

Answer 2

这是一个例子。它假定您正在使用具有内置 JsonValueProviderFactory 的 ASP.NET MVC 3.0。如果这不是您的情况，您可以查看this blog post。

查看模型：

public class MyViewModel
{
    public string Prop1 { get; set; }
    public string Prop2 { get; set; }
}

控制器：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult SomeAction(MyViewModel model)
    {
        return Content("success", "text/plain");
    }
}

查看：

<script type="text/javascript">
    var http = new XMLHttpRequest();

    var value = '{ "prop1": "value 1", "prop2": "value 2" }';
    // It would be better to use JSON.stringify to properly generate
    // a JSON string
    /**
    var value = JSON.stringify({
        prop1: 'value 1',
        prop2: 'value 2'
    });
    **/

    http.open('POST', '/Home/SomeAction', true);
    http.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
    http.setRequestHeader('Content-Length', value.length);
    http.onreadystatechange = function () {
        if (http.readyState == 4 && http.status == 200) {
            alert(http.responseText);
        }
    }
    http.send(value); 
</script>

Answer 3

使用$.Ajax()，你可以很容易的从javascript获取数据到MVC中的Controller。

供参考，

var uname = 'Nikhil Prajapati'; $.ajax({

      url: "/Main/getRequestID",  // This is path of your Controller with Action Result.
      dataType: "json",           // Data Type for sending the data

      data: {                     // Data that will be passed to Controller
          'my_name': uname,     // assign data like key-value pair       
           // 'my_name'  like fields in quote is same with parameter in action Result
      },

      type: "POST",               // Type of Request
      contentType: "application/json; charset=utf-8", //Optional to specify Content Type.

      success: function (data) { // This function is executed when this request is succeed.
              alert(data);
      },

      error: function (data) {
              alert("Error");   // This function is executed when error occurred.
      }

)};

现在在控制器端，

public ActionResult getRequestID(String my_name) {

        MYDBModel myTable = new Models.MYDBModel();
        myTable.FBUserName = my_name;
        db.MYDBModel.Add(myTable);
        db.SaveChanges();              // db object of our DbContext.cs
        //return RedirectToAction(“Index”);   // After that you can redirect to some pages…
        return Json(true, JsonRequestBehavior.AllowGet);    // Or you can get that data back after inserting into database.. This json displays all the details to our view as well.
    }

更多参考.. 只是访问.. Send Data from Java Script to Controller in MVC