1.3.1.4. fejezet, AJAX műveletek és sorrend

Beküldte pzoli - 2015, január 5 - 8:08du

Mellékelt program JavaScript/JQuery/PHP5 megoldás, metódus meghívási sorrend kialakításához.

A következő HTML5 kód tartalmazza a JQuery/JavaScript inicializálást, a teszthez használt formokat és beviteli mezőket, gombokat:

<!DOCTYPE html>
<html lang="hu-HU">
<head>
<meta charset="utf-8">
<script src="jquery-2.1.3.js"></script>
<script src="test.js"></script>
<script>
$( document ).ready( function(){
  alert("onready.start");
  $("#button").click(function(){
    $.get("demo_test.php",function(data,status){
      alert("Data: " + data + "\nStatus: " + status);
    });
  });
  alert("onready.finished.");
} );
$(document).ajaxStart(function(){
  $("#wait").css("display","block");
});
$(document).ajaxComplete(function(){
  $("#wait").css("display","none");
}); 
</script>
</head>
<body>
<form>
<input type="button" value="push" onclick="actionQueue.push(alertMeLater); return true;"/><br/>
<input type="button" value="pop" onclick="popAcionQueue(); return true;"/><br/>
<input type="button" id="button" value="button"/><br/>
<input type="text" id="data" name="data" value="maybe"/>
<input type="button" id="button" value="post over ajax" onclick="actionQueue.push(postData); return true;"/>
</form>
<form method="post" action="demo_proc.php">
<input type="text" name="suggest" value="ready"/>
<input type="submit" value="send"/>
</form>
<div id="wait" style="display:none;">WAIT</div>
<span id="content"/>
</body>
<html>

Az alábbi JavaScript az actionQueue tömbbe tárolja a funkció meghívási sorrendet:

actionQueue = []
counter = 0;
 
function popAcionQueue() {
	var action = actionQueue.shift();
	if ((action != null) && (action != undefined)) {
		action();
	}
}
 
function alertMeLater() {
	setTimeout(function() {alert("hello["+counter+"]")}, 1000);
	counter++;
}
 
function postData() {
	txt=$("#data").val();
	$.post("demo_proc.php",{suggest:txt}, function(data, status, xhr) {
		alert(data +","+ status);
		if( status == "success"){
			$("#content").html(data);
		}
	}, "text");
}

A szerver oldalon pedig két php generálja a választ:

demo_test.php


<?php
  $result = array("data" => "complett");
  echo $result["data"];
?>

demo_proc.php


<?php
  // var_dump($_POST, $_GET);
  $complete = $_POST['suggest'];
  $result = array("data" => "complete:" . $complete);
  echo $result["data"];
?>
CsatolmányMéret
Csomag ikon jquery_queue.zip72.75 KB