通过AJAX将表单数据传递给mySQL [英] passing form data to mySQL through AJAX

问题描述

我使用JavaScript和AJAX将表单数据发送到php处理文件，然后填充SQL数据库而无需刷新初始表单页面。

I am using JavaScript and AJAX to send form data to a php processing file to then populate an SQL database without refreshing the initial form page.

php / SQL连接正在工作，但表单数据没有被正确发送。

The php/SQL connection is working, but the form data is not being sent correctly.

有两个字段：称为选择的广播组和名为 注释。填充数据库时，选择字段始终为是（3个单选按钮中的第一个），并且注释字段始终为空。我认为这个问题一定是数据字符串被构造的方式，但几个小时的修补没有成功。

There are two fields: a radio group called "choice", and a text field called "comments". When the DB is populated, the choice field is always "yes" (the first of the 3 radio buttons), and the comments field is always blank. I think the issue must be the way that the datastring is being constructed, but hours of tinkering have brought no success.

这是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函数

here is the Javascript/AJAX function

<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岁了。一位用户建议这样做：

I found a very similar question here, but the thread is 3 years old. A user suggested this

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

但我不确定以什么格式表示他的参数值。

but I'm not sure how, or in what format he means to get the param values.

谢谢

-syllable

Thank you
-syllable

推荐答案

如果我使用表单插件。它已经有了一个 ajaxSubmit 函数集，可以让你的表单不费力气。 IT也有方便的 formSerialize 函数，它将序列化表单以提交ajax或附加到查询字符串以获取链接。 ： - ）

Were it me i would just make this easier on myself by using the Form plugin. Its already got an ajaxSubmit set of functions to make ajaxify your form with little effort. IT also has the handy formSerialize function which will serialize a form for ajax submission or to append to a query string for a link. :-)

这就是没有插件和利用现有代码的简单方法：

That said an easier way without the plugin and utilizing your existing code:

$("#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属性在文档中都有唯一的值。

Either way though, you also need to change all your radio inputs to have unique ID's (or no ID at all)... you cant use the same one as its required that all id attributes have unique values within the document.

这篇关于通过AJAX将表单数据传递给mySQL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！