【入门】PHP 与 js的通信（via ajax,json）-php手册-php.cn

【入门】PHP 与 js的通信（via ajax,json）

WBOY

Release： 2016-06-06 19:46:05

Original

1310 people have browsed it

JavaScript端：注意：一定要设置xmlHttp.setRequestHeader，否则传往PHP的参数会变成null（line 38）亮点在line 31！代码 1 script type ="text/javascript" 2 function GetJson() { 3 var xmlHttp; 4 try { 5 // Firefox, Opera 8.0+, Safari 6 xmlHttp

JavaScript端：

注意：一定要设置xmlHttp.setRequestHeader，否则传往PHP的参数会变成null（line 38）

亮点在line 31！

【入门】PHP 与 js的通信（via ajax,json）代码

<p><span> 1</span> <span><span>script </span><span>type</span><span>="text/javascript"</span><span>></span><span><br></span><span> 2</span> <span>function</span><span> GetJson() {<br></span><span> 3</span> <span>var</span><span> xmlHttp;<br></span><span> 4</span> <span>try</span><span> {<br></span><span> 5</span> <span>//</span><span> Firefox, Opera 8.0+, Safari</span><span><br></span><span> 6</span> <span> </span><span>                xmlHttp </span><span>=</span><span>new</span><span> XMLHttpRequest();<br></span><span> 7</span> <span>            }<br></span><span> 8</span> <span>catch</span><span> (e) {<br></span><span> 9</span> <span>//</span><span> Internet Explorer</span><span><br></span><span>10</span> <span> </span><span>try</span><span> {<br></span><span>11</span> <span>                    xmlHttp </span><span>=</span><span>new</span><span> ActiveXObject(</span><span>"</span><span>Msxml2.XMLHTTP</span><span>"</span><span>);<br></span><span>12</span> <span>                }<br></span><span>13</span> <span>catch</span><span> (e) {<br></span><span>14</span> <span><br></span><span>15</span> <span>try</span><span> {<br></span><span>16</span> <span>                        xmlHttp </span><span>=</span><span>new</span><span> ActiveXObject(</span><span>"</span><span>Microsoft.XMLHTTP</span><span>"</span><span>);<br></span><span>17</span> <span>                    }<br></span><span>18</span> <span>catch</span><span> (e) {<br></span><span>19</span> <span>                        alert(</span><span>"</span><span>您的浏览器不支持AJAX！</span><span>"</span><span>);<br></span><span>20</span> <span>return</span><span>false</span><span>;<br></span><span>21</span> <span>                    }<br></span><span>22</span> <span>                }<br></span><span>23</span> <span>            }<br></span><span>24</span> <span><br></span><span>25</span> <span>            xmlHttp.onreadystatechange </span><span>=</span><span>function</span><span>() {<br></span><span>26</span> <span>if</span><span> (xmlHttp.readyState </span><span>==</span><span>4</span><span>) {<br></span><span>27</span> <span>//</span><span>alert(xmlHttp.responseText);</span><span><br></span><span>28</span> <span>var</span><span> str </span><span>=</span><span> xmlHttp.responseText;<br></span><span>29</span> <span>                    document.getElementById(</span><span>'</span><span>show</span><span>'</span><span>).innerHTML </span><span>+=</span><span>str;<br></span><span>30</span> <span>//</span><span>alert(str);</span><span><br></span><span>31</span> <span>var</span><span> obj </span><span>=</span><span> eval(</span><span>'</span><span>(</span><span>'</span><span>+</span><span> xmlHttp.responseText </span><span>+</span><span>'</span><span>)</span><span>'</span><span>);<br></span><span>32</span> <span>//</span><span>var obj = eval(({"id":"123","name":"elar","age":"21"}));</span><span><br></span><span>33</span> <span>                    alert(obj.name);<br></span><span>34</span> <span>                }<br></span><span>35</span> <span>            }<br></span><span>36</span> <span>var</span><span> data </span><span>=</span><span>"</span><span>id=123</span><span>"</span><span>;<br></span><span>37</span> <span>            xmlHttp.open(</span><span>"</span><span>POST</span><span>"</span><span>, </span><span>"</span><span>testJson.php</span><span>"</span><span>, </span><span>true</span><span>);<br></span><span>38</span> <span>            xmlHttp.setRequestHeader(</span><span>"</span><span>Content-Type</span><span>"</span><span>,</span><span>"</span><span>application/x-www-form-urlencoded</span><span>"</span><span>); <br></span><span>39</span> <span>            xmlHttp.send(</span><span>"</span><span>id=123</span><span>"</span><span>);<br></span><span>40</span> <span>        }<br></span><span>41</span> <span></span><span>script</span><span>></span><span><br></span><span>42</span> <span><span>input </span><span>type</span><span>="button"</span><span> onclick</span><span>="GetJson()"</span><span> value</span><span>="按我！"</span><span>/></span><span><br></span><span>43</span> <span><span>hr </span><span>/></span><span><br></span><span>44</span> <span><span>div </span><span>id</span><span>="show"</span><span>></span><span>div</span><span>></span></span></span></span></span></p>

Copy after login

PHP端【testJson.php】：

亮点在line 6

<p><span>1</span> <span></span><span>php <br></span><span>2</span> <span> </span><span>$res</span><span>[</span><span>'</span><span>id</span><span>'</span><span>] </span><span>=</span><span>$_POST</span><span>[</span><span>'</span><span>id</span><span>'</span><span>];<br></span><span>3</span> <span>$res</span><span>[</span><span>'</span><span>name</span><span>'</span><span>] </span><span>=</span><span>"</span><span>elar</span><span>"</span><span>;<br></span><span>4</span> <span>$res</span><span>[</span><span>'</span><span>age</span><span>'</span><span>] </span><span>=</span><span>"</span><span>21</span><span>"</span><span>;<br></span><span>5</span> <span>$response</span><span>=</span><span>"</span><span>hello this is response</span><span>"</span><span>.</span><span>$_POST</span><span>[</span><span>'</span><span>id</span><span>'</span><span>];<br></span><span>6</span> <span>echo</span><span> json_encode(</span><span>$res</span><span>);<br></span><span>7</span> <span>?></span></p>

Copy after login

总结：

js要往PHP端送数据，用的是xmlHttp.send("id=123");

PHP给js送数据，用的是echo json_encode($res);（要注意变量$res的构造应符合JSON的规范）

js要解析PHP送来的JSON格式的数据，用var obj = eval('('+ xmlHttp.responseText +')');