Mvc.Js.Отправка запросов на сервер и обработка ответа на клиенте разными способами

Отправка Get запросов в строке запроса

Создадим контроллер Requests и создадим в нем метод GetRequest

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace JSLearning.Controllers
{
    public class RequestsController : Controller
    {
        // GET: Requests
        public ActionResult Index()
        {
            return View();
        }

        [HttpGet]
        public ContentResult GetRequest()
        {
            return Content("param1=" + Request["param1"] +
                " param2=" + Request["param2"]);
        }
    }
}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace JSLearning.Controllers

{

public class RequestsController : Controller

{

// GET: Requests

public ActionResult Index()

{

return View();

}

[HttpGet]

public ContentResult GetRequest()

{

return Content("param1=" + Request["param1"] +

" param2=" + Request["param2"]);

}

Обратимся на сервер со следующим запросом

http://localhost:56646/Requests/GetRequest?param1=123&param2=1234

1	http://localhost:56646/Requests/GetRequest?param1=123&param2=1234

Отправка Get запросов через XMLHttpRequest

Этот способ позволяет обрабатывать ответ сервера на клиенте

Добавим в контроллер пару методов для отправки запроса и обработки запроса

[HttpGet]
        public ActionResult GetRequestSendData()
        {
            return View();
        }
        [HttpGet]
        public ActionResult GetRequestProcessData()
        {
            string Name = HttpUtility.UrlDecode(Request["name"]);
            string Age = HttpUtility.UrlDecode(Request["age"]);

            return  Content("name=" + Name +" age=" + Age);
        }

[HttpGet]

public ActionResult GetRequestSendData()

{

return View();

}

[HttpGet]

public ActionResult GetRequestProcessData()

{

string Name = HttpUtility.UrlDecode(Request["name"]);

string Age = HttpUtility.UrlDecode(Request["age"]);

return Content("name=" + Name +" age=" + Age);

}

В представлении будем отправлять запрос при помощи XMLHttpRequest

@{
    ViewBag.Title = "GetRequestSendData";
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div id="output"></div>
    <script>
        // объект для отправки
        var user = {
            name: "Tom",
            age: 23
        };

        var request = new XMLHttpRequest();
        function reqReadyStateChange() {
            if (request.readyState == 4) {
                var status = request.status;
                if (status == 200) {
                    document.getElementById("output").innerHTML = "<br>" + request.responseText;
                }
            }
        }
        // строка с параметрами для отправки
        //var requestBody = "name=" + user.name + "&age=" + user.age;
        var requestBody = "name=" + encodeURIComponent(user.name) + "&age=" + encodeURIComponent(user.age);
        request.open("GET", "http://localhost:56646/Requests/GetRequestProcessData?" + requestBody);
        request.onreadystatechange = reqReadyStateChange;
        request.send();
    </script>
</body>
</html>

ViewBag.Title = "GetRequestSendData";

}

<!DOCTYPE html>

<html>

<head>

</head>

<body>

// объект для отправки

var user = {

age: 23

};

var request = new XMLHttpRequest();

function reqReadyStateChange() {

if (request.readyState == 4) {

var status = request.status;

if (status == 200) {

document.getElementById("output").innerHTML = "<br>" + request.responseText;

}

// строка с параметрами для отправки

//var requestBody = "name=" + user.name + "&age=" + user.age;

var requestBody = "name=" + encodeURIComponent(user.name) + "&age=" + encodeURIComponent(user.age);

request.open("GET", "http://localhost:56646/Requests/GetRequestProcessData?" + requestBody);

request.onreadystatechange = reqReadyStateChange;

request.send();

</script>

</body>

</html>

Результат

Отправка Post запросов через XMLHttpRequest

В контроллере

[HttpGet]
        public ActionResult PostRequestSendData()
        {
            return View();
        }
        [HttpPost]
        public ActionResult PostRequestProcessData()
        {
            string Name = HttpUtility.UrlDecode(Request.Form["name"]);
            string Age = HttpUtility.UrlDecode(Request.Form["age"]);
            return Content("name=" + Name + " age=" + Age);
        }

[HttpGet]

public ActionResult PostRequestSendData()

{

return View();

}

[HttpPost]

public ActionResult PostRequestProcessData()

{

string Name = HttpUtility.UrlDecode(Request.Form["name"]);

string Age = HttpUtility.UrlDecode(Request.Form["age"]);

return Content("name=" + Name + " age=" + Age);

}

В представлении

@{
    ViewBag.Title = "PostRequestSendData";
}

<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <h2>PostRequestSendData</h2>
    <div id="output"> </div>
    <script>

        var user = {
            name: "Tom, and this is post request",
            age: 35
        };
        
            var request = new XMLHttpRequest();
            function reqReadyStateChange() {
                if (request.readyState == 4 && request.status == 200)
                    document.getElementById("output").innerHTML = request.responseText;
            }
            var body = "name=" + user.name + "&age=" + user.age;
            request.open("POST", "http://localhost:56646/Requests/PostRequestProcessData");
            request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            request.onreadystatechange = reqReadyStateChange;
            request.send(body);

    </script>
</body>
</html>

ViewBag.Title = "PostRequestSendData";

}

<html>

<head>

</head>

<body>

<h2>PostRequestSendData</h2>

var user = {

age: 35

};

var request = new XMLHttpRequest();

function reqReadyStateChange() {

if (request.readyState == 4 && request.status == 200)

document.getElementById("output").innerHTML = request.responseText;

}

var body = "name=" + user.name + "&age=" + user.age;

request.open("POST", "http://localhost:56646/Requests/PostRequestProcessData");

request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

request.onreadystatechange = reqReadyStateChange;

request.send(body);

</script>

</body>

</html>

Результат

Отправка формы из кода без ее графического создания

Методы в контроллере

[HttpGet]
        public ActionResult FormRequestSendData()
        {
            return View();
        }
        [HttpPost]
        public ActionResult FormRequestProcessData()
        {
            string Name = HttpUtility.UrlDecode(Request.Form["name"]);
            string Age = HttpUtility.UrlDecode(Request.Form["age"]);
            return Content("name=" + Name + " age=" + Age);
        }

[HttpGet]

public ActionResult FormRequestSendData()

{

return View();

}

[HttpPost]

public ActionResult FormRequestProcessData()

{

string Name = HttpUtility.UrlDecode(Request.Form["name"]);

string Age = HttpUtility.UrlDecode(Request.Form["age"]);

return Content("name=" + Name + " age=" + Age);

}

Представление

@{
    ViewBag.Title = "FormRequestSendData";
}



<html>
<head>
    <meta charset="utf-8" />
</head>
<body>   
    <h2>FormRequestSendData</h2>
    <div id="output"> </div>
    <script>

        var user = {
            name: "Tom, and this is post request",
            age: 35
        };
            
            var formData = new FormData();
            formData.append('name', 'Tom');
            formData.append('age', 23);

            var request = new XMLHttpRequest();
            function reqReadyStateChange() {
                if (request.readyState == 4 && request.status == 200)
                    document.getElementById("output").innerHTML = request.responseText;
            }

            request.open("POST", "http://localhost:56646/Requests/FormRequestProcessData");
            request.onreadystatechange = reqReadyStateChange;
            request.send(formData);


    </script>
</body>
</html>

ViewBag.Title = "FormRequestSendData";

}

<html>

<head>

</head>

<body>

<h2>FormRequestSendData</h2>

var user = {

age: 35

};

var formData = new FormData();

formData.append('name', 'Tom');

formData.append('age', 23);

var request = new XMLHttpRequest();

function reqReadyStateChange() {

if (request.readyState == 4 && request.status == 200)

document.getElementById("output").innerHTML = request.responseText;

}

request.open("POST", "http://localhost:56646/Requests/FormRequestProcessData");

request.onreadystatechange = reqReadyStateChange;

request.send(formData);

</script>

</body>

</html>

Результат

Отправка формы из кода (с её графическим созданием)

[HttpGet]
        public ActionResult Form2RequestSendData()
        {
            return View();
        }
        [HttpPost]
        public ActionResult Form2RequestProcessData()
        {
            string Name = HttpUtility.UrlDecode(Request.Form["name"]);
            string Age = HttpUtility.UrlDecode(Request.Form["age"]);
            return Content("name=" + Name + " age=" + Age);
        }

[HttpGet]

public ActionResult Form2RequestSendData()

{

return View();

}

[HttpPost]

public ActionResult Form2RequestProcessData()

{

string Name = HttpUtility.UrlDecode(Request.Form["name"]);

string Age = HttpUtility.UrlDecode(Request.Form["age"]);

return Content("name=" + Name + " age=" + Age);

}

Представление

@{
    ViewBag.Title = "Form2RequestSendData";
}

<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <h2>Form2RequestSendData</h2>
    <div id="output"></div>
    <form name="user" action="http://localhost:56646/Requests/Form2RequestProcessData">
        <input type="text" name="username" placeholder="Введите имя" /><br />
        <input type="text" name="age" placeholder="Введите возраст" /><br />
        <input type="submit" name="submit" value="Отправить" />
    </form>


    
    <script>
        // получаем объект формы
        var form = document.forms.user;
        // прикрепляем обработчик кнопки
        form.submit.addEventListener("click", sendRequest);

        // обработчик нажатия
        function sendRequest(event) {

            event.preventDefault();
            var formData = new FormData(form);

            var request = new XMLHttpRequest();

            request.open("POST", form.action);

            request.onreadystatechange = function () {
                if (request.readyState == 4 && request.status == 200)
                    document.getElementById("output").innerHTML = request.responseText;
            }
            request.send(formData);
        }
    </script>
</body>
</html>

ViewBag.Title = "Form2RequestSendData";

}

<html>

<head>

</head>

<body>

<h2>Form2RequestSendData</h2>

</form>

// получаем объект формы

var form = document.forms.user;

// прикрепляем обработчик кнопки

form.submit.addEventListener("click", sendRequest);

// обработчик нажатия

function sendRequest(event) {

event.preventDefault();

var formData = new FormData(form);

var request = new XMLHttpRequest();

request.open("POST", form.action);

request.onreadystatechange = function () {

if (request.readyState == 4 && request.status == 200)

document.getElementById("output").innerHTML = request.responseText;

}

request.send(formData);

}

</script>

</body>

</html>

Результат

Отправка и получение json данных

Методы в контроллере

[HttpGet]
        public ActionResult JsonRequestSendData()
        {
            return View();
        }
        [HttpPost]
        public ActionResult JsonRequestProcessData()
        {           
            Stream req = Request.InputStream;
            req.Seek(0, System.IO.SeekOrigin.Begin);
            string json = new StreamReader(req).ReadToEnd();
            string UserName;
            string Age;
            //InputClass input = null;
            try
            {
                dynamic stuff = JsonConvert.DeserializeObject(json);
                UserName = stuff.username;
                Age = stuff.age;
                // assuming JSON.net/Newtonsoft library from http://json.codeplex.com/
                //input = JsonConvert.DeserializeObject<InputClass>(json)
            }

            catch (Exception ex)
            {
                // Try and handle malformed POST body
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            return Content("name=" + UserName + " age=" + Age);
        }

[HttpGet]

public ActionResult JsonRequestSendData()

{

return View();

}

[HttpPost]

public ActionResult JsonRequestProcessData()

{

Stream req = Request.InputStream;

req.Seek(0, System.IO.SeekOrigin.Begin);

string json = new StreamReader(req).ReadToEnd();

string UserName;

string Age;

//InputClass input = null;

try

{

dynamic stuff = JsonConvert.DeserializeObject(json);

UserName = stuff.username;

Age = stuff.age;

// assuming JSON.net/Newtonsoft library from http://json.codeplex.com/

//input = JsonConvert.DeserializeObject<InputClass>(json)

}

catch (Exception ex)

{

// Try and handle malformed POST body

return new HttpStatusCodeResult(HttpStatusCode.BadRequest);

}

return Content("name=" + UserName + " age=" + Age);

}

Представление для отправки и получения данных

@{
    ViewBag.Title = "PostRequestSendData";
}

<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <h2>JsonRequestSendData</h2>
    <div id="output"> </div>
    <script>

        var user = {
            username: "Tom",
            age: 23
        };
        var json = JSON.stringify(user);
        var request = new XMLHttpRequest();
        request.open("POST", "http://localhost:56646/Requests/JsonRequestProcessData");
        request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
        request.onreadystatechange = function () {
            if (request.readyState == 4 && request.status == 200)
                document.getElementById("output").innerHTML = request.responseText;
        }
        request.send(json);

    </script>
</body>
</html>

ViewBag.Title = "PostRequestSendData";

}

<html>

<head>

</head>

<body>

<h2>JsonRequestSendData</h2>

var user = {

username: "Tom",

age: 23

};

var json = JSON.stringify(user);

var request = new XMLHttpRequest();

request.open("POST", "http://localhost:56646/Requests/JsonRequestProcessData");

request.setRequestHeader('Content-type', 'application/json; charset=utf-8');

request.onreadystatechange = function () {

if (request.readyState == 4 && request.status == 200)

document.getElementById("output").innerHTML = request.responseText;

}

request.send(json);

</script>

</body>

</html>

Нам также нужно установить плагин

Результат

Mvc.Js.Отправка запросов на сервер и обработка ответа на клиенте разными способами

Отправка Get запросов в строке запроса

Отправка Get запросов через XMLHttpRequest

Отправка Post запросов через XMLHttpRequest

Отправка формы из кода без ее графического создания

Отправка формы из кода (с её графическим созданием)

Отправка и получение json данных

MY PROJECTS

Recent Posts

Categories