jQuery AJAX调用ASP.NET Core Web API GET接口按钮失效问题排查

使用HTML/CSS/JavaScript + jQuery + Mustache.js开发前端、对接ASP.NET Core Web API承载的gRPC后端时，AJAX GET调用遇到两类问题，其中/HelloWorld接口400错误已通过将后端参数绑定特性从[FromBody]改为[FromQuery]修复，固定问候语可正常展示，剩余未解决问题如下：

• id为type_s的Check按钮点击事件无响应
• 无法正确读取输入框的用户输入内容，无法将内容作为参数传给/TypeSomething接口，实现返回展示You Type this:用户输入内容的预期效果
  要求在不改动现有正常运行的HTML结构前提下，定位问题修复AJAX逻辑，同时确认是否存在无需编写JavaScript的实现方案。

按钮点击无响应问题排查修复 #

按优先级排查以下常见诱因：

1. 事件绑定时机错误：不要直接在JS顶层作用域绑定事件，必须等DOM加载完成后再执行绑定逻辑，标准写法如下：

   // 等待DOM加载完成后再执行内部逻辑
   $(document).ready(function () {
     // 所有事件绑定逻辑放在这里
     $('#type_s').on('click', function () {
       // 点击后执行的逻辑
     })
   })
   

2. 资源加载顺序错误：确认jQuery的引用位置在自定义业务脚本之前，否则$全局对象未定义会导致整段JS执行失败，事件无法绑定。
3. 选择器匹配失败：检查HTML中按钮的id属性值是否确实为type_s，注意排查大小写错误、多余空格、下划线/连字符写错的问题。

输入值读取与接口传参修复 #

1. 输入值读取：输入框的实时输入内容必须用jQuery的.val()方法获取，不要用.text()或.html()（这两个方法无法读取表单控件的实时输入值），示例：

   // 替换#user_input为实际输入框的选择器，.trim()用来去掉首尾多余空格
   const inputContent = $('#user_input').val().trim()
   

2. AJAX传参：由于后端统一用[FromQuery]接收GET参数，直接把参数放在AJAX配置的data字段中即可，jQuery会自动将参数拼接为URL查询串，不要把GET参数放在请求体中，完整调用示例：

   $('#type_s').on('click', function () {
     const inputContent = $('#user_input').val().trim()
     if (!inputContent) {
       alert('请先输入内容')
       return
     }
     $.ajax({
       url: '/TypeSomething',
       method: 'GET',
       data: {
         // 这里的key必须和后端接口的参数名完全一致
         content: inputContent
       },
       success: function (res) {
         // 按现有Mustache模板逻辑渲染结果即可，示例为直接写入展示区域
         $('#result_container').text(`You Type this: ${res}`)
       },
       error: function (xhr) {
         console.log('请求失败', xhr.status)
       }
     })
   })
   

3. 后端校验：确认/TypeSomething接口的入参同样添加了[FromQuery]特性，参数名和前端传入的key保持一致，避免重现400错误。

无JavaScript实现方案 #

存在无需编写自定义JavaScript的实现方式，直接用原生表单能力即可：

将输入框和Check按钮包裹在<form>标签内，设置form的action属性为/TypeSomething、method属性为get；给输入框添加name属性，属性值和后端接口接收的参数名保持一致；将Check按钮的type属性设为submit即可。
注意：该方案提交后会触发页面整页跳转刷新，接口返回内容会直接替换当前页面，无法实现无刷新局部更新效果，如果需要保留当前页面的其他内容（比如已经正常展示的HelloWorld问候语），仍然需要通过JavaScript + AJAX的方式实现。

内容的提问来源于stack exchange，提问作者José Leal