Question

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

我的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。

我在这里做错了吗？我已经遵循了许多教程，文档等等，我只是看不出我做错了什么。它看起来几乎完全相同。

Answer 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);

更新 - 我的完整示例

Default.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");
    }
}

Answer 2

你可以尝试更换：

xmlhttp.send("someValue" + msg);

与

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

Answer 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页上运行的javascript文件并请求第B页）

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收到的标记。此标记包含与请求一起传递的消息。

这是你想要实现的流程吗？

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

3 个答案: