jQuery.post（）动态生成的数据到服务器返回空响应

Question

I'm generating a series of variables in a loop (using JS), and I'm assigning them an .id and a .name based on the current index. At each loop I'm sending a request to the server using jQuery.post() method, but the returning response is just an empty variable. Here's the code:

JavaScript

for ( var index = 0; index < 5; index++ ) {

    var myVar = document.createElement('p');

    myVar.id = 'myVarID' + index;

    myVar.name = 'myVarName' + index;


    //Send request to server
    $(document).ready(function(){

        var data = {};

        var i = 'ind';
        var id = myVar.id;
        var name = myVar.name;

        data[id] = name;
        data[i] = index;

        $.post("script.php", data, function(data){

            console.log("Server response:", data);

        });

    });

}

PHP

<?php

  $index = $_POST['ind'];

  $myVar = $_POST['myVarID'.$index];

  echo $myVar;

?>

Response: Server response: ''

If I instead set a static index in JS code, getting rid of the loop, so for example:

var index = 0;

I get the expected result: Server response: myVarName0

Why is this happening? And how can I solve it?

Answer 1

Assuming the php file is in order. I use this:

function doThing(url) {
getRequest(
    url,
    doMe,
    null
    );
    }
     function doMe(responseText) {
    var container = document.getElementById('hahaha');
    container.innerHTML = responseText;
  }
function getRequest(url, success, error) {
var req = false;
try{
    // most browsers
    req = new XMLHttpRequest();
} catch (e){
    // IE
    try{
        req = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        // try an older version
        try{
            req = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e){
            return false;
        }
    }
}
if (!req) return false;
if (typeof success != 'function') success = function () {};
if (typeof error!= 'function') error = function () {};
req.onreadystatechange = function(){
    if(req .readyState == 4){
        return req.status === 200 ? 
            success(req.responseText) : error(req.status)
        ;
    }
}
var thing = "script.php?" + url;
req.open("GET", thing, true);
req.send(null);
return req;
  }

then use it like this:

doThing("myVarID="+myVar.id+"&i="+index);

also, you will have to change your PHP to something like this:

<?php
   $index = $_GET['ind'];

  $myVar = $_GET['myVarID'.$index];

   echo $myVar;

 ?>

Obviously this code needs to be edited to suit your own needs

the function doMe is what to do when the webpage responds, in that example I changed the element with the id hahaha to the response text.

This won't win you any prizes but it'll get the job done.

Answer 2

Solution

It is working fine removing:

$(document).ready()

Working code

for ( var index = 0; index < 5; index++ ) {

    var myVar = document.createElement('p');

    myVar.id = 'myVarID' + index;

    myVar.name = 'myVarName' + index;


    //Send request to server

    var data = {};

    var i = 'ind';
    var id = myVar.id;
    var name = myVar.name;

    data[id] = name;
    data[i] = index;

    $.post("script.php", data, function(data){

        console.log("Server response:", data);

    });

}