使用ajax进行前后端交互的方法

使用ajax进行前后端交互的方法:(我只测试通了json对象作为参数的方式,其他方式我没有测试通过)

1、前端方法:

传参方式:POST

请求类型:json对象

响应类型:json对象

csharp 复制代码
 function test() {
            var param1Value = "Hello";
            var param2Value = "World";

            // 构建发送给服务器的JSON对象
            var jsonobj = {
                param1: param1Value,
                param2: param2Value
            };
            $.ajax({
                type: "POST",//传参方式
                url: "test01.aspx/tt",  // 这里根据你的WebMethod路径进行修改
                data: JSON.stringify(jsonobj), //请求类型,将对象序列化为JSON字符串后传递到后端
                contentType: "application/json; charset=utf-8",
                dataType: "json", //响应类型
                success: function (data) {
                    // 请求成功的回调函数
                    // data是服务器返回的JSON对象
                    console.log(data);
                },
                error: function (error) {
                    // 请求失败的回调函数
                    console.error(error);
                }
            });
        }

2、后端方法:无需创建一个类来接收前端传来的json字符串,需要注意是:使用的接收参数必须与前端定义的json对象中的键名要一致。

csharp 复制代码
 [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static string tt(string param1, string param2)
        {
            //后端创建json对象
            var resultObject = new
            {
                Message = "Success",
                Data = new
                {
                    Param1Result = param1.ToUpper(),
                    Param2Result = param2.ToLower(),
                    SomeOtherData = "Hello from server!"
                }
            };

            // 将对象序列化为JSON字符串并返回
            return Newtonsoft.Json.JsonConvert.SerializeObject(resultObject);
        }
相关推荐
kismet787几秒前
fetch 正常,页面却 404?Nuxt 3 + CDN 跨域下的 preload CORS 陷阱
前端·产品
如果超人不会飞2 分钟前
新手避坑:使用 TinyRobot 入门阶段常见误区总结
前端·vue.js
嘟嘟07174 分钟前
二叉树从入门到实战:四大遍历 + 递归思想详解
前端
渣波5 分钟前
全栈开发的“影分身”之术(mock):别再手动造数据了,你的 CRUD 不配让我等!
前端·javascript
亿元程序员5 分钟前
小伙伴说这个撕胶带游戏很火很解压,于是我连夜做了一个Cocos教程...
前端
如果超人不会飞6 分钟前
一文读懂 TinyRobot:前端 AI 组件库定位、价值与适用场景
前端·vue.js
如果超人不会飞8 分钟前
用TinyRobot Welcome组件打造贴心的AI助手欢迎页
前端·vue.js
悟空瞎说8 分钟前
Compose内嵌Flutter混合开发详解:页面嵌入、引擎缓存与双向通信完整实战
前端
如果超人不会飞9 分钟前
TinyRobot DragOverlay轻松实现AI对话中的拖拽上传
前端·vue.js
elirlove19 分钟前
打造属于自己的网页工匠台:HTML在线编辑器技术深度解析
前端·编辑器·html