0

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

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

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

4

3 回答 3

2

当您将 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>
}

应用程序.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");
    }
}
于 2012-10-26T13:33:14.173 回答
1

你可以尝试更换：

xmlhttp.send("someValue" + msg);

和

xmlhttp.send("someValue=" + msg);
于 2012-10-26T12:53:23.977 回答
1

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

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

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

于 2012-10-26T14:09:54.613 回答