发送表单变量到多个php脚本使用ajax

Question

我一直想弄清楚如何使用ajax发送一个变量从表单到多个页面，并让每个页面脚本改变一个div内容。

我有的脚本正在工作，但它似乎是一个巨大的资源浪费，并且我确定有一个更简单的方法。

// Function to process the input form 
function ConsoleUpdateFunction(){ 
var ajaxRequest; // The variable that makes Ajax possible! 

try{ 
    // Opera 8.0+, Firefox, Safari 
    ajaxRequest = new XMLHttpRequest(); 
} catch (e){ 
    // Internet Explorer Browsers 
    try{ 
     ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
    } catch (e) { 
     try{ 
      ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
     } catch (e){ 
      // Something went wrong 
      alert("Your browser broke!"); 
      return false; 
     } 
    } 
} 
// Create a function that will receive data sent from the server 
ajaxRequest.onreadystatechange = function(){ 
    if(ajaxRequest.readyState == 4){ 
     $('#outputDiv').Typewriter({animDelay: 10,text: ajaxRequest.responseText, div: 'outputDiv' }); 

     //clear the form 
     $('#inputForm').each(function(){ this.reset();}); 

     //hide the input form till the out has finished showing 
     window.setTimeout(function(){ document.getElementById('inputForm').style.visibility="visible"; },ajaxRequest.responseText.length*10); 
    } 
} 
var age = document.getElementById('inputfield').value; 
var queryString = "?inputfield=" + age; 
ajaxRequest.open("GET", "consoleprocess.php" + queryString, true); 
ajaxRequest.send(null); 

//hide the input form 
document.getElementById('inputForm').style.visibility="hidden"; 
} 

// Function to process the input form 
function VisualInterfaceUpdateFunction(){ 
// Create a function that will receive data sent from the server 
ajaxRequest.onreadystatechange = function(){ 
    if(ajaxRequest.readyState == 4){ 
     var ajaxDisplay = document.getElementById('visualWindowContent'); 
     ajaxDisplay.innerHTML = ajaxRequest.responseText; 

     //clear the form 
     $('#inputForm').each(function(){ this.reset();}); 

     //hide the input form till the out has finished showing 
     window.setTimeout(function(){ document.getElementById('inputForm').style.visibility="visible"; },ajaxRequest.responseText.length*10); 
    } 
} 
var age = document.getElementById('inputfield').value; 
var queryString = "?inputfield=" + age; 
ajaxRequest.open("GET", "visualinterfaceprocess.php" + queryString, true); 
ajaxRequest.send(null); 

//hide the input form 
document.getElementById('inputForm').style.visibility="hidden"; 
} 

// Function to process the input form 
function CommandExecutionFunction(){ 
var ajaxRequest; // The variable that makes Ajax possible! 

try{ 
    // Opera 8.0+, Firefox, Safari 
    ajaxRequest = new XMLHttpRequest(); 
} catch (e){ 
    // Internet Explorer Browsers 
    try{ 
     ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
    } catch (e) { 
     try{ 
      ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
     } catch (e){ 
      // Something went wrong 
      alert("Your browser broke!"); 
      return false; 
     } 
    } 
} 
// Create a function that will receive data sent from the server 
ajaxRequest.onreadystatechange = function(){ 
    if(ajaxRequest.readyState == 4){ 
     eval(ajaxRequest.responseText); 
    } 
} 
var age = document.getElementById('inputfield').value; 
var queryString = "?inputfield=" + age; 
ajaxRequest.open("GET", "commandexecution.php" + queryString, true); 
ajaxRequest.send(null); 
} 

我基本上创建相同功能的3倍，而只是改变了页面发送变量和如何处理返回的内容。但我不知道如何让它在一个功能中工作。

任何帮助将不胜感激。编辑： 谢谢你的帮助所有。我相信我解决了这个问题，因为这工作正常。当然，如果你看到我做错了什么，让我知道！

$('#inputForm').submit(function() { 

$string ="inputfield=" + $('#inputfield').val(); 

$.ajax({ 
type: "GET", 
url: "consoleprocess.php", 
data: $string, 
success: function(data) { 
    $('#outputDiv').Typewriter({animDelay: 10,text: data, div: 'outputDiv' }); 
} 
}); 

$.ajax({ 
type: "GET", 
url: "visualinterfaceprocess.php", 
dataType: "html", 
data: $string, 
success: function(data) { 
    $('#visualWindowContent').replaceWith(data); 
} 
}); 

$.ajax({ 
type: "GET", 
url: "commandexecution.php", 
dataType: "script", 
data: $string, 
}); 

//clear the form 
$('#inputForm').each(function(){ this.reset();}); 
return false; 
}); 

Answer 1

首先我想你最好用jQuery $.ajax发送你的ajax请求。你是不是在你的代码确实是一致的：

var age = document.getElementById('inputfield').value; 

但后来你使用jQuery选择

$('#inputForm').each(function(){ this.reset();}); 

此外，我觉得你的问题更好的解决方案是使用Events。一个动作（点击，提交，...）触发一个名为MyEvent的事件。

然后你就可以有一个Event Listener将触发你的功能：ConsoleUpdateFunction(event, data)，VisualInterfaceUpdateFunction(event, data)，CommandExecutionFunction(event, data)

要继续，请使用jQuery $.trigger()，$.bind()或$.on()(documentation here) jQuery的$.ajax()(documentation here)和Events。

我希望这会帮助你。它会简化你的很多代码。

Answer 2

首先尝试使用Prototype或jQuery来简化您的代码。 您可以尝试将您的请求发送到单个脚本而不是三个，并将数据从PHP返回为JSON。请参阅php json_encode（）和http://prototypejs.org/learn/json