0

这应该是一个容易解决的问题，我以前从来没有弄乱过 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。

4

2 回答 2

1

我认为您不能像那样直接访问视图。

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

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

要访问它，URL 将是 /Ajax/TestAjax?numb1=4&numb2=2

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

于 2012-11-02T20:48:30.203 回答
0

好吧，我最终要做的主要是两件事。

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

&

2 return(resultNumb) 显然与 AJAX 不正确。我不得不用以下内容替换它：@：@resultNumb

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

  1. 如何使用 AJAX 仅发送一个值或一行，而不是整个页面（如果可能）

  2. 如何在 AJAX 返回中对多行进行分组（例如“@:”之后的内容）

  3. 几乎就是“@:”的意思。

于 2012-11-02T21:17:54.120 回答