这应该是个很容易解决的问题,我以前从来没有搞过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);
});
});第二个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) 我可以在这里看到这些值使它成为查询字符串,但是..。
它在第二个JavaScript文件(xmlhttp.send();)的第15行中出错,但对我来说,这意味着它不喜欢它提供的一些数据(或者该行的语法不好,我对此表示怀疑,但我对AJAX并不熟悉,所以.)。无论如何,应该是一些简单的东西,我忽略了,但我找不到它是什么。
谢谢你的帮助!我真的很想开始在我的程序员工具箱中添加一些AJAX。
发布于 2012-11-02 21:17:54
我最后要做的主要有两件事。
&
2返回(ResultNumb)显然与AJAX不正确。我不得不用以下内容替换它:@:@resultNumb
我乐意接受任何向我表明以下任何一项的答复:
https://stackoverflow.com/questions/13202395
复制相似问题