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 $.ajax() (documentation here)和Events，使用jQuery $.trigger()，$.bind()或$.on() (documentation here)。< / p>

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

Answer 2

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

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

2 个答案: