Как отправить форму на php скрипт с помощью ajax?

Question

[skver91]

Необходимо отправить форму на php скрипт с помощью ajax. И при этом на чистом javascript'e. Как это можно сделать?

Спасибо.

Answer 1

[Сергей Мельников]

<form id="myForm">
  <input type="text" name="login" placeholder="Login">
  <input type="password" name="password" placeholder="Password">
  <button type="submit">Отправить</button>
</form>

document.querySelector("#myForm").addEventListener("submit", function(e) {  
  var data = {}, inputs = this.querySelectorAll("input[name]")
  e.preventDefault()
  for (var i = 0, length = inputs.length; i < length; i++) {
    data[inputs[i].name] = inputs[i].value
  }
  // auth.php - куда слать данные
  ajax("auth.php", data, function(resp) {
    // resp - ответ от сервера
    alert(resp)
  })
});

function ajax(url, data, onsuccess, onerror) {
  var request = new XMLHttpRequest()
  request.open('GET', url + data && query(data) || '', true)
  request.onload = function() {
    if (request.status >= 200 && request.status < 400) onsuccess && onsuccess(request.responseText)
    else onerror && onerror()  
  };
  request.onerror = onerror || function() {}
  request.send()
}

function query(obj) {
  var str = "";
  for (var prop in obj) {
    str && (str += "&") || (str = "?");
    if (obj.hasOwnProperty(prop)) str += prop + "=" + obj[prop];
  }
  return str;
}

Answer 2

[WestlE]

<form action="" method="POST" id="name_form">
		<input required name="text" placeholder="Name!" type="text">
		<input value="Register!!" type="submit">
	</form>
       <span id="add_info"></span>

$("#name_form").submit(function(){
		var str = $(this).serialize();
		$.ajax({
			type: "POST",
			url: "func.php",
			data: str,
			success: function(html){
				$("#add_info").html(html); 
			}
                        //return true;
		});
		return false;
	});

Answer 3

[Константин]

Ответ нужно получить?
Если нужно, то гуглите XMLHttpRequest
Если не нужно, то можно вообще форму в iframe сабмитнуть