Get
Создадим пару методов в контроллере Home
|
1 2 3 4 5 6 7 8 9 |
public ActionResult TestGetRequest() { return View(); } public string TestGetRequest2(string name, string age) { return ("Ваше имя: " + name + "; Ваш возраст: " + age); } |
Первый будет открывать представление, второй – показывать какие данные сервер получил из клиента.
Создадим представление для первого метода
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <div id="output"></div> <input id="elem" type="submit" name="submitButton" value="Отправить" /> <script> elem.addEventListener("click", sendRequest); function sendRequest(event) { //event.preventDefault(); var request = new XMLHttpRequest(); request.open("GET", "http://localhost:50860/Home/TestGetRequest2?name=Stas&age=35"); request.onreadystatechange = function () { if (request.readyState == 4 && request.status == 200) document.getElementById("output").innerHTML = request.responseText; } request.send(); } </script> </body> </html> |
Протестируем его
Как видно, данные успешно передались.
POST
|
1 2 3 4 5 6 7 8 9 |
public ActionResult TestPostRequest() { return View(); } [HttpPost] public string TestPostRequest2(string name, string age) { return ("Ваше имя: " + name + "; Ваш возраст: " + age); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <div id="output"></div> <form name="user" action="http://localhost:50860/Home/TestPostRequest2"> <input type="text" name="name" 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> |
Post запрос также успешно отработал!
Ещё по теме