时间戳

首页 > 解决方案 > 使用 Post 方法和 Ajax 从一个表单接收数据到另一个表单

javascript - 使用 Post 方法和 Ajax 从一个表单接收数据到另一个表单

问题描述

我试图在处理文件中使用 post 方法获取数据，但我做不到。我需要通过 POST 方法接收数据并在 process.php 中显示我的数据 请记住，我的输入不在表单标签中。我只是想用 window.location.href 代码移动到相关页面。我认为当用户被JavaScript转移到处理页面时。帖子数据丢失

$(document).ready(function(){
        $("#smp").click(function(event){
         var name = $('#name').val();
         $.ajax({

                  url: "process.php",
                        method: "POST",
                        data:name,
                        success: function (data) {
                            window.location.href = "process.php";
                        },
                        error: function (jqXHR, textStatus, errorThrown) { // the error will accure if process.php did not return a valid response (return)
                            alert(data);
                            alert('An error occurred... Look at the console (F12 or Ctrl+Shift+I, Console tab) for more information!');
                            $('#result').html('<p>status code: ' + jqXHR.status + '</p><p>errorThrown: ' + errorThrown + '</p><p>jqXHR.responseText:</p><div>' + jqXHR.responseText + '</div>');
                            console.log('jqXHR:');
                            console.log(jqXHR);
                            console.log('textStatus:');
                            console.log(textStatus);
                            console.log('errorThrown:');
                            console.log(errorThrown);
                        }
                    });

        });
    });
<div class="form"><label id="icon" for="name"><i class="fas fa-user"></i></label>
        <input type="text" name="name" id="name" />

        <div class="btn-block">

          <button id="smp" type="submit" href="/">Submit</button>
        </div></div>

我的 php 文件 http://sandbox.onlinephpfunctions.com/code/f379f5e2662300270c64ad867316ca268dd91640

标签： javascriptphpjquery

解决方案

我在评论中解释了代码中发生的事情。您没有理由发送 JSON 请求，您在键中发送相同的值，而它的值毫无意义。

$(document).ready(function(){
        $("#smp").click(function(event){
         var name = $('#name').val();
         $.ajax({

                  url: "process.php",
                        method: "POST",
                        dataType: 'text',
                        data:{"name" : name}, // here you are sending process.php name too. if it returns something then it should go th the success function and redirect.
                        success: function (data) {
                            window.location.href = "process.php?name=" + name; // if the function returned something then it will redirect it to "process.php?name=" + name
                        },
                        error: function (jqXHR, textStatus, errorThrown) { // the error will accure if process.php did not return a valid response (return)
                            alert(data);
                            alert('An error occurred... Look at the console (F12 or Ctrl+Shift+I, Console tab) for more information!');
                            $('#result').html('<p>status code: ' + jqXHR.status + '</p><p>errorThrown: ' + errorThrown + '</p><p>jqXHR.responseText:</p><div>' + jqXHR.responseText + '</div>');
                            console.log('jqXHR:');
                            console.log(jqXHR);
                            console.log('textStatus:');
                            console.log(textStatus);
                            console.log('errorThrown:');
                            console.log(errorThrown);
                        }
                    });

        });
    });

现在，您的 HTML 代码不应该包含form没有理由发送它！您只是发送 2 个具有相同数据的请求，因此我将其替换为以下代码：

<label id="icon" for="name"><i class="fas fa-user"></i></label> 
        <input type="text" name="name" id="name" />

        <div class="btn-block">

          <button id="smp" type="submit" href="/">Submit</button>
        </div>

重要补充：如果您坚持离开表单请求而不重定向，您可以使用 .preventDefault();

推荐阅读