使用 javascript ajax 发送数组

Question

在 jquery 中我可以做到这一点

myAray=['abc', '123', 'more'];
$.post('myscript.php', {data:myAray}, function(data){
    alert(data);
});

如何使用纯 javascript 做同样的事情？我想使用 POST 方法将数组发送到我的 php 脚本。我找到了很多例子，但都是与 jquery 相关的。

提前致谢。

Answer 1

您必须使用XMLHttpRequest 并自己序列化数组：

function ajax(myArray) {

    var xmlHTTP;

    if (window.XMLHttpRequest) { 
        xmlHTTP = new XMLHttpRequest();
    } else { 
        xmlHTTP = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlHTTP.onreadystatechange = function () {
        if (xmlHTTP.readyState == 4 && xmlHTTP.status == 200) {
            // do whatever it is you want to do
        }
    }

    //Serialize the data
    var queryString = "";
    for(var i = 0; i < myArray.length; i++) {
        queryString += "myArray=" + myArray[i];

        //Append an & except after the last element
        if(i < myArray.length - 1) {
           queryString += "&";
        }
    }

    xmlHTTP.open("POST", "www.myurl.com", true);
    xmlHTTP.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
    xmlHTTP.send(queryString);
}

Answer 2

搞砸这个。

JS

var myarray = Array("test","boom","monkey");
send("test.php", myarray);  

function send(url, data)  
{
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function()
{
    if (xhr.readyState==4 && xhr.status==200)
    {
        console.log(xhr.responseText);
    }
}
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("data= " +data);
}

PHP

<?php 
$array = explode(',', $_POST["data"]);

for($i=0,$l=count($array); $i<$l; $i++) 
{
echo $array[$i].'<br>';
}
?>

Answer 3

function loadXMLDoc()
{
  var xmlhttp;
  if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
  }
  else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
   if (xmlhttp.readyState==4 && xmlhttp.status==200)
   {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
   }
  }
xmlhttp.open("POST","jsArrayPhp.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("test[]=Henry&test[]=Ford");
}

请注意： test[]=Henry&test[]=Ford"

其中 test 是您将在 php 中使用的数组的名称。

在php中

<?php
 print_r($_POST['test']);
?>

它会产生：Array ( [0] => Henry [1] => Ford )

Answer 4

类似这样的： post 是 POST 或 GET。 参数仅在 POST 中使用，否则在 GET 的 url 中包含您需要的内容。 success 和 error 都是函数的字符串名称，而不是函数本身，这就是为什么需要 executeFunctionByName，感谢 Jason Bunting： How to execute a JavaScript function when I have its name as a string

getRemoteData = function (url, post,params, success, error){

var http = false;
if (navigator.appName === "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
http = new XMLHttpRequest();
}

http.open(post, url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.onreadystatechange = function() {var resp; if (http.readyState === 4 && http.status == 200) {  resp=http.responseText; executeFunctionByName(success, window, resp); }else if(http.status == 400){resp=http.responseText; executeFunctionByName(error, window, resp);}};

http.send(params);
return false;
};


function executeFunctionByName(functionName, context, args) {
  args = Array.prototype.slice.call(arguments).splice(2);
  var namespaces = functionName.split(".");
  var func = namespaces.pop();
  for(var i = 0; i < namespaces.length; i++) {
    context = context[namespaces[i]];
  }
  return context[func].apply(this, args);
}