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回作成しています。しかし、それを 1 つの関数で動作させる方法がわかりません。

どんな助けでも大歓迎です。

編集：助けてくれてありがとう。これでうまくいくので、問題は解決したと思います。もちろん、私が何か間違ったことをしているのを見たら、私に知らせてください！

$('#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

$.ajaxまず、jQueryを使用して 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 を使用してコードを簡素化してみてください。リクエストを 3 つではなく 1 つのスクリプトに送信して、PHP からのデータを JSON として返すことができます。php json_encode() およびhttp://prototypejs.org/learn/jsonを参照してください

于 2013-02-16T00:42:17.123 に答える