XMLHttpRequest, formData и вэб-служба .asmx

ASP.NET
  1. 3 года назад

    Добрый день! Разбираюсь с использованием аякса. На основном проекте нужно отправлять данные и (возможно) файл на сервер. С помощью метода ajax библиотеки jQuery сделать не получилось. Попробовала переделать с помощью объекта XMLHttpRequest, отправлять файл научилась, а вот чтоб вместе с текстовыми данными... Не буду долго описывать историю проб и ошибок.

    Создала тестовый проект, который содержит только главную страницу, вэб-службу и javascript-файл.

    Default.aspx

    <body>
        <form id="form1" runat="server">
        <div>
            <button id="btn">Send message</button>
        </div>
        </form>
    </body>

    MyWebService.asmx.cs

    [System.Web.Script.Services.ScriptService]
        public class MyWebService : System.Web.Services.WebService
        {
            [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
            [WebMethod]
            public void HelloWorld()
            {
                string request_lat = Context.Request.Params["lat"];
                if (request_lat == null)
                    request_lat = this.Context.Request.QueryString["lat"];
                if (request_lat == null)
                    request_lat = this.Context.Request.Form["lat"];
    
                double lat;
                string response;
                if (string.IsNullOrEmpty(request_lat))
                    response = "lat is null or empty";
                else if (!double.TryParse(request_lat, out lat) && !double.TryParse(request_lat, out lat))
                    response = "failed to parse lat value";
                else
                    response = "lat = " + lat;
    
                Context.Response.Write(new JavaScriptSerializer().Serialize(new
                {
                    message = response
                }));
    
                return;
    
            }
        }

    test.js

    function SendMessage(e){
        console.log("********* Click *********");
        e.preventDefault();
        var lat = "4,5";
        var formData = new FormData();
        formData.append("lat", lat);
    
        var xhr = new XMLHttpRequest();
    
        xhr.open("POST", "/MyWebService.asmx/HelloWorld", true);
        xhr.addEventListener("load", GetResponse, false);
        xhr.addEventListener("error",
            function (evt) {
                console.log("There was an error attempting to send the message.");
                OnError();
            }, false);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(formData);
    }
    
    window.onload = function () {
        var btn = document.getElementById("btn");
        btn.addEventListener("click", SendMessage);
    }
    
    function GetResponse(e) {
        console.log("status: " + e.target.status);
        console.log(e);
    }

    Неизменно получаю в ответ статус 200 и "lat is null or empty". Изменение заголовка запроса не меняет результата.
    В интернете встречала объяснение, что названия параметров не совпадают и надо всего лишь изменить их имена, но fiddler показывает, что я действительно отправляю параметр с именем lat.
    Буду благодарна за любые идеи и подсказки!

или зарегистрируйтесь чтобы ответить