从表单中动态获取响应答案

【问题标题】：Dynamically Get Response from Form从表单中动态获取响应
【发布时间】：2015-03-31 09:13:12
【问题描述】：

好的，伙计们，我已经在这工作了几个小时，甚至不知道从哪里开始或从哪里开始，所以我从这个开始。我使用了来自各地的样本，但似乎无法根据我的需要定制它们。

我有一个起始页，我们称之为“Portal.php” 基本上我要做的是在页面中实现“dynamicAddUser.php”，方法是在出现图像按钮时获取其内容，它会出现在它下面。它需要创建这个表单：

<form id="addUser" method="POST">
<label>Username <input name="user" /></label><br/>
<label>Password <input name="pass" type="password"/>
</label>
<button name="submit">Add User</button></form>

基本上我需要它将表单提交到“response.php”并动态获取它的输出而不更改页面。

非常感谢任何帮助！

编辑：

<html>
<!DOCTYPE html>
<head> <meta charset="UTF-8"> 

<style media="print">
#goBack,#printRow {
   display:none;
}
</style>

</head>
<body id="body" class="body">

<form id="addUser" method="POST">
    <label>Username <input name="user" /></label><br/>
    <label>Password <input name="pass" type="password"/></label>
    <button id="createUser" name="submit">Add User</button>
</form>

<div id="container" class="container">
div contents here
</div>

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

<script>
    $('#addUser').on('submit', function(){
    var postData = $(this).serializeArray();
    $.ajax({
        url: 'response.php',
        data: postData,
        type: "POST"
    }).done(function(html_response){
        // Assuming you are sending and html from php using
        // echo instead of json_encode().
        // You can use body instead of #container. It depends on what you return
        $('#container').html('ajax done successfully');
    });
});     
</script>
</meta>
</body>
</html>

我终于让它完成了我需要做的事情，Firefox 无法处理按钮的请求存在一些问题（为此拉了一些头发。）可惜！更近一步，现在我无法将回复写出来：/我已经尝试了我能想到的一切，再次感谢！

【问题讨论】：

唯一的方法是使用 AJAX。请阅读指南w3schools.com/ajax
您是否简单地尝试提交 POST 表单并通过 ajax 获取响应？
这就是我想要做的！

标签： javascript php ajax forms dynamic

【解决方案1】：

Form.html

<form id="addUser" method="POST">
<label>Username <input class='username' name="user" /></label><br/>
<label>Password <input class='password' name="pass" type="password"/>
</label>
<button id='register' onclick='submitForm()' name="submit">Add User</button>
</form>
<div class='result'></div>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
function submitForm() {
 var username = $.trim($('.username').val());
 var password = $.trim($('.password').val());
 $.ajax({
    type: "POST",
    url: "response.php",
    data: "username="+username+"&password="+password, 
    cache: false,
    success: function(html) {
            $('.result').html(html).fadeIn('fast');
    }
 });
}
</script>

response.php

<?php
 echo $username = $_POST['username'].'<br/>';
 echo $password = $_POST['password'];
?>

您还可以在ajax中序列化表单中的数据

【讨论】：

这太棒了，非常感谢你给了我一些额外的工作！我现在的问题是 response.php 似乎没有执行任何代码，此时没有任何验证，除了使用 if(isset($_POST[' user']) && isset($_POST['pass'])) 当我从另一个页面提交测试表单时，之后的一切都是金色的，只是不确定中间发生了什么？

【解决方案2】：

您必须在 php 中使用 AJAX。假设您将使用 jQuery。

response.php

$user = $_POST['user'];
$pass = $_POST['password'];

// Save your user
$data = ['saved' => true, 'user' => $user, 'message' => 'You are now registered'];
// Or if you are using PHP 5.3 or under
$data = array('saved' => true, 'user' => $user, 'message' => 'You are now registered');
return json_encode($data);

portal.php

...
<form id="addUser" method="POST">
    <label>Username <input name="user" /></label><br/>
    <label>Password <input name="pass" type="password"/></label>
    <button id="createUser" name="submit">Add User</button>
</form>
...
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
    $('#addUser').on('submit', function(){
    var postData = $(this).serializeArray();
        $.ajax({
            url: 'response.php',
            data: postData,
            type: "POST"
        }).done(function(data){
            // Now you can use the data as you like with jQuery
            $('.message').addClass('success').html(data.message);
            $('#user').html(data.user.name); // Or whatever
        });
    });
</script>

您还可以发送一个 html 部分来替换页面的整个部分：

$('#addUser').on('submit', function(){
    var postData = $(this).serializeArray();
    $.ajax({
        url: 'response.php',
        data: postData,
        type: "POST"
    }).done(function(html_response){
        // Assuming you are sending and html from php using
        // echo instead of json_encode().
        // You can use body instead of #container. It depends on what you return
        $('#container').html(html_response);
    });
});

【讨论】：

首先我想说非常感谢您，无论我之前尝试此操作时所做的一切都不起作用，因此非常感谢！看起来它会起作用，但我在这一行不断收到错误 Parse error: syntax error, unexpected '[', expecting ')'
首先我想说非常感谢您，无论我之前尝试此操作时所做的一切都不起作用，因此非常感谢！看起来它会起作用，但我在这一行不断收到错误 return json_encode(['saved' => true, 'user' => $user, 'message' => 'You are now registered']);解析错误：语法错误，意外 '['，期待 ')' 我已经用它做了我能想到的一切，甚至将它重写为一个函数。这个“响应”页面也是处理将用户添加到数据库的功能的页面，我是不是搞错了？谢谢！
你使用的是什么版本的php？如果它低于 5.4，则不能使用方括号 [] 而是使用 array() 来定义数组。我编辑了答案。再看一遍。