0

ajax POSTを作るためのXMLhttpRequest関数を書きました。新しいジョブを追加すると、この関数が呼び出され、追加されたジョブもHTMLに表示されます。コードは以下のとおりです。

function req_add()
        {
            var hr = new XMLHttpRequest();
            var url = "To-Do.php";
            var content = document.getElementById("content").value;
            var vars = "content=" + content;

            hr.open("POST", url, true);
            hr.setRequestHeader("Content-type","application/x-www-form-
urlencoded");
            hr.onreadystatechange=function()
            {
                if(hr.readyState == 4 && hr.status == 200)
                {
                    var return_data = hr.responseText;
                    document.getElementById("result").innerHTML               
= return_data;
                }
            }
            hr.send(vars);
            document.getElementById("result").innerHTML =   

"Processing...";
        }

以前は GET 操作に $.getJSON を使用していました。今度は GET と POST の両方のリクエストを実行できる関数を書きたいと思います。関数は次のようになります => makeRequest(type,params,URL) ,type は POST 用ですとGET。データが正常に返されたかどうかに関係なく、onsuccess 関数があります。また、共通関数を作成するときに、hr.send() を使用しますか? ありがとう。

4

1 に答える 1

-1

それは確かに可能であり、グーグルで検索すると多くの情報があります。XMLHttpRequest オブジェクトに関する情報と、それが GET/POST 要求をサポートする方法、およびパラメーターを渡す方法に関する情報を検索します。

はい: 共通の XMLHttpRequest オブジェクト (hr 変数) を使用し、さまざまな種類のリクエストに対して条件付き/スイッチを使用できます。エラーとイベントを正しく処理するようにしてください。現在、多くのことが欠けています。

ここでいくつかの情報を見つけることができます: http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp

以下の編集、これは私のローカルサーバーで動作しますが、js で行うべき作業がたくさんあります。たとえば、同時リクエストの整合性をテストする必要があります...

編集された HTML:

<html>
    <head>
        <title>To-Do</title>
        <meta name="description" content="To-Do" charset="utf-8">
        </meta>
        <script language="javascript" type="text/javascript">
            function mr(type, URL) {

                var hr = new XMLHttpRequest();

                //SET UP VARS CORRECTLY FOR GET/POST
                var content = document.getElementById("content").value;
                var vars = "content=" + content;

                if (type == 'GET')
                    URL = URL + '?' + vars;

                //SET EVENTHANDLERS (THERE ARE ALOT MORE)
                hr.onreadystatechange = function() {
                    if (hr.readyState == 4 && hr.status == 200) {
                        var return_data = hr.responseText;
                        document.getElementById("result").innerHTML = return_data;
                    }

                }
                //OPEN THE REQUEST
                hr.open(type, URL, true);

                //SET HEADERS
                hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

                switch(type) {
                    case 'GET':
                        hr.send();
                        break;
                    case 'POST':
                        hr.send(vars);
                        break;
                }

                document.getElementById("result").innerHTML = "Processing...";

            }
        </script>
        <style type="text/css">
            button {
                cursor: pointer
            }
            div {
                color: #666;
                font: normal 13px "Trebuchet MS";
                width: 350px;
                padding: 10px
            }
        </style>
    </head>

    <body>
        <div>
            Add Item:
            <input type="text" name="name" id="content">
            <br>
            <button onclick="javascript:mr('POST','post.php');" type="button" id="btn1">
                Submit
            </button>
            <br>
            <button onclick="javascript:mr('GET','get.php');" type="button" id="btn2" >
                List Jobs
            </button>
            <div id="result"></div>
        </div>
    </body>
</html>

以下を返す PHP ファイル:

get.php

<?php echo "GET\n"; if(isset($_GET)) print_r($_GET); ?>

post.php

<?php echo "POST\n"; if(isset($_POST)) print_r($_POST); ?>
于 2013-03-13T14:31:56.243 に答える