JavaScript表單提交詳解

一、jsform表單提交成功彈出框

在網頁中我們常常需要提交表單並提示用戶提交成功。在JavaScript中，可以使用confirm彈窗或者alert彈窗方法來實現。代碼如下：

const submitBtn = document.getElementById('submit-btn');
submitBtn.addEventListener('click', () => {
  // 假設表單驗證成功，發送請求
  // ...
  // 成功後彈窗
  window.confirm('提交成功！');
});

二、js獲取form表單提交的數據

在JavaScript中，通過form表單的id或者name屬性，可以獲取該表單下所有input的值。代碼如下：

const form = document.getElementById('myForm');
const formData = new FormData(form);
console.log(formData.get('username')); // 獲取username的值

需要注意的是，如果表單中有type為file的input，則不能使用該方法獲取表單數據，需要使用FormData對象。

三、form表單提交報405

在使用form表單提交時，有時可能會遇到405錯誤。這是因為默認情況下，form表單使用的是get方法，但是服務器端只接受post方法。需要在form表單中設置method屬性為post。

  ...

四、form表單提交後事件

在form表單提交後，我們有時需要做一些處理，比如清空輸入框、禁止重複提交等。可以通過監聽form的submit事件來實現。

const form = document.getElementById('myForm');
form.addEventListener('submit', (event) => {
  event.preventDefault(); // 阻止默認提交行為
  // 在這裡進行一些處理
  form.reset(); // 清空表單
});

五、form表單提交的幾種方式

在JavaScript中，實現form表單提交有多種方式，包括使用表單DOM對象的submit方法、使用XMLHttpRequest方法、使用fetch方法等。

使用表單DOM對象的submit方法：

const form = document.getElementById('myForm');
form.submit(); // 調用表單的submit方法提交表單

使用XMLHttpRequest方法：

const xhr = new XMLHttpRequest();
xhr.open('post', 'url');
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send(formData);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
}

使用fetch方法：

fetch('url', {
  method: 'post',
  headers: {
    'Content-type': 'application/x-www-form-urlencoded'
  },
  body: formData
}).then(response => {
  return response.json();
}).then(data => {
  console.log(data);
});

六、js提交form表單

在JavaScript中，可以通過創建一個隱藏的form表單，並設置表單的屬性和值，然後提交表單來達到提交表單的目的。

const form = document.createElement('form');
form.style.display = 'none'; // 隱藏表單
form.method = 'post';
form.action = 'url';
const input = document.createElement('input');
input.type = 'text';
input.name = 'username';
input.value = 'test';
form.appendChild(input);
document.body.appendChild(form);
form.submit();

七、js直接提交form表單

在JavaScript中，可以通過調用表單的submit方法來直接提交表單。

const form = document.getElementById('myForm');
form.submit();

八、vue提交form表單

在vue中，可以使用v-on指令來監聽form表單的submit事件，然後通過調用表單的submit方法來提交表單。

  
    
    ...
  


export default {
  methods: {
    handleSubmit() {
      const form = document.querySelector('form');
      form.submit();
    }
  }
}

九、總結

以上是JavaScript表單提交的一些技巧和方法，通過它們可以幫助我們更好地掌握表單提交的過程和細節。在實際應用中，需要根據具體情況選擇不同的提交方式。