如何使用javascript正確格式化通過服務器端傳遞的參數？

Question

我無法弄清楚如何在我的小型演示ASP.NET應用程序中運行以下代碼，希望這里有人能提供幫助。

這是JavaScript：

function checkUserName() {
    var request = createRequest();
    if (request == null) {
        alert("Unable to create request.");
    } else {
        var theName = document.getElementById("username").value;
        var userName = escape(theName);
        var url = "Default.aspx/CheckName";
        request.onreadystatechange = createStateChangeCallback(request);        
        request.open("GET", url, true);
        request.setRequestHeader("Content-Type", "application/json");
        //none of my attempts to set the 'values' parameter work   
        var values =  //JSON.stringify({userName:"userName"}); //"{userName:'temp name'}"; //JSON.stringify({ "userName":userName });
        request.send(values);
    }
}

這是我的* .aspx.cs類中的方法：

[WebMethod]
[ScriptMethod(UseHttpGet=true)]
public static string CheckName(string userName)
{
    string s = "userName";
    return s + " modified backstage";
}

當此代碼運行時，我收到此異常：

---------------------------
Message from webpage
---------------------------
{"Message":"Invalid web service call, missing value for parameter: \u0027userName\u0027.","StackTrace":"   at System.Web.Script.Services.WebServiceMethodData.CallMethod(Object target, IDictionary`2 parameters)\r\n   at System.Web.Script.Services.WebServiceMethodData.CallMethodFromRawParams(Object target, IDictionary`2 parameters)\r\n   at System.Web.Script.Services.RestHandler.InvokeMethod(HttpContext context, WebServiceMethodData methodData, IDictionary`2 rawParams)\r\n   at System.Web.Script.Services.RestHandler.ExecuteWebServiceCall(HttpContext context, WebServiceMethodData methodData)","ExceptionType":"System.InvalidOperationException"}
---------------------------
OK   
---------------------------

我從這里開始搜索，然后轉到SO上的多個線程，嘗試使用引號和鍵值對的多種組合，但沒有嘗試過。

當我從C＃方法和request.send（）中刪除參數時，我在我的JS回調中得到了可以使用的響應。 但是，一旦我嘗試對參數進行處理，就會遇到上述異常。 如果可能的話，我想知道如何在不使用jQuery的情況下執行此操作。

提前致謝。

最終版本根據Alexei的建議，我得出了以下可行的方法。 URL缺少參數值兩端的撇號； 這使通話無法進行。

function checkUserName() {
    var request = createRequest();
    if (request == null) {
        alert("Unable to create request.");
    } else {
        var theName = document.getElementById("username").value;
        var userName = encodeURIComponent(theName); 
        var url = "Default.aspx/CheckName?name='" + theName + "'";
        request.onreadystatechange = createStateChangeCallback(request);
        request.open("GET", url, true);
        request.setRequestHeader("Content-Type", "application/json");       
        request.send();
    }
}

Answer 1

request.send(values);

這不適用於“ GET”。 嘗試

request.open("POST", url, true);

http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp

Answer 2

就像艾倫所說的那樣，使用POST方法。 或者在打開URL之前將其參數傳遞給URL，例如

var url = "Default.aspx/CheckName?userName=" + values;

編輯：不，這可能不是一個好主意，因為您要發送JSON，請忘記我說的話。

Answer 3

你需要：

• 決定您要GET還是POST。 對於GET請求，您需要所有參數都位於Url中（主體為空），對於POST，您可以同時使用這兩個參數。 從當前代碼開始，您期望獲得GET，但是發送POST。
• 正確添加查詢參數-名稱和編碼值。 encodeUriComponent是首選的JavaScript函數，有關詳細信息，請參見使用Javascript或jquery從“表單字段”構建URL
• 如果使用POST，則還需要在其中正確編碼參數，並指定正確的“ content-type”標頭。
• 如果發送JSON，則需要解碼JSON服務器端。

或者，您可以使用隱藏表單執行JavaScript發布請求中所述的 POST / GET， 例如表單提交

旁注： jQuery.ajax可以為您完成大部分操作，如果您想自己做所有的事情，可以查看的好資源。

Answer 4

鑒於您的服務器端方法要求GET ，您需要：

request.open("GET", url + "?username=" + userName, true);
request.send();

適用於我的作品：

function checkUserName() {

    var request =  new XMLHttpRequest();

    if (request == null) {
        alert("Unable to create request.");
    } else {        
        var userName = "Shaun Luttin";
        var url = '@Url.RouteUrl(new{ action="CheckName", controller="Home"})';

    request.onreadystatechange = function() {
        if (request.readyState == XMLHttpRequest.DONE ) {
           if(request.status == 200){
               document.getElementById("myDiv").innerHTML = request.responseText;
           }
           else if(request.status == 400) {
              alert('There was an error 400')
           }
           else {
               alert('something else other than 200 was returned')
           }
        }
    }

        request.open("GET", url + "?username=" + userName, true);
        request.send();
    }
}

在服務器端：

[HttpGet]
public string CheckName(string userName)
{
    return userName + " modified backstage";
}

Answer 5

如果您需要進行POST，則需要像這樣發送。

var values = JSON.stringify({"'userName':'"+ userName+ "'"});

而且您必須將HttpGet更改為HttpPost