表格中没有发布数据答案

【问题标题】：No Data Posted in a form表格中没有发布数据
【发布时间】：2014-01-26 23:03:17
【问题描述】：

我使用了一个表单，它使用 POST 方法通过 AJAX 将数据发送到 php 文件。一切正常，我可以在 html 表中的 id div 名称中看到结果。但是现在这个相同的表包含具有相同方法的输入字段（第二种形式）。所有 id 和名称都不同，我可以看到字段值 alert( $("input[name=id]").val() );';
我错过了什么吗？

<html>

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

</head>

<body>


     <form name="ajaxform" id="ajaxform" action="edit.php" method="POST">

     <select name="user" id="simple-post" onchange="this.value.submit()">
     <option value="">Select a person:</option>

 <option value="0">John</option>
     <option value="1">Peter</option>
 <option value="1">Heinrich</option>      

     </select>
     </form>

  <div id="simple-msg">
  </div>



<script>

$(document).ready(function()
{



$("#simple-post").click(function()
{

$("#ajaxform").submit(function(e)

{

    $("#simple-msg").html("<img src='loading.gif'/>");

    var postData = $(this).serializeArray();

    var formURL = $(this).attr("action");

    $.ajax(

    {

        url : formURL,

        type: "POST",

        data : postData,

        success:function(data, textStatus, jqXHR)

        {

            $("#simple-msg").html('<pre><code class="prettyprint">'+data+'</code></pre>');


        },
        error: function(jqXHR, textStatus, errorThrown)

        {

            $("#simple-msg").html('<pre><code class="prettyprint">AJAX Request Failed<br/> textStatus='+textStatus+', errorThrown='+errorThrown+'</code></pre>');

        }

    });

    e.preventDefault(); //STOP default action

    e.unbind();
});


$("#ajaxform").submit(); //SUBMIT FORM

});


});

</script>

</body>

现在是edit.php页面

<?php

$json_a=json_decode(json_encode($_POST),true);
$output=array();
$i=0;
foreach ($json_a as $key => $value){
   echo  $key . ':' . $value; // peut-être branché!
   $output[$i]= $value;
   $i++;
}

$array_user=array();
$array_user[0]=$output[0];
$array_user[1] ="Yes";
$array_user[2] ="mypass";

echo '<form name="ajaxform1" id="ajaxform1" action="SQL_user.php" method="POST">
';      

echo '<input type="text" name="id" size="3" value="' .$array_user[0]. '"/>';
echo '<input type="text" name="online" size="3" value="' .$array_user[1]. '"/>';
echo '<input type="text" name="password" size="20" value="' .$array_user[2]. '"/>';
echo '<input type="button"  id="simple-post1" value="Apply" />';    

echo '</form>';


echo '<br>';
echo'<div id ="simple-msg1">';
echo'</div>';




echo '<script>

$(document).ready(function()
{



$("#simple-post1").click(function()
{

$("#ajaxform1").submit(function(e)

{

    $("#simple-msg1").html("<img src='."'loading.gif'".'/>");

    var postData = $(this).serializeArray();

    var formURL = $(this).attr("action");

    $.ajax(

    {

        url : formURL,

        type: "POST",

        data : postData,

        success:function(data, textStatus, jqXHR)

        {

            $("#simple-msg1").html('."'<pre><code  class=".'"prettyprint"'.">'+data+'</code></pre>');


        },
        error: function(jqXHR, textStatus, errorThrown)".'"

        {

            $("#simple-msg1").html('."'<pre><code class=".'"prettyprint">AJAX Request Failed<br/> textStatus='."'+textStatus+', errorThrown='+errorThrown+'</code></pre>');

        }

    });

    e.preventDefault();
    e.unbind();

});


".'$("#ajaxform1").submit();
});


});

</script>';

?>

第二种形式不行……

【问题讨论】：

我只看到一个表单，或者您是在第一次 ajax 调用之后动态添加表单，是 data 中的内容吗？
另一种形式几乎相同（在另一个php页面中）由第一个动作调用

标签： javascript jquery ajax forms post

【解决方案1】：

如果带有id=simple-post 的元素被点击，您已经运行了以下代码。注意，.submit 嵌套在 .click 中

$(document).ready(function () {
    $("#simple-post").click(function () {
       $("#ajaxform").submit(function(e){
        //code to execute on submit action goes here
       }

        $("#ajaxform").submit(); //SUBMIT FORM
    });
});

所以表单提交上的 EventHandler 只会在带有 id=simple-post 的元素被点击后注册，这就是原因，ajax 请求没有发生并且表单被正常提交。

你的意思是：

$(document).ready(function () {
    $("#ajaxform").submit(function (e) {
        $("#simple-msg").html("<img src='loading.gif'/>");
        var postData = $(this).serializeArray();
        var formURL = $(this).attr("action");
        $.ajax({
            url: formURL,
            type: "POST",
            data: postData,
            success: function (data, textStatus, jqXHR) {
                $("#simple-msg").html('<pre><code
class="prettyprint">' + data + '</code></pre>');
            },
            error: function (jqXHR, textStatus, errorThrown) {
                $("#simple-msg").html('<pre><code class="prettyprint">AJAX     Request Failed<br/> textStatus=' + textStatus + ', errorThrown=' + errorThrown + '</code></pre>');
            }
        });
        e.preventDefault(); //STOP default action
        e.unbind();
    });
    $("#simple-post").click(function () {
        $("#ajaxform").submit(); //SUBMIT FORM
    });

});

以上代码将在$(document).ready 的表单提交上设置EventHandler。在以下情况下，表单将通过 ajax/xhr 提交：

提交按钮表单被按下。
带有id=simple-post 的元素被点击。（Run Code 按钮）

这是你打算做的吗？

【讨论】：

id simple-post 是按钮，但是这个id名称和其他的对于第二种形式是不同的。但你是对的，我认为 eventHandler 留在了第一个。我怎样才能切换到第二个。这件事很奇怪，除了数据之外的所有工作......
那么你的问题是什么？我无法理解你在问什么。所以如果可以解释，也许使用可能很酷的示例和实时代码。