Question

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

我有一个起始页面，我们将此称为“#34; Portal.php＆＃34;基本上我要做的就是实现＆＃34; dynamicAddUser.php＆＃34;当图像按钮出现时，通过获取它的内容进入页面，它出现在页面下方。它需要创建这种形式：

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

基本上我需要它将表格提交给＆＃34; response.php＆＃34;并动态获取它的输出而不更改页面。

非常感谢任何帮助！

编辑：

<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没有处理按钮的请求（拉了一些头发。）可惜！更进一步，现在我只是在写出答案时遇到了麻烦：/我已经尝试了我能想到的一切，再次感谢！

Answer 1

你必须在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 partial来替换页面的整个部分：

$('#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);
    });
});

Answer 2

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

中序列化表单中的数据

从表单动态获取响应

2 个答案: