1

我一直在试图弄清楚如何使用 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;
});
4

2 回答 2

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() （此处的文档）和Events使用 jQuery$.trigger()或$.bind()（$.on() 此处的文档）。

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

于 2013-02-16T00:30:23.757 回答
0

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

于 2013-02-16T00:42:17.123 回答