php javascript表单序列化获取数据未定义索引答案

【问题标题】：php javascript form serialize get data undefined indexphp javascript表单序列化获取数据未定义索引
【发布时间】：2018-04-14 19:16:18
【问题描述】：

我想从 javascript 调用输入值我的主页代码：

<form method="post" id="form">
                  <div class="row">
                    <div class="col-md-6">
                      <label for="f_name">First Name</label>
                      <input type="text" class="form-control" name="f_name "id="f_name" value="">
                    </div>
                    <div class="col-md-6">
                      <label for="l_name">Last Name</label>
                      <input type="text" class="form-control" name="l_name" id="l_name" value="">
                    </div>
                  </div>

.... javascript代码：

$("#singup_btn").click(function(event){
    event.preventDefault();
    $.ajax({
      url     : "register.php",
      method  : "POST",
      data    : $("form").serialize(),
      success : function(data){
        alert(data);
      }
    })
  })

...调用页面代码：

<?php

include "db.php";

    $fname = $_POST["f_name"];
    $lname = $_POST["l_name"];
...
echo $fname;

...单击按钮时出错，仅定义了姓氏（输入）值

<br />
<b>Notice</b>:  Undefined index: f_name in <b>D:\xampp\htdocs\shop\register.php</b> on line <b>5</b><br />
<br />
<b>Notice</b>:  Undefined index: email in <b>D:\xampp\htdocs\shop\register.php</b> on line <b>7</b><br />
<br />
<b>Notice</b>:  Undefined index: password in <b>D:\xampp\htdocs\shop\register.php</b> on line <b>8</b><br />

请有人帮助我？我坚持了4个多小时。我正在学习 javascript n php，n 还是新手。请帮忙。谢谢。

【问题讨论】：

发送ajax请求时，请检查控制台。您可以知道数据是否随请求一起发送。
先生该怎么做？
@BillyAlfredo 在您的浏览器中打开开发者工具（通常在 Windows 上只有 f12）并检查控制台选项卡中的 js 错误。还要检查网络选项卡以查看在请求中传递给服务器的内容。
@MasterYoda 控制台中没有 js 错误，只是一些 css...
这是第一个输入字段中的错误，我已经更新了我的答案。

标签： javascript php jquery forms serialization

【解决方案1】：

您缺少 # 您的第一个输入字段也有错误。

<input name="f_name ">

shouldbe

<input name="f_name">

$("#singup_btn").click(function(event){
    event.preventDefault();
    $.ajax({
        url     : "register.php",
        method  : "POST",
        data    : $("#form").serialize(),
        success : function(data){
            alert(data);
        }
    })
})

【讨论】：

也将“方法”改为“类型”
@Chris 它仍然应该拾取
元素，而不将 Id 定位为选择器。
还是同样的错误，我不认为javascript是这里的问题吗？因为我可以调用姓氏值，但其他值不能.. idk 为什么..
更新了我的答案，发现了另一个错误 - 你也应该说首先它会帮助更快地调试它。
很容易做到，很高兴它的排序:) 如果你刚开始开发，我建议你给自己一个 IDE，它可以帮助消除许多错误，避免它们与许多其他功能一起成为问题。（我使用 Netbeans）

【解决方案2】：

试试这个代码

$(document).on('click', '#singup_btn', function() {
    $.ajax({
        url     : "register.php",
        type    : "POST",
        data    : $("#form").serialize(),
        success : function(data){
            alert(data);
        }
    });
});

请从提交按钮中删除 type="submit" 并添加 type="button"。它会起作用的！

【讨论】：

不，仍然得到同样的错误。仅定义了姓氏输入值。其他未定义。

【解决方案3】：

用name="f_name "id="f_name" 中的空格序列化表单会强制将+ 附加到序列化值。这就是为什么它没有被正确地在服务器端拾取。

预期的服务器端值

f_name=asd&l_name=asd

实际的服务器端值

f_name+=asd&l_name=asd

见下面的测试

$("button").click(function()
{
  //output values before serialization 
  console.log( "Result of f_name");
  console.log ($("#f_name").val() );
  console.log( "Result of l_name");
  console.log ($("#l_name").val() );
  
  //output values after serialization
  var serialized = $("form").serialize();
  console.log( "Result: Notice how f_name has an appended + in its key");
  console.log( "'" + serialized + "'");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="form">
  <div class="row">
    <div class="col-md-6">
      <label for="f_name">First Name</label>
      <input type="text" class="form-control" name="f_name "id="f_name" value="">
    </div>
    <div class="col-md-6">
      <label for="l_name">Last Name</label>
      <input type="text" class="form-control" name="l_name" id="l_name" value="">
    </div>
  </div>
  <button type="button"> test </button>
</form>

感谢克里斯

【讨论】：