如何在使用 ajax 或 js 單擊提交之前將一個表單數據填充到同一頁面上的另一個表單中？

Question

我是 ajax 和 javascript 的新手。 我想在提交之前將條目表單數據填充到同一頁面上的另一個表單中。

這意味着我想在通過單擊按鈕事件提交之前在同一頁面上的另一個表單中顯示注冊表單的名稱、性別等。

請任何人發布一些示例。

Answer 1

（回應您對上述問題的評論......）

啊，那個例子比之前暗示的要復雜得多。 該示例中的目標不是表單，而是圖像。 您的服務器端代碼中是否已經具備生成圖像的功能？

在這種情況下，將 AJAX 發布到服務器是非常容易的部分。 以jQuery為例，您可以執行以下操作：

$.ajax({
  type: 'POST',
  url: 'somepage.php',
  data: data,
  success: function() {
    alert('success!');
  },
  dataType: 'json'
});

變量“數據”將從您的表單元素構建。 可能是這樣的：

var data = '';
data = data + 'somevalue=' + $('#formElement').val();
data = data + 'anothervalue=' + $('#aDifferentElement').val();
// etc.

代碼本質上是用提供的數據向提供的 URL 提交 HTTP POST，然后在成功的結果上運行提供的“成功” function。 您還可以為錯誤結果添加“錯誤”function。

在您的情況下，結果看起來像是圖像。 因此，您最終會將img標記上的src屬性設置為生成的圖像。 像這樣的東西：

$('#imageElement').attr('src', someString);

我不確定他們在該示例中是如何做到的，但您當然可以查看代碼並在 Firebug 中單步執行以查看您能找到的內容。 響應似乎是實際圖像，而不是圖像的鏈接。 但是你可以設計你的任何一種方式。