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

桃扇骨 2024-03-22 21:06 62阅读 0赞

使用ajax进行前后端交互的方法：（我只测试通了json对象作为参数的方式，其他方式我没有测试通过）  
1、前端方法：  
传参方式：POST  
请求类型：json对象  
响应类型：json对象

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对象中的键名要一致。

[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);
            }

发表评论取消回复

表情：

评论列表（有 0 条评论，62人围观）

还没有评论，来说两句吧...

相关阅读

相关 ajax前后端交互示例

文章目录一、前后端交互方法 1、Ajax前端示例 1.1 特点 1.2 ajax同域请求示例

分手后的思念是犯贱/ 2024年03月26日 10:59/ 0 赞/ 28 阅读

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

使用ajax进行前后端交互的方法：（我只测试通了json对象作为参数的方式，其他方式我没有测试通过） 1、前端方法：传参方式：POST 请求类型：json对象

桃扇骨/ 2024年03月22日 21:06/ 0 赞/ 63 阅读

相关前后端如何交互的？

前后端如何交互的？ 1.产品经理确认产品需求 2.前后端人员写接口文档 3.前端和后端分别对接口进行编程 4.如果发现接口

朱雀/ 2022年11月07日 04:30/ 0 赞/ 173 阅读

相关 jQuery Ajax前后端使用JSON进行交互

需求：前端通过jquery Ajax传输json到后端，后端接收json，对json进行处理，后端返回一个json给前端这里使用servlet的方式

柔情只为你懂/ 2022年07月24日 03:25/ 0 赞/ 194 阅读

相关前后端的数据交互

[Java学习——前后端数据交互（一）][Java] 当前的结果是提交之后js内有响应。不知道原因在哪个地方，下面是当前了解的一些知识。 1、在html页面要链接

痛定思痛。/ 2022年05月17日 10:25/ 0 赞/ 312 阅读

相关前后端交互 _ JSONArray字符串形式 + jquery的$.ajax()

操作内容：用servlet从数据库读取一张表，利用json\_lib.jar将其解析成json数组字符串，递交给前端html page，它通过jquery操作节点动态生成

迈不过友情╰/ 2022年05月15日 12:53/ 0 赞/ 187 阅读

相关 SpringBoot 使用ajax前后端交互

一.实现HTML页面跳转，跟springMVC类似 1.pom.xml加入依赖 <dependency> <groupId>org.spri

╰+哭是因爲堅強的太久メ/ 2022年02月22日 19:40/ 0 赞/ 477 阅读

相关前后端的数据交互的模拟（ajax和php）

用到的服务器是和php配套使用的apache（阿帕奇）服务器，后端语言是PHP。显示效果如下： ![在这里插入图片描述][20190614140441307.gif]

青旅半醒/ 2022年01月16日 00:51/ 0 赞/ 240 阅读

相关【AJAX】AJAX进行前后台信息交互

用AJAX方法可将表单中的数据传至后台进行处理，而不需要进行页面的跳转，可以在当前页面完成。 <!DOCTYPE html PUBLIC "-//W3C//DTD X

痛定思痛。/ 2021年09月26日 01:52/ 0 赞/ 358 阅读

相关自动化测试平台_前后端交互之Ajax

前后端交互之Ajax The Jquery library has a full suite of Ajax capabilities.The functions and

向右看齐/ 2021年09月24日 13:52/ 0 赞/ 307 阅读