原生JS请求API

GET方式前端- 多个参数

// 场景：查询数据 GET方式asyncfunctiongetData(){constparams={sceneId:'order_123',userId:'user_456',type:'normal'};// 方式2：使用URLSearchParams（推荐）constqueryString=newURLSearchParams(params).toString();consturl2=`/api/data?${queryString}`;constresponse=awaitfetch(url2);constdata=awaitresponse.json();returndata;}

GET方式后端：

[HttpGet("data")] public IActionResult GetData([FromQuery] SceneQueryParams query) { // 直接通过对象访问 return Ok(new { query.SceneId, query.UserId, query.Type, message = "GET请求成功" }); }

POST方式-前端：

// 场景：提交复杂对象asyncfunctioncreateOrder(){constpostData={sceneId:'order_123',userInfo:{name:'张三',phone:'13800000000'},items:[{id:1,price:99.9},{id:2,price:199.9}]};constresponse=awaitfetch('/api/order',{method:'POST',// 指定POST方法headers:{'Content-Type':'application/json'// 声明发送JSON},body:JSON.stringify(postData)// 序列化为JSON字符串});if(!response.ok){thrownewError(`请求失败:${response.status}`);}constresult=awaitresponse.json();console.log('创建成功:',result);returnresult;}

POST方式-后端：

[HttpPost("order")] public IActionResult CreateOrder([FromBody] OrderDto dto) { // dto已经自动反序列化 return Ok(new { success = true, message = "订单创建成功", sceneCode = $"{dto.SceneId}_{Random.Shared.Next(0, 1000000).ToString("D6)}" }); }

再举例-修改数据：POST

后端控制器

// Controllers/SceneController.cs [ApiController] [Route("api/scene")] public class SceneController : ControllerBase { [HttpPost("update-code")] public IActionResult UpdateSceneCode([FromBody] string sceneId) { // 参数验证 if (string.IsNullOrWhiteSpace(sceneId)) return BadRequest(new { success = false, message = "sceneId不能为空" }); try { // 生成场景编码 string sceneCode = $"{sceneId}_{Random.Shared.Next(0, 1000000).ToString("D6)}"; // **模拟数据库更新**（实际项目中替换为真实DB操作） Console.WriteLine($"[模拟数据库更新] sceneId={sceneId}, sceneCode={sceneCode}"); return Ok(new { success = true, sceneCode, message = "生成成功" }); } catch (Exception ex) { // 记录错误日志（实际项目中用ILogger） Console.WriteLine($"[错误] {ex.Message}"); return StatusCode(500, new { success = false, message = "服务异常" }); } } }

前端JS

// 按钮事件：传递sceneIdasyncfunctiongenerateAndSaveSceneCode(sceneId){// 验证参数if(!sceneId){alert('sceneId不能为空');return;}// 显示加载状态constbutton=document.activeElement;if(button)button.disabled=true;try{// POST提交单个参数constresponse=awaitfetch('/api/scene/update-code',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(sceneId)// 直接序列化字符串});if(!response.ok){thrownewError(`HTTP错误:${response.status}`);}constresult=awaitresponse.json();if(result.success){// 成功后打开二维码页面consturl=`/miniprogram/checkinqrcode.html?scene=${encodeURIComponent(result.sceneCode)}`;window.open(url,'_blank','noopener,noreferrer');console.log('场景编码生成成功:',result.sceneCode);}else{alert('生成失败: '+result.message);}}catch(error){console.error('操作失败:',error);alert('生成失败: '+error.message);}finally{// 恢复按钮状态if(button)button.disabled=false;}}