如何用jQuery&Ajax无需提交按钮向PHP提交表单评分数据（解决索引未定义）

问题场景 #

开发服务评分应用时，表单包含姓名输入框、评论文本框和星级评分单选按钮，要求点击星级时自动通过AJAX提交评分到PHP脚本，且只能用单个表单。但运行时PHP返回“undefined index:rating_num”错误，相关代码如下：

HTML表单 #

<form action="" method="POST">
   <input type="text" name="name">
   <textarea name="comment"></textarea>

   <input type="radio" name="rate" value="1">
   <input type="radio" name="rate" value="2">
   
   <button type="submit" name="submit">Submit</button>
</form>

原jQuery提交代码 #

$("input[name=rate]").change(function(event){

   var rating_num = $(this).val();

   $.ajax({
     url: '../handlers/rating.php',
     type: 'POST',
     data: rating_num,
     cache: false,
     contentType: false,
     processData: false,
    beforeSend:function(){
                    
    },
    success: function (data) {
       alert(data);
    }
  }); 

})

原rating.php代码 #

echo $_POST['rating_num'];

错误原因 #

1. AJAX数据格式错误：直接传递字符串rating_num，未指定键名，PHP无法通过$_POST['rating_num']匹配到对应值
2. 不必要的参数设置：contentType: false和processData: false是文件上传场景的配置，会阻止jQuery正确处理POST数据的编码与解析，导致PHP无法识别请求参数

修正方案 #

修正后的jQuery代码 #

$("input[name=rate]").change(function(event){
   var rating_num = $(this).val();

   $.ajax({
     url: '../handlers/rating.php',
     type: 'POST',
     data: { rating_num: rating_num }, // 改为键值对形式传递参数
     cache: false,
     beforeSend:function(){
                    
     },
     success: function (data) {
        alert(data);
     }
   }); 
})

优化后的rating.php代码 #

// 先判断参数是否存在，避免未定义索引警告
if(isset($_POST['rating_num'])){
    echo $_POST['rating_num'];
} else {
    echo "未获取到有效评分值";
}

关键说明 #

• 传递AJAX数据时使用键值对对象，确保PHP能通过对应键名获取参数值
• 移除contentType和processData的错误配置，让jQuery自动处理请求的Content-Type和数据编码
• PHP端增加isset()判断，提升代码健壮性，避免未定义索引的错误提示

内容的提问来源于stack exchange，提问作者Elex Promise