如何在不刷新页面的情况下使用 jquery 调用服务器端函数？答案

【问题标题】：How to call server side function using jquery wth out page refresh?如何在不刷新页面的情况下使用 jquery 调用服务器端函数？
【发布时间】：2009-05-02 10:05:49
【问题描述】：

如何在页面刷新的情况下使用 jquery 调用服务器端函数？

【问题讨论】：

标签： asp.net jquery ajax

【解决方案1】：

使用 AJAX：

$.get('somepage.aspx', {foo: 'bar'}, function(data){
  alert('the page returned this: '+data); 
 });

然后设置 somepage.aspx 来执行函数并返回数据（如果需要）。

有关 jQuery AJAX 的更多信息，请参阅：http://docs.jquery.com/Ajax

【讨论】：

【解决方案2】：

以下是使用 jQuery 和 Microsoft Ajax 调用自定义 ASP.NET PageMethod 的方法：

<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.json.org/json2.js"></script>
</head>
<script runat="server">
    /// <summary>
    /// A custom PageMethod that will echo back the argument
    /// </summary>
    /// <param name="argument">some arbitrary string</param>
    /// <returns></returns>
    [System.Web.Services.WebMethod]
    public static string MyPageMethod(string argument)
    {
        return "hello " + argument;
    }    
</script>

<script type="text/javascript">
function callPageMthodWithMicrosoftAjax(argument) {
    PageMethods.MyPageMethod(argument, function(result) {
        document.getElementById('result').innerHTML = result;
    }, function(error) {
        alert(error.get_message());
    });
}

function callPageMthodWithjQueryAjax(argument) {
    jQuery.ajax({
        url: '/default.aspx/MyPageMethod',
        type: 'post',
        contentType: 'application/json',
        data: JSON.stringify({ argument: argument }),
        dataType: 'json',
        processData: false,
        success: function(data, textStatus) {
            jQuery('#result').html(data.d);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            var jsonError = JSON.parse(XMLHttpRequest.responseText);
            alert(jsonError.Message);
        }

    });
}
</script>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager" runat="server" EnablePageMethods="true" />    
        <a href="#" onclick="callPageMthodWithMicrosoftAjax('Microsoft Ajax')">call PageMethod with Microsoft Ajax</a>
        <br />
        <a href="#" onclick="callPageMthodWithjQueryAjax('jQuery')">call PageMethod with jQuery</a>
        <div id="result"></div>
    </form>
</body>
</html>

【讨论】：

只是想知道，你为什么将getElementById等与jQuery混合？
好点@Pim，它是从 callPageMthodWithMicrosoftAjax 方法复制粘贴，其中假定不使用 jQuery。我相应地修改了我的帖子。

【解决方案3】：

如果您有需要调用的仅限服务器的方法，请在服务器端使用 WebMethod，在客户端使用 ajax。阅读this我很有用。

再见

【讨论】：

不一定是 webservice/webmethod 简单的 jQuery $.get

【解决方案4】：

我看到你使用的是asp.net，所以你有几个选择：

要获取当前 aspx 页面以外的任何资源，请使用 $.get()。这可能是一个图像文件或另一个 aspx 页面的输出。
如果您需要往返当前页面并为当前页面使用安全性等，那么您可以call a web method。请注意，在您调用 web 方法期间，您的 ViewState 将不可用。我链接到的文章来自 Dave Ward 的 Encosia，他有一个关于使用 jQuery 和 Asp.net 进行 AJAX 调用的广泛系列。

【讨论】：

【解决方案5】：

使用 Jquery .ajax() 方法。

$.ajax({
  url: "test.aspx/method",
  context: document.body,
  success: function(){
    $(this).addClass("done");
  }
});

【讨论】：