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

更新-私の完全な例

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");
    }
}
于 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 に答える