これは簡単に解決できるはずです.AJAXをいじったことは一度もありません...
初めて AJAX をテストする際に問題が発生しています。
すべてが正しいように見えます。オンラインの例によると、これは機能するはずですが、明らかにそうではありません。
(これは、これを機能させることができるかどうかを確認するための単なるテストであることに注意してください。この単純な計算にサーバー側を使用することは無意味であることを知っています)。
ヘッダーの html は別のレイアウト ページにあり、レンダリングされるため、含めませんが、必要なファイルへの正しいパスがそこにあることを保証します。
とにかく、私がセットアップしたのは、必要に応じて将来の実装と成長のためにこのようにセットアップされています(現在、これらの4つの異なるファイルを使用しています):
HTML (default.cshtml):
///Simple AJAX test to multiply to user set numbers on server side
///and return the result.
<h1>Welcome to Us</h1>
<p>
Lorem Ipsum Porem Lorem Ipsum Porem
</p>
<p>
Choose a number from the first list,
then a number from the second list
and they will be multiplied together
using AJAX on the server side, then
updated on the page, all without having
to resubmit the form or reload the page!
</p>
<button id="btn1" name="btn1">1</button><button id="btn2" name="btn2">2</button><button id="btn3" name="btn3">3</button><button id="btn4" name="btn4">4</button><button id="btn5" name="btn5">5</button><br/>
<span>First Number: </span><span id="firstNumber" style="height: 20px; width: 20px; margin-bottom: 10px; color: #f00;"></span><br/><br/>
<button id="2btn1" name="2btn1">1</button><button id="2btn2" name="2btn2">2</button><button id="2btn3" name="2btn3">3</button><button id="2btn4" name="2btn4">4</button><button id="2btn5" name="2btn5">5</button><br/>
<span>Second Number: </span><span id="secondNumber" style="height: 20px; width: 20px; margin-bottom: 10px; color: #f00;"></span><br/><br/>
<button id="Compute" name="Compute">Compute</button><br/><br/>
<span>Result: </span><span id="result" style="height: 20px; width: 20px; margin-bottom: 10px; color: #2ba03a;"></span><br/><br/>
最初の JavaScript ファイル (Main.js):
$(document).ready(function () {
/////////FIRST NUMBER/////////////
$("#btn1").click(function () {
$("#firstNumber").html("1");
});
$("#btn2").click(function () {
$("#firstNumber").html("2");
});
$("#btn3").click(function () {
$("#firstNumber").html("3");
});
$("#btn4").click(function () {
$("#firstNumber").html("4");
});
$("#btn5").click(function () {
$("#firstNumber").html("5");
});
/////////SECOND NUMBER/////////////
$("#2btn1").click(function () {
$("#secondNumber").html("1");
});
$("#2btn2").click(function () {
$("#secondNumber").html("2");
});
$("#2btn3").click(function () {
$("#secondNumber").html("3");
});
$("#2btn4").click(function () {
$("#secondNumber").html("4");
});
$("#2btn5").click(function () {
$("#secondNumber").html("5");
});
$("#Compute").click(function () {
var num1 = $("#firstNumber").text();
var num2 = $("#secondNumber").text();
compute(num1, num2);
});
});
2 番目の JavaScript ファイル (TestAjax.js):
var xmlhttp;
function loadXMLDoc (url, cfunc)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = cfunc;
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
function compute(number1, number2)
{
loadXMLDoc("/TestAjax.cshtml?numb1=" + number1 + "&numb2=" + number2, function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("result").innerHTML = xmlhttp.responseText;
}
});
}
最後に、サーバー側の cshtml ファイル (TestAjax.cshtml):
@{
int numb1 = Request["numb1"];
int numb2 = Request["numb2"];
int resultNumb = numb1 * numb2;
return(resultNumb);
}
それが役立つ場合（そうかもしれないと思います）、サーバーは次のように応答します。
GET http://localhost:14950/TestAjax.cshtml?numb1=4&numb2=2 500 (Internal Server Error)
ここでは、値がクエリ文字列になっていることがわかりますが...
2 番目の JavaScript ファイル (xmlhttp.send();) の 15 行目でエラーが発生しますが、これが意味するのは、指定されたデータの一部が気に入らなかったということです (または、その行の構文が間違っているのではないかと疑っています)。 、しかし、私はAJAXが初めてなので...）。とにかく、私が見落としている単純なものでなければなりませんが、それが何であるかを見つけることができません。
助けてくれてありがとう！プログラマーのツールボックスに AJAX を追加したいと思っています。