Question

我想从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还是新手。请帮忙。感谢。

Answer 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);
        }
    })
})

Answer 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”。它会工作！

Answer 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>

归功于Chris

php javascript form serialize get data undefined index

3 个答案: