【问题标题】:Can't post value's to php file using AJAX Jquery无法使用 AJAX Jquery 将值发布到 php 文件
【发布时间】:2018-09-24 04:33:33
【问题描述】:

我在这方面遇到了令人难以置信的困难。我正在尝试使用 ajax jquery 将我的值从表单发布到 php 文件。我确实在控制台中找到了值,但是当我执行 ajax 方法时它不会发布值。

jQuery 代码

var formData = [];

function formValidate() {
 var error = false;
  $(".form .required").each(function(k, v) {
   $(v).removeClass("error");
   if ($(v).attr("type") === "radio" && $(v).prop("checked")) {
     formData[$(v).attr("id")] = $(v).val();
   } else if ($(v).val() === "") {
     $(v).addClass("error");
     //$(v).prop("placeholder”,”Required.”);
     error = true;
   } else {
     formData[$(v).attr("id")] = $(v).val();
   }
  });
    console.log(formData); //all data is successful shown 
    return error;
 }

// send function
function formSend() {
  $.ajax({
  type: 'POST',
  url: "include/mail.php",
  data: formData,
  dataType: "html",
  encode: true,
  success: function(response) {
     alert(response);

  },
  error: function() {
     $("form").hide();
  }
 });
 event.preventDefault();

}

HTML代码

<form action="" id="form-3">
 <div class="container row">
  <div class="col-md-4 col-xs-12">
  </div>
  <div class="col-md-4 col-xs-12">
  <div class="form-group">
    <input type="text"  class="form-control required" name="naam" placeholder="Naam" id="naam">
  </div>
  <div class="form-group ">
    <input type="text" class="form-control required" name="telnr" placeholder="Telefoon" id="telnr">
  </div>
  <div class="form-group">
    <input type="email" class="form-control required" name="email" placeholder="E-mail" id="email">
  </div>
  </div>
 </div>
</form>

如果我在 console.log(formData) 中找到了值,那为什么不发布呢?

编辑:

在这里你可以看到控制台日志的图像

发出请求时。 需要将值发送到 mail.php

[![在此处输入图片描述][2]][2]

在这里你可以看到如果我使用 console.log 会显示 formData

【问题讨论】:

  • 也考虑使用 jquery 的序列化函数,让事情变得更容易:api.jquery.com/serialize
  • $(v) 中的 v 指的是什么? formData[$(v).attr("id")] = $(v).val(); 您正在尝试使用 [] 设置关联数组?
  • 嗨,“formSend()”函数在哪里调用?我没有看到任何发送。您能否捕获请求(在 chrome、开发工具 => 网络中)并向我们展示?
  • formSend() 是在一个简单的 .click() 函数中调用的,我怀疑问题是否存在。 ,我的问题已针对控制台日志图像进行了更新。 @文森特
  • $(v) 是输入元素@frz3993

标签: javascript php jquery ajax


【解决方案1】:

问题是formData 是一个 JSONArray - 但在 ajax 调用中您需要提供一个 JSONObject。因此,在验证函数中将formData 初始化为 JSONObject,然后将键值推入其中。

重写formData 初始化如:

var formData = {};

它应该可以工作。

【讨论】:

    【解决方案2】:

    您应该使用serilize 而不是单个字段值传递表单数据。试试下面的代码:

    jQuery 代码:

    var formData = $("form").serialize();
    $.ajax( {
        type: "POST",
        url: "YOUR PHP FILE PATH",
        data: formData,
        dataType: 'json',
        beforeSend: function () {
            //do stuff progressing
        },
        success: function (resp) {
           //do stuff after post
        },
        error: function (e) {
            alert('error: ' + JSON . stringify(e));
        }
    });  
    

    PHP 代码:

    <?php 
    print_r($_POST); //it will print array with all form input field
    ?>
    

    注意:设置表单action="javascript:void(0)"

    【讨论】:

    • 错误:{"readyState":4,"responseText":"找到php文件/var/www/vhosts/huisinkoper.nl/httpdocs/include/mail.php在第 23
      \n
      \n注意:未定义索引:/var/www/vhosts/huisinkoper.nl/ 中的 naam httpdocs/include/mail.php36 行
      \n
      \n注意:未定义索引:telnr in /var/www/vhosts/huisinkoper.nl/httpdocs/include/mail.php 上线 37
      \n
      \n通知 b>:未定义索引:/var/www/vhosts/huisinkoper.nl/httpdocs/include/mail.php 中的电子邮件40
      \n" ,"status":200,"statusText":"OK"}
    • 你能给出console.log(formData)的结果吗?
    • 我在我的问题中做了,第二张图片是 console.log(formData) @HimelNagRana 的结果
    • @Peterrosevelt 对不起,我错过了。好的,问题是 formData 是一个 JSONArray - 但在 ajax 调用中,您需要提供一个 JSONObject。因此,在验证函数中将formData 初始化为 JSONObject,然后将键值推入其中。然后它将起作用。谢谢。
    • @Peterrosevelt,您在 mail.php 上遇到未定义的索引错误。先尝试修复它们
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-16
    • 2014-10-01
    • 2017-07-15
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多