如何使用JQueryAjax调用从web方法发送和检索数据

本文关键字：检索 数据 方法 web 何使用 JQueryAjax 调用 | 更新日期: 2023-09-27 18:22:18

我有一个文本框，旁边有一个按钮。我想通过Jquery ajax调用将文本框的内容发送到webmethod，并返回其大写值并在alert中显示。到目前为止，我有这个代码，但它不起作用。

JAVASCRIPT:

function CallWM()
    {          
        var name = $('#name').val();         

        RealCallWM(name);

    }
    function RealCallWM(name) {
        $.ajax({
            url: 'Register.aspx/UpperWM',
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: { name: JSON.stringify(name) },
            success: OnSuccess(response),
            error: function (response) {
                alert(response.responseText);
            }
        })
    };

HTML:

  Name:    <input id="name" type="text" /> 
<input id="Button1" type="button" value="button" onclick="CallWM();"/></div>
    </form>

WEB方法：

 [WebMethod]
        public static string UpperWM(string name )
        {
            var msg=name.ToUpper();
            return (msg);
        }

如何使用JQueryAjax调用从web方法发送和检索数据

替换：

data: '{name: ' + name + '}',

带有：

data: { name: JSON.stringify(name) },

以确保正确的编码。现在您正在发送以下有效载荷：

{name:'some value'}

这显然是一个无效的JSON有效载荷。在JSON中，所有内容都应该双引号：

{"name":"some value"}

这就是为什么您绝对不应该使用一些字符串串联手动构建JSON，而是使用内置的方法（JSON.stringify）。

附带说明：我不确定$.ajax方法是否理解一个名为failure的回调。因此：

$.ajax({
    url: 'Register.aspx/UpperWM',
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    data: { name: JSON.stringify(name) },
    success: OnSuccess(response),
    error: function (response) {                        
        alert(response.responseText);
    }
});

还要注意，在您的错误回调中，我删除了response.d属性，就好像您的web方法中出现了异常一样。很可能服务器根本不会返回任何JSON。

根据您的评论，我理解您的问题尚未解决，所以请尝试此

    function RealCallWM(name) {
        $.ajax({
            type: "POST",
            url: "Default.aspx/UpperWM",
            data: JSON.stringify({ name: $('#name').val() }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: true,
            success: function (data, status) {
                console.log("CallWM");
                alert(data.d);
            },               
            failure: function (data) {
                alert(data.d);
            },
            error: function (data) {
                alert(data.d);
            }
        });
    }
相关文章：