Using array result in html from php page
<p>I have the following code in my html page:</p>

<pre><code>&lt;head&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;

&lt;script&gt;
$(document).ready(function(){
    $("#button0").click(function(){
        $responses.get("*url here*",$("#form0").serialize());
        $("#div0").load($responses[key1]);
    });
});
&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div id="div0"&gt;One response will appear here&lt;/div&gt;
&lt;form id="form0"&gt;
    &lt;input type="text" name = "query" /&gt;
    &lt;button type="button" id="button0"&gt; enter your question here &lt;/button&gt;
&lt;/form&gt;
&lt;/body&gt;
</code></pre>

<p>and then in my php page I have:</p>

<pre><code>&lt;?php
$query = $_GET['query'];
$array = array(
        key1 =&gt; $query,
        key2 =&gt; "hello"
);
echo $array;
?&gt;
</code></pre>

<p>First of all, the php page simply returns "Array". Is this simply the name of the array, or will it be usable in the html page to get the values out of it?</p>

<p>Secondly, when I do "$responses.get..." I am hoping that it will create a variable "reponses," then set it to be whatever the php sends out (currently, key1 of the array is set to be whatever is inputted to the form, but I will update this later of course). It should then load what is in key1 of the array into div0. Not only is it not setting $responses as anything, but I am confident that even if it did, div0 would not be set as intended either. How do I solve this?</p>

<p>I was originally thinking I could do it more directly with:</p>

<pre><code>$("#div0").load("*url here*",$("#form0").serialize())[key1];
</code></pre>

<p>but this didn't work so I decided to split the problem up, and as you can see had no luck there either.</p>

<p>Thanks in advance for your help.</p>

<p>____UPDATE1____</p>

<p>I have changed the code in the php page to this:</p>

<pre><code>echo json_encode($array);
</code></pre>

<p>and the code in the html page to this:</p>

<pre><code>$.get("url/here",$("#form0").serialize(), function(response){
        $.each(response, function(index){
            $("#div0").load(response);
        });
    });
</code></pre>

<p>which throws the following error:
Uncaught TypeError: Cannot use 'in' operator to search for 'length' in {"key1":"","key2":"hello"}</p>

<p>alternatively, writing</p>

<pre><code>$(response).each(function(index){
            $("#div0").load(response);
        });
</code></pre>

<p>throws the error:
Uncaught Error: Syntax error, unrecognized expression: {"key1":"","key2":"hello"}</p>

<p>But this is progress! Thank you all so far for your helpful answers.</p>

<p>____UPDATE2____</p>

<p>I have decided to do this instead of iterating through the array:</p>

<pre><code>$.get("url/here",$("#form0").serialize(), function(response){   
        $("#div0").load(response.key1);
        $div0answer = response.key2;
        $("#div1").load(response.key3);
        $div1answer = response.key4;                
    });
</code></pre>

<p>where response will be something along the lines of {"key1":forminputhere,"key2":"hello","key3":forminputhere,"key4":"hello"}</p>

<p>However, response.key1, response.key2 etc are all "undefined". So this is clearly not how to extract elements from an array in html. response[0] gives "{" too, which is not ideal. Similar questions online all seem to involve iterating with each (as I did after update1, not that that was successful either!) - is what i'm trying to do even possible?</p>

<p>____UPDATE3____</p>

<p>Doing this:</p>

<pre><code>$.get("http://community.dur.ac.uk/matthew.poyser/assessment.php",$("#form0").serialize(), function(response){
        $.each(JSON.parse(response), function(index){
            $array.push(index)                  
        });
    });
</code></pre>

<p>just makes the $array = key1,key2,key3,key4, and completely ignores all values of the array.</p>