Question

这应该是一个很容易解决的问题，我以前从未搞过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:&nbsp;</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:&nbsp;</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:&nbsp;</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。

Answer 1

我认为您不能直接访问View。

我过去做的是在项目中添加一个Ajax控制器，在Views / Shared文件夹中添加一个空白_AjaxLayout.cshtml，在Views / Ajax文件夹中添加一个_View_Start.cshtml，将Layout设置为“〜/ Views / Shared / _AjaxLayout.cshtml”文件。

在控制器中，添加一个操作（“TestAjax”），然后将TestAjax.cshtml文件放在Views / Ajax中。

要访问它，URL将是/ Ajax / TestAjax？numb1 = 4＆amp; numb2 = 2

如果您可以调试它并确保在尝试将其集成到页面之前获得预期的结果，那么直接在浏览器中点击您的Ajax URL是一个好主意。

Answer 2

嗯，我最终要做的事情主要是两件事。

解析cshtml文件中的两个变量（TestAjax.cshtml）（强制转换不起作用）

＆安培;

2 return（resultNumb）显然不正确。我不得不用以下内容替换它： @：@resultNumb

我很乐意接受任何向我展示以下内容的答案：

如何使用AJAX仅发送单个值或行，而不是整个页面（如果可能）
如何在AJAX返回中对多行进行分组（就像“@：”之后的那样）
“@：”几乎意味着什么。

测试AJAX第一次在WebMatrix（C＃）中，服务器返回内部错误500

2 个答案: