Question

contact.php

... html form ...

$('#submit').click(function(){
$.post("mail.php", $("#contact").serialize(), function(response) {
$('#success').html(response);
});
return false;
});

mail.php是一个单独的文件（用于发送邮件），一切都按此安排工作。

但我需要将contact.php加载到index.php

$('#divR').load('chapters/contact.php');

所以相应的js行变为

 $.post("chapters/mail.php", $("#contact").serialize(), function(response) {...

收到response来自mail.php的{{1}}提交表单，但POST数组为空，即表单不会向mail.php发送任何数据！？< / p>

Answer 1

我在2个新页面中编写了你的代码，看看它实际上做了什么，并注意到了一些事情。一些小的东西，比如调用提交处理程序而不是点击，因为人们也可以按Enter提交表单，但最重要的是数据本身：表单不需要序列化，浏览器已经为你做了。在此脚本中，我将数据存储在新对象中，并将其传递给$.post方法。

<form method="post" action="" id="contact">
    <div>
        <input id="email" type="text">
    </div>
    <div>
        <input id="submit" type="submit">
    </div>
</form>

脚本：

$("#contact" ).on("submit", function () {
    var data = {
        email: $("#email").val()
    };

    $.post("test.php", data, function (response) {
        $('#success').html(response);
    });

    return false;
});

在test.php我只做一个print_r($_POST)，这也是回复。它将输出如下内容：

Array
(
    [email] => test
)

希望这有帮助。

Answer 2

我做了一个简单的测试，试图模仿你的目标： testLoad.php = index.php在你的情况下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(function(){
    $('#testLoad').load('Test/testForm.php');   
});
</script>
</head>

<body>
<div id="testLoad"></div>
<div id="success"></div>
</body>
</html>

testForm.php和testTarget.php分别是 - contact.php和mail.php，位于文件夹中测试其代码如下： testForm.php：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<form id="contact" method="post" action="">
  <p>
    <label for="textfield">Name:</label>
    <input type="text" name="textfield" id="textfield">
  </p>
  <p>
    <label for="textfield2">Address:</label>
    <input type="text" name="textfield2" id="textfield2">
</p>
  <p>
    <label for="textfield3">Mail:</label>
    <input type="text" name="textfield3" id="textfield3">
</p>
  <p>
    <label for="textfield4">Subject:</label>
    <input type="text" name="textfield4" id="textfield4">
    <br>
  </p>
  <p>
    <label for="textarea">Message:</label>
    <textarea name="textarea" id="textarea"></textarea>
  </p>
  <p>
    <input type="button" name="submit" id="submit" value="Submit" onClick="sendForm();">
  </p>
</form>
<script>
$('#submit').bind('click', function(){
        //console.log($("#contact").serialize());
        $.post("Test/testTarget.php", $("#contact").serialize(), function(response) {
            $('#success').html(response);
        });
        return false;
    });
</script>
</body>
</html>

和testTarget.php：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<?php print_r($_POST);?>
</body>
</html>

在成功测试div时，我收到打印出来的POST。希望这可以帮助。

如何将表单从已加载的表单提交到主页面？

2 个答案: