1

私は本を​​購入し、AJAX の使用方法を学び始めました。誰かが私に 1 つの div に値を入力し、適切な div で情報を受け取るために彼女がくれた Web サイトに対して AJAX get 要求を実行する必要がある練習課題を与えてくれました。この本に従って、AJAX get リクエストを間違って実行している可能性があります。誰かが私を正しい方向に向けることができれば、私はそれを感謝します. これは学校向けではありません。Web スクリプト言語の経験はありませんが、学習したいと思っています。私のJavaScriptを見てください。多分あなたは私を助けることができます. 受信した情報をどのように表示するかはまだわかりませんが、送信ボタンを押したときに別のページをロードしたくないことは確かです!

また、私は約 4 年間、C++ でのプログラミングからコードを並べる奇妙な方法を持っています。時間をかけて開発したもので、わかりにくい場合は申し訳ありません。もしそうなら、適切な方法でフォーマットして再投稿できます。また、POST メソッドではなく、AJAX GET メソッドの使用方法を学ぼうとしています。そして、JSON で情報を返したいと思います。

<html>

    <head>

            <style type="text/css">
                    #header {
                            text-align: left;
                    }
                    #wrapper {

                            margin:bottom;
                            width:100%;

                    }

                    #sub-left {
                            float:left;
                width:225px;
            height:215px;
            border:1px solid black; 
            position: relative;
            text-align: left;
                    }
                    #sub-right {
            padding-left: 52px;
                            float:left;
            width:60%;
            height:45%;
            border:1px solid black; 
            position: relative;
            text-align: left;

                    }
        #sub-leftmost {

                            float:left;
            width:10%;
            height:100%;
            position: relative;
            text-align: left;
                    }

            </style>


    <script type=”text/javascript”&gt;
    // function create GetXmlHttpObject
    function GetXmlHttpObject(){
    if (window.XMLHttpRequest){
    // code for IE7+, Firefox, Chrome, Opera, Safari
    return new XMLHttpRequest();
    }
    if (window.ActiveXObject){
    // code for IE6, IE5
    return new ActiveXObject(“Microsoft.XMLHTTP”);
    }
    return null;
    }

    function submitFormWithAjax(){
    var myAjaxGetrequest = new GetXmlHttpObject();

    var t2lName=document.testForm.namebox.value;
    var t2lEmail=document.testForm.ebox.value;
    var t2lAddress=document.testForm.addbox.value;
    var t2lPhone=document.testForm.phnbox.value;

    var parameters = "name=" + encodeURIComponent(t2lName) 
           + "&email=" +encodeURIComponent(t2lEmail)
           + "&address=" + encodeURIComponent(t2lAddress)
           + "&phone=" +encodeURIComponent(t2lPhone);

    myAjaxGetrequest.open("GET", "websitetosendandgetfrom.com" + parameters, true);
    myAjaxGetrequest.send( );

    if (myAjaxGetrequest.readyState==4){
    if(myAjaxGetrequest.status==200 || window.location.href.indexOf("http")==-1){
    document.getElementById("result").innerHTML=myAjaxGetrequest.responseText
    document.getElementById(“testForm”).style.display = “none”;
    }
    else    {
    document.getElementById(“testForm”).innerHTML=”An error has occured making the request”;
    }
    }
    }
    }   



</script>
    </head>

    <body>

<div id="wrapper">

    <div id="sub-leftmost">


    </div>
</div>


    <div id="wrapper">
    <div id="header"><h1>Quiz</h1></div>
    <div id="sub-left">
<form name = 'testForm'>
<FONT COLOR="CC3300",font size="5">&nbsp;&nbsp;&nbsp;<b>User Info</b></FONT>
<br />

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Full Name: <br /><center><input type="text"  size="25" id =         "namebox" /></center>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Email Address: <br /><center><input type="text"  size="25" id = "ebox" /></center>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Address: <br /><center><input type="text"  size="25" id = "addbox" /></center>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Phone Number: <br /><center><input type="text"  size="25" id = "phnbox" />
<a href=”#” onclick=”submitFormWithAjax();”&gt;Finished!</a>
</form>

    </div>
    </div>
<div id="wrapper">
    <div id="sub-right">

    </div>
</div>


    </body>

    </html>
4

1 に答える 1

1

リクエストは非同期で、ステータスが変化したときにのみコールバック関数を呼び出します。

基本的に、リクエストのステータス変更に依存するすべてのコードは、AJAX リクエストのコールバックにラップする必要があります。

myAjaxGetrequest.send();

myAjaxGetrequest.onreadystatechange = function() {
  if (myAjaxGetrequest.readyState==4){
    ...
于 2012-07-11T23:58:18.977 に答える