Question

我使用一个表单，通过AJAX将带POST方法的数据发送到php文件。一切都很好，我可以在其id div名称的html表中看到结果。但现在这个相同的表包含具有相同方法的输入字段（第二种形式）。所有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>';

?>

第二种形式不起作用......

Answer 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请求没有发生＆amp;表格正常提交。

您的意思是：

$(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按钮）

这是你打算做的吗？

没有数据在表单中发布

1 个答案: