为什么我不能输出 AJAX POST 发送的变量？答案

【问题标题】：Why can't I output the variable sent by AJAX POST?为什么我不能输出 AJAX POST 发送的变量？
【发布时间】：2012-10-16 17:32:05
【问题描述】：

我正在尝试发布文本框的值，并在“你说...”部分的页面上发布相同的值。

我的 TypeScript/JavaScript 是：

declare var document;
declare var xmlhttp;

window.onload = () => {
    start();
};

function sayHello(msg: any) {
    // Post to server.
    xmlhttp.onreadystatechange = function () {
      if (xmlhttp.readyState == 4) {
        if (xmlhttp.status == 200) {
          // All right - data is stored in xhr.responseText
            alert("done" + " " + xmlhttp.responseText);
        }
        else {
          // Server responded with a status code.
            alert("error");
        }
      }
    }
    xmlhttp.open("POST", "Default.cshtml");
    xmlhttp.send("someValue=" + msg);


    return msg;
}

function start() {
    // Add event Listeners for user interaction
    var element = document.getElementById("link");

    element.addEventListener("click", function () {
        var tb = (<HTMLInputElement>document.getElementById("tbox"));

        var element = document.getElementById("response")
            .innerText = sayHello(tb.value);
    }, false);

    // Setup XMLHttpRequests (AJAX)
    if (XMLHttpRequest) {
        // Somewhat cross-browser
        xmlhttp = new XMLHttpRequest();
    }
    else {
        // Legacy IE
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
}

而HTML是（这个页面是Default.cshtml）：

@{
    Layout = "~/_SiteLayout.cshtml";
    Page.Title = "Home Page";

    var msg = Request["someValue"];
}
<h1>TypeScript HTML App</h1>
<div id="content">
    <a href="javascript:;" id="link">Say Hello</a>:
        <br />
    <input type="text" value="dfgdfgdfg" id="tbox" />
    <br />
    <p id="response">awaiting a response.</p>
    <br />
    <p>You said:<br />
    @msg</p>
</div>

并且我已经正确地包含了所有参考： <script src="~/App.js"></script>

我得到的响应码是 200。

我在这里做错了吗？我已经遵循了许多教程、文档等，但我只是看不出我做错了什么。看起来几乎一模一样。

【问题讨论】：

您遇到了哪些错误/意外行为？
究竟是什么问题，当您的 ajax 请求触发时，您得到的是 404 还是 500？
到底出了什么问题？你知道浏览器是否在打电话吗？（查看网络上的 firebug 或 chrome 以查看是否正在实际进行呼叫）
完全没有错误，@JacobT.Nielsen - 它只是不发布数据。我正在尝试使用 msg 变量将“tbox”的值发布到服务器后输出，但没有输出任何内容。而且我不知道如何检查是否真的发布了 ajax，所以我假设它只是没有发布。但是......当我点击链接发布它时，我会收到一条提示“完成”的警报。
304 表示您的结果已被缓存。但是您是否了解，当您发出 ajax 请求时，您从 xmlhttp.responseText 获得的只是文本。请求它的页面现在不做任何事情。抱歉，您的申请流程对我来说没有多大意义。我已经测试了您的 ajax 调用、C# 代码和 HTML/Razor。这一切都很好。但是你仍然没有对它做任何事情。所以我不明白你的应用程序应该如何表现？

标签： c# javascript asp.net razor typescript

【解决方案1】：

当您将 XMLHttpRequest 作为 POST 处理时，您需要添加几个额外的标头 - 在调用 send 之前添加它们，如下所示：

var params = "someValue=" + encodeURIComponent(msg);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length.toString());
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);

更新 - 我的完整示例

默认.cshtml

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    Page.Title = "Home Page";
    var msg = Request["someValue"];
}

@if (msg != null) {
    Layout = null;
    <text>You said @msg</text> 
} else {

    <h1>TypeScript HTML App</h1>
    <div id="content">
        <a href="javascript:;" id="link">Say Hello</a>:
        <br />
        <input type="text" value="dfgdfgdfg" id="tbox" />
        <br />
        <p id="response">awaiting a response.</p>
    </div>
}

App.ts

declare var document;
declare var xmlhttp: XMLHttpRequest;

window.onload = () => {
    start();
};

