Home > php教程 > php手册 > 【入门】PHP 与 js的通信(via ajax,json)

【入门】PHP 与 js的通信(via ajax,json)

WBOY
Release: 2016-06-06 19:46:05
Original
1327 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)【入门】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 +')');


----------关于 json VS eval 请 --Google

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template