使用 Post 方法和 Ajax 將數據從一個表單接收到另一個表單

Question

我試圖在處理文件中使用 post 方法獲取數據，但我做不到。 我需要通過 POST 方法接收數據並在進程中顯示我的數據。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

Answer 1

我在評論中解釋了代碼中發生的事情。 您沒有理由發送 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();

Answer 2

為了使用 ajax 提交表單，您需要使用preventDefault()防止表單的默認提交行為。

在您的代碼中，您會這樣做：

$("#smp").click(function(event){
  event.preventDefault(); // prevent the default submit
  var name = $('#name').val();
  ...

---

一些旁注：

1. 與其使用提交按鈕的click event ，不如使用表單本身的submit event ，而不是收集要手動發送的輸入數據，而應使用給定的 jQuery 函數來執行此操作。 例如，您可以在表單中添加一個 ID：

<form action="process.php" method="post" id="myForm">

接着

$("#myForm").click(function(event){
  event.preventDefault();
  var $form = $(this); // the form that gets submitted
  var url = $form.attr('action'); // get the url from the forms action attribute
  var data = $form.serialize(); // get the form as url encoded string
  var method = $form.attr('method');
  $.ajax({
    url: url,
    method: method,
    data: data,
    success: function ( response ) {
      window.location.href = url + '?' + data;
    },
});

通過這樣做，您現在可以將輸入字段添加到您的表單中，而不必手動將它們添加到您的數據和 url 字符串中。

2. 假設您在輸入中輸入 'tony' 並點擊submit 。 您的代碼現在執行此操作：

   1. 通過 ajax 將{"name": "tony"}發布到 process.php
   2. process.php 回顯Good its POST並完成
   3. 您在success回調中收到帶有response的回聲
   4. 您立即使用 get 參數name=tony重定向到process.php頁面
   5. 您的 process.php 被調用並且沒有回顯，因為您的$user_g變量具有值tony ，這不在您的條件下

因此，您不會在任何地方看到Good its POST的 output，因為您會立即重定向。