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...";
        }

之前我使用 $.getJSON 进行 GET 操作。现在我想编写一个可以完成 GET 和 POST 请求的函数。函数将像这样=> makeRequest(type,params,URL) ，type 用于 POST和获取。数据返回成功与否都会有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 文件：

获取.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 回答