function sayHello(msg: any) {
    // Post to server.
    xmlhttp.onreadystatechange = function () {
      if (xmlhttp.readyState == 4) {
        if (xmlhttp.status == 200) {
          // All right - data is stored in xhr.responseText
            //alert("done" + " " + xmlhttp.responseText);
            document.getElementById("response").innerText = xmlhttp.responseText;
        }
        else {
          // Server responded with a status code.
            alert("error");
        }
      }
    }

    var params = "someValue=" + encodeURIComponent(msg);
    xmlhttp.open("POST", "");
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.setRequestHeader("Content-length", params.length.toString());
    xmlhttp.setRequestHeader("Connection", "close");
    xmlhttp.send(params);

    return msg;
}

function start() {
    // Add event Listeners for user interaction
    var element = document.getElementById("link");

    element.addEventListener("click", function () {
        var tb = <HTMLInputElement>document.getElementById("tbox");
        sayHello(tb.value);
    }, false);

    // Setup XMLHttpRequests (AJAX)
    if (XMLHttpRequest) {
        // Somewhat cross-browser
        xmlhttp = new XMLHttpRequest();
    }
    else {
        // Legacy IE
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
}

【讨论】：

哦，谢谢@Sohnee！那里的第二行（“Content-type”）行...它引发Unhandled exception at line 15, column 5 in http://localhost:1058/App.js 0x800a139e - JavaScript runtime error: InvalidStateError异常。知道那是什么意思吗？
我没听明白 - 你用的是什么浏览器？
我在 Windows 8 上使用 IE 10，在 Chrome、Opera 和 Firefox 上我没有收到错误，但链接也不再有效
我能得到的最接近的是 WIN7 上的 IE9，我的示例有效。我很高兴为您提供我的整个 TypeScript 文件。
@JamesKent 我已经添加了视图和 TypeScript 文件 - 让我知道它是否有效。

【解决方案2】：

你可以尝试替换吗：

xmlhttp.send("someValue" + msg);

与

xmlhttp.send("someValue=" + msg);

【讨论】：

【解决方案3】：

我希望这会有所帮助。如前所述，我对您的流程有点困惑，但它仍然可能对您有所帮助。

PageA.cshtml（包含 javascript 的页面）

<h1>TypeScript HTML App</h1>
<div id="content">
    <a href="javascript:;" id="link">Say Hello</a>:
    <br />
    <input type="text" value="dfgdfgdfg" id="tbox" />
    <br />
    <p id="response">awaiting a response.</p>
</div>

<script src="app.js" type="text/javascript"></script>

PageB.cshtml（我们通过 ajax 调用请求的页面）

@{
    var msg = Request["someValue"];
}
<p>You said:<br />
@msg</p>

App.js（在页面 A 上运行并请求页面 B 的 javascript 文件）

declare var document;
declare var xmlhttp;

window.onload = () => {
    start();
};

function sayHello(msg: any, callback) {
    // Post to server.
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4) {
            if (xmlhttp.status == 200) {
                // alert(xmlhttp.responseText);
            } else {
                // Server responded with a status code.
                alert("error");
            }
        }
    };
    xmlhttp.open("POST", "PageB.cshtml");
    xmlhttp.send("someValue=" + msg);
}

function start() {
    // Add event Listeners for user interaction
    var element = document.getElementById("link");

    element.addEventListener("click", function () {
        var tb = (<HTMLInputElement>document.getElementById("tbox"));

        sayHello(tb.value);
        document.getElementById("response")
            .innerHTML = tb.value;
    }, false);

    // Setup XMLHttpRequests (AJAX)
    if (XMLHttpRequest) {
        // Somewhat cross-browser
        xmlhttp = new XMLHttpRequest();
    }
    else {
        // Legacy IE
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
}

我正在做的是从 PageA 向 PageB 发出请求。然后读取结果，我操纵 PageA 的 dom 以包含从 PageB 接收到的标记。此标记包含与请求一起传递的消息。

这是您想要达到的流程吗？

【讨论】：

差不多就是这样（尽管你的代码对我不起作用。它只是不输出发送的值。）。我想要做的是让某人在文本框中输入一个值，单击链接，发布文本框值，然后在我将其放入 C# 变量中后将该值重新显示在页面上。
好的。我已经更新了代码。现在它发出请求，但不使用响应。它只是获取原始消息并将其显示在发出请求的页面上。