通过 jQuery 将变量传递给 PHP 文件答案

【问题标题】：Passing variables to a PHP file through jQuery通过 jQuery 将变量传递给 PHP 文件
【发布时间】：2012-05-22 12:46:21
【问题描述】：

真的不熟悉jQuery。无论如何我可以使用 jQuery 将表单数据传递给 PHP 文件吗？

表格：

<div id="dialog-form" title="Fill in your details!">
  <form>
<fieldset>
  <label for="name">Name</label>
  <input type="text" name="name" id="name"/>
  <label for="email">Email</label>
  <input type="text" name="email" id="email" value=""/>
  <label for="phone">Phone</label>
  <input type="phone" name="phone" id="phone" value=""/>
</fieldset>
  </form>

这是一个带有 jQuery 的弹出对话框，并通过以下方式提交：

$("#dialog-form").dialog({
  autoOpen: false,
  height: 450,
  width: 350,
  modal: true,
  buttons: {
    "Sumbit": function() {
    //VALIDATES FORM INFO, IF CORRECT
      if (Valid) {
        $.ajax({
          url: 'process-form.php',
          success: function (response) {
          //response is value returned from php
            $("#dialog-success").dialog({
              modal: true,
              buttons: {
                Ok: function() {
                  $(this).dialog("close");
                }
              }
            });
          }
        });
        $(this).dialog("close");
      }
    }
  }
});

我想要做的是将用户输入的表单数据发送到process-form.php，在那里它将被处理并作为电子邮件发送（我可以这样做）。只是不确定在 jQuery 方面。有可能吗？

【问题讨论】：

jQuery POST form data 和许多其他人的可能重复... :-)
搞定了，谢谢大家。 ^显然首先浏览了其他问题。如果我不太了解代码，那么我真的无法判断这是否是我需要的。

标签： php jquery

【解决方案1】：

你可以使用.serialize()函数

$('yourform').serialize();

Docs for .serialize() here

你会这样使用它：

$.ajax({
    url: 'process-form.php',
    data: $('form').serialize(),  // **** added this line ****
    success: function (response) { //response is value returned from php
        $("#dialog-success").dialog({
            modal: true,
            buttons: {
                Ok: function () {
                    $(this).dialog("close");
                }
            }
        });
    }
});

【讨论】：

【解决方案2】：

可以，可以使用jQuery的.post()方法，详细here

$.post( "process-form.php", $( "#dialog-form" ).serialize( ) );

【讨论】：

【解决方案3】：

鉴于您当前的代码，最简单的方法是将表单序列化为数据属性：

[...]
url: 'process-form.php',
data: $('#dialog-form').serialize()

【讨论】：

【解决方案4】：

您在 $.ajax 上是正确的，但是您需要在提交时实际传递数据，到目前为止您还没有这样做。你最好也设置“类型”。

$( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 450,
        width: 350,
        modal: true,
        buttons: {
            "Sumbit": function() {
                //VALIDATES FORM INFO, IF CORRECT
                if (Valid ) {
                    $.ajax({
                       url: 'process-form.php',
                       type: "post",
                       data: {
                           name: $('[name=name]').val(),
                           email: $('[name=email]').val(),
                           phone: $('[name=phone]').val(),
                       },
                       success: function (response) { //response is value returned from php
                            $( "#dialog-success" ).dialog({
                                modal: true,
                                buttons: {
                                    Ok: function() {
                                        $( this ).dialog( "close" );
                                    }
                                }
                            });
                       }
                    });
                    $( this ).dialog( "close" );
                }

这些变量现在应该在您的 PHP 脚本中以 $_POST['name']、$_POST['email'] 和 $_POST['phone'] 的形式出现

【讨论】：

您可以使用.serialize()传递整个表单

【解决方案5】：

如果您使用 ajax 发送，form 有什么意义？现在解决问题，通过以下方式获取输入：

var fields = [];
$("#dialog-form form fieldset > input").each(function() {
   fields.push( $(this)[0].value );
});
...
$.ajax({
   url: 'process-form.php',
   data:fields
...

【讨论】：