欢迎访问宙启技术站
智能推送

发布三个ajax相关的函数,包括无刷新提交表单等

发布时间:2023-05-13 23:42:43

1. Ajax GET 请求函数:

function ajaxGet(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      callback(xhr.responseText);
    }
  };
  xhr.send();
}

这个函数发送 GET 请求,从指定的 URL 获取数据,并在请求完成时将响应传递给回调函数。使用这个函数,只需要传入 URL 和回调函数即可。

2. Ajax POST 请求函数:

function ajaxPost(url, data, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", url, true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      callback(xhr.responseText);
    }
  };
  xhr.send(data);
}

这个函数发送 POST 请求,将数据提交到指定的 URL,并在请求完成时将响应传递给回调函数。使用这个函数,需要传入 URL、要提交的数据以及回调函数。

3. 无刷新提交表单:

function submitForm(form, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", form.action, true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      callback(xhr.responseText);
    }
  };
  xhr.send(new FormData(form));
}

这个函数可以在不刷新页面的情况下提交表单,将表单数据以 AJAX 的方式提交到指定的 URL,并在请求完成时将响应传递给回调函数。使用这个函数,需要传入要提交的表单元素以及回调函数。