在Controller中使用Jquery ajax调用ActionResult方法并返回数据

Posted 2023-05-08

【中文标题】在Controller中使用Jquery ajax调用ActionResult方法并返回数据

【英文标题】：Using Jquery ajax to call ActionResult method in Controller and return data

【发布时间】：2016-01-17 01:04:15

【问题描述】：

我试图了解 Jquery Ajax 方法的工作原理。现在，我在控制器中调用将返回 PartialView 的 ActionResult 方法时遇到了一些问题。

创建了一个按钮，我将使用它从服务器获取新数据（应该运行 Ajax 调用）

代码：（Home 控制器中的 ActionResult）

public ActionResult All()
    
        List<Student> model = db.Students.ToList();

        return PartialView("_Student", model);
    

当我在主索引视图中按下按钮时，我尝试调用此方法。

代码：（索引视图）

<div class="row">
<div class="small-12 column sbw-travel">
    <h2>Travel</h2>

    <div class="row">
        <div class="small-12 columns">
            <button id="button1" class="sbw-travel-button">Search</button>
        </div>
    </div>

    <div class="small-12 sbw-travel-box" id="rooms">

    </div>
</div>
</div>

当用户点击按钮时，应该运行 Ajax 调用，并且列表将出现在 id=rooms 的部分中。

脚本：（Ajax 代码）

 $(document).ready(function () 
    $('#button1').click(function () 
        $.ajax(
            type: 'GET',
            url: @Url.Action("All", "Home"),
            datatype: "html",
            success: function ()  
                $('#rooms').html(???);
            
        );
        return false;
    );
);

你们中的任何人都可以看看我是否忘记了像我描述的那样运行此运行的东西吗？

【参考方案1】：

结果在 succes 事件上。试试：

$(document).ready(function () 
$('#button1').click(function () 
    $.ajax(
        type: 'GET',
        url: @Url.Action("All", "Home"),
        datatype: "html",
        success: function (data)  
            $('#rooms').html(data);
        
    );
    return false;
); );

【讨论】：

到目前为止什么都没有发生..如果我调试，我得到一个错误：提供给正则表达式构造函数“全部”的无效标志，但还不确定它的含义。

您的响应数据中的字符无效。您应该转义字符串并将它们放在引号中

【参考方案2】：

我建议在单击按钮时加载 firebug（启用控制台），确保请求的 URI 在单击事件中响应有效的 HTML 数据。

我通常也发现使用类似的东西：

$('#button1').on('click', function ()  ... 

通常会产生更好的结果，请参见此处：Difference between .on('click') vs .click()