通过 AJAX 将表单数据传递给 mySQL

Question

我正在使用 JavaScript 和 AJAX 将表单数据发送到 php 处理文件，然后在不刷新初始表单页面的情况下填充 SQL 数据库。

php/SQL 连接正常，但表单数据未正确发送。

有两个字段：一个名为“choice”的单选组和一个名为“cmets”的文本字段。填充数据库时，选择字段始终为“是”（3 个单选按钮中的第一个），而 cmets 字段始终为空白。我认为问题一定出在构建数据字符串的方式上，但数小时的修修补补没有带来成功。

这是html表单

<form id="paPoll">
  <label><input type="radio" name="RadioGroup1" value="yes" id="choice1">Yes</label>
  <label><input type="radio" name="RadioGroup1" value="no" id="choice2">No</label>
  <label><input type="radio" name="RadioGroup1" value="dont_know" id="choice3">I Don't Know</label>
  <label for="comments">Comments?</label><input name="comments" type="text" id="comments" size="25" maxlength="60">   
  <input type="button" name="form_process" id="form_process" value="submit" onClick="$.fn.removeMbMenu($.mbMenu.options.actualOpenedMenu,true);" />
</form>

这里是 Javascript/AJAX 函数

<script type="text/javascript">
    $(function() {
      $("#form_process").click(function() {
        var choice = $("#choice").val();
        var comments = $("#comments").val();
        var dataString = 'choice='+ choice + '&comments=' + comments;

        $.ajax({
          type: "POST",
          url: "**ABSOLUTE URL TO PROCESSOR**",
          data: dataString
        });
      });
    });
</script>

这里是 php 处理器

<?php
$choice = $_POST ['choice'];
$comments = $_POST ['comments'];
//perform insert
    $query = mysql_query("INSERT INTO paPoll 
    (choice, comments)      
    VALUES  
    ('$choice', '$comments')");         
        if (!query) {
           die("Database query failed: " . mysql_error());
        }
?>

想法或建议？

我在这里发现了一个非常相似的问题，但该线程已有 3 年历史。一位用户提出了这个建议

//Instead of using
data: dataString
//use
data : {param: value, param2: value2}

但我不确定他要如何或以什么格式获取参数值。

谢谢
-音节

Answer 1

如果是我，我会使用Form plugin 让自己更轻松。它已经有了ajaxSubmit 的一组函数，可以毫不费力地使您的表单进行ajaxify。 IT 还具有方便的formSerialize 函数，该函数将序列化表单以进行 ajax 提交或附加到链接的查询字符串。 :-)

这表示没有插件并利用现有代码的更简单方法：

$("#form_process").click(function() {

  $.ajax({
    type: "POST",
    url: "**ABSOLUTE URL TO PROCESSOR**",
    data: {
      'choice': $("input[@name=RadioGroup1]:checked").val(), 
      'comments':  $("#comments").val()
    }
  });

});

不过，无论哪种方式，您还需要将所有单选输入更改为具有唯一 ID（或根本没有 ID）...您不能使用相同的 ID，因为它要求所有 id 属性在文档中具有唯一值。

Answer 2

几周前我遇到了同样的问题，我只是尝试使用这样的旧方法

<script type="text/javascript">
    $(function() {
      $("#form_process").click(function() {
        //$("#choice").val(); //you cannot use the same id for more than 1 tag
        var choice = 0; 
             if(document.getElementById("choice1").checked) choice='Yes';
        else if(document.getElementById("choice2").checked) choice='No';
        else if(document.getElementById("choice3").checked) choice='Dont Know';

        var comments = document.getElementById('comments').value; //$("#comments").val();
        var dataString = 'choice='+ choice + '&comments=' + comments;

        $.ajax({
          type: "POST",
          url: "**ABSOLUTE URL TO PROCESSOR**",
          data: dataString
        });
     });
   });
</script>

我真的不知道，我认为这不是最好的方法，但这对我有用:)