Home >Backend Development >PHP Tutorial >PHP parameter passing method 1--ajax, php1--ajax_PHP tutorial
2. Ajax side: How to asynchronously monitor the status of the server side? Monitor the readystate attribute through onreadystatechange
request.onreadystatechange = function() {
<span>if (request.readyState===4) {</span>
open()
send()
But please note that this is different from the status of request
For example, readystate=4 but status=404 means that the response is completed but the content of the response is that the file was not found
So the general approach is to return the content when ==200, and otherwise just display the sound error.
Note that in the post request, you must set the url to encode and
url decoding, otherwise the result will not be given correctly
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
But there is a problem with url decoding. Since the plus sign will be automatically decoded into a space when urlencoded, & will be decoded into a variable connector, so if these characters appear, they must be transcoded(I encountered this problem when making the URL for uploading images to canvas)
Pic = Pic.replace(/ /g, "+");
Pic = Pic.replace(/&/g, "&");
3. The server returns to the interface passing ajax through echo.
(Tip: zendstudio’s built-in browser will always display the last page for ajax pages, so run it in an external browser instead.
Setting in preference-general-web browser. )
If you only return a simple row, you don't need Jason. Jason can more conveniently return data with different key values.
<span> 1</span> <span><!</span><span>DOCTYPE HTML</span><span>></span> <span> 2</span> <span><</span><span>html</span><span>></span> <span> 3</span> <span><</span><span>head</span><span>></span> <span> 4</span> <span><</span><span>meta </span><span>http-equiv</span><span>="Content-Type"</span><span> content</span><span>="text/html; charset=utf-8"</span><span>></span> <span> 5</span> <span><</span><span>title</span><span>></span>Demo<span></</span><span>title</span><span>></span> <span> 6</span> <span><</span><span>style</span><span>></span> <span> 7</span> <span>body, input, select, button, h1 </span><span>{</span> <span> 8</span> <span> font-size</span><span>:</span><span> 28px</span><span>;</span> <span> 9</span> <span> line-height</span><span>:</span><span>1.7</span><span>;</span> <span>10</span> <span>}</span> <span>11</span> <span></</span><span>style</span><span>></span> <span>12</span> <span></</span><span>head</span><span>></span> <span>13</span> <span>14</span> <span><</span><span>body</span><span>></span> <span>15</span> <span>16</span> <span><</span><span>h1</span><span>></span>员工查询<span></</span><span>h1</span><span>></span> <span>17</span> <span>18</span> <span><</span><span>label</span><span>></span>请输入员工编号:<span></</span><span>label</span><span>></span> <span>19</span> <span><</span><span>input </span><span>type</span><span>="text"</span><span> id</span><span>="keyword"</span> <span>/></span> <span>20</span> <span><</span><span>button </span><span>id</span><span>="search"</span><span>></span>查询<span></</span><span>button</span><span>></span> <span>21</span> <span><</span><span>p </span><span>id</span><span>="searchResult"</span><span>></</span><span>p</span><span>></span> <span>22</span> <span>23</span> <span><</span><span>h1</span><span>></span>员工新建<span></</span><span>h1</span><span>></span> <span>24</span> <span><</span><span>label</span><span>></span>请输入员工姓名:<span></</span><span>label</span><span>></span> <span>25</span> <span><</span><span>input </span><span>type</span><span>="text"</span><span> id</span><span>="staffName"</span> <span>/><</span><span>br</span><span>></span> <span>26</span> <span><</span><span>label</span><span>></span>请输入员工编号:<span></</span><span>label</span><span>></span> <span>27</span> <span><</span><span>input </span><span>type</span><span>="text"</span><span> id</span><span>="staffNumber"</span> <span>/><</span><span>br</span><span>></span> <span>28</span> <span><</span><span>label</span><span>></span>请选择员工性别:<span></</span><span>label</span><span>></span> <span>29</span> <span><</span><span>select </span><span>id</span><span>="staffSex"</span><span>></span> <span>30</span> <span><</span><span>option</span><span>></span>女<span></</span><span>option</span><span>></span> <span>31</span> <span><</span><span>option</span><span>></span>男<span></</span><span>option</span><span>></span> <span>32</span> <span></</span><span>select</span><span>><</span><span>br</span><span>></span> <span>33</span> <span><</span><span>label</span><span>></span>请输入员工职位:<span></</span><span>label</span><span>></span> <span>34</span> <span><</span><span>input </span><span>type</span><span>="text"</span><span> id</span><span>="staffJob"</span> <span>/><</span><span>br</span><span>></span> <span>35</span> <span><</span><span>button </span><span>id</span><span>="save"</span><span>></span>保存<span></</span><span>button</span><span>></span> <span>36</span> <span><</span><span>p </span><span>id</span><span>="createResult"</span><span>></</span><span>p</span><span>></span> <span>37</span> <span>38</span> <span><</span><span>script</span><span>></span> <span>39</span> <span>document.getElementById(</span><span>"</span><span>search</span><span>"</span><span>).onclick </span><span>=</span> <span>function</span><span>() { </span><span>40</span> <span>var</span><span> request </span><span>=</span> <span>new</span><span> XMLHttpRequest(); </span><span>41</span> <span> request.open(</span><span>"</span><span>GET</span><span>"</span><span>, </span><span>"</span><span>serverjson.php?number=</span><span>"</span> <span>+</span><span> document.getElementById(</span><span>"</span><span>keyword</span><span>"</span><span>).value); </span><span>42</span> <span> request.send(); </span><span>43</span> <span> request.onreadystatechange </span><span>=</span> <span>function</span><span>() { </span><span>44</span> <span>if</span><span> (request.readyState</span><span>===</span><span>4</span><span>) { </span><span>45</span> <span>if</span><span> (request.status</span><span>===</span><span>200</span><span>) { </span><span>//</span><span>不同的status在百度可以找到</span> <span>46</span> <span>var</span><span> data </span><span>=</span><span> JSON.parse(request.responseText);</span><span>//</span><span>json.parse!</span> <span>47</span> <span>if</span><span> (data.success) { </span><span>//</span><span>注意seccess也返回jason的一个键值</span> <span>48</span> <span> document.getElementById(</span><span>"</span><span>searchResult</span><span>"</span><span>).innerHTML </span><span>=</span><span> data.msg;</span><span>//</span><span>json中的msg键值</span> <span>49</span> <span> } </span><span>else</span><span> { </span><span>50</span> <span> document.getElementById(</span><span>"</span><span>searchResult</span><span>"</span><span>).innerHTML </span><span>=</span> <span>"</span><span>出现错误:</span><span>"</span> <span>+</span><span> data.msg; </span><span>51</span> <span> } </span><span>52</span> <span> } </span><span>else</span><span> {<br /></span><span>53</span> <span> alert(</span><span>"</span><span>发生错误:</span><span>"</span> <span>+</span><span> request.status); </span><span>54</span> <span> } </span><span>55</span> <span> } </span><span>56</span> <span> } </span><span>57</span> <span>} </span><span>58</span> <span>59</span> <span>document.getElementById(</span><span>"</span><span>save</span><span>"</span><span>).onclick </span><span>=</span> <span>function</span><span>() { </span><span>60</span> <span>var</span><span> request </span><span>=</span> <span>new</span><span> XMLHttpRequest(); </span><span>61</span> <span> request.open(</span><span>"</span><span>POST</span><span>"</span><span>, </span><span>"</span><span>serverjson.php</span><span>"</span><span>); </span><span>62</span> <span>var</span><span> data </span><span>=</span> <span>"</span><span>name=</span><span>"</span> <span>+</span><span> document.getElementById(</span><span>"</span><span>staffName</span><span>"</span><span>).value </span><span>63</span> <span>+</span> <span>"</span><span>&number=</span><span>"</span> <span>+</span><span> document.getElementById(</span><span>"</span><span>staffNumber</span><span>"</span><span>).value </span><span>64</span> <span>+</span> <span>"</span><span>&sex=</span><span>"</span> <span>+</span><span> document.getElementById(</span><span>"</span><span>staffSex</span><span>"</span><span>).value </span><span>65</span> <span>+</span> <span>"</span><span>&job=</span><span>"</span> <span>+</span><span> document.getElementById(</span><span>"</span><span>staffJob</span><span>"</span><span>).value; </span><span>66</span> <strong><span> request.setRequestHeader(</span><span>"</span><span>Content-type</span><span>"</span><span>,</span><span>"</span><span>application/x-www-form-urlencoded</span><span>"</span><span>); </span></strong><span>67</span> <span> request.send(data); </span><span>68</span> <span> request.onreadystatechange </span><span>=</span> <span>function</span><span>() { </span><span>69</span> <span>if</span><span> (request.readyState</span><span>===</span><span>4</span><span>) { </span><span>70</span> <span>if</span><span> (request.status</span><span>===</span><span>200</span><span>) { </span><span>71</span> <span>var</span><span> data </span><span>=</span><span> JSON.parse(request.responseText); </span><span>72</span> <span>if</span><span> (data.success) { </span><span>73</span> <span> document.getElementById(</span><span>"</span><span>createResult</span><span>"</span><span>).innerHTML </span><span>=</span><span> data.msg; </span><span>74</span> <span> } </span><span>else</span><span> { </span><span>75</span> <span> document.getElementById(</span><span>"</span><span>createResult</span><span>"</span><span>).innerHTML </span><span>=</span> <span>"</span><span>出现错误:</span><span>"</span> <span>+</span><span> data.msg; </span><span>76</span> <span> } </span><span>77</span> <span> } </span><span>else</span><span> { </span><span>78</span> <span> alert(</span><span>"</span><span>发生错误:</span><span>"</span> <span>+</span><span> request.status); </span><span>79</span> <span> } </span><span>80</span> <span> } </span><span>81</span> <span> } </span><span>82</span> <span>} </span><span>83</span> <span></</span><span>script</span><span>></span> <span>84</span> <span></</span><span>body</span><span>></span> <span>85</span> <span></</span><span>html</span><span>></span>3.
Response server code serverjason.php
<?<span>php </span><span>//</span><span>设置页面内容是html编码格式是utf-8</span> <span>header</span>("Content-Type: text/plain;charset=utf-8"<span>); </span><span>//</span><span>header("Content-Type: application/json;charset=utf-8"); //header("Content-Type: text/xml;charset=utf-8"); //header("Content-Type: text/html;charset=utf-8"); //header("Content-Type: application/javascript;charset=utf-8"); //定义一个多维数组,包含员工的信息,每条员工信息为一个数组</span> <span>$staff</span> = <span>array</span><span> ( </span><span>array</span>("name" => "洪七", "number" => "101", "sex" => "男", "job" => "总经理"), <span>array</span>("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "开发工程师"), <span>array</span>("name" => "黄蓉", "number" => "103", "sex" => "女", "job" => "产品经理"<span>) ); </span><span>//</span><span>判断如果是get请求,则进行搜索;如果是POST请求,则进行新建 //$_SERVER是一个超全局变量,在一个脚本的全部作用域中都可用,不用使用global关键字 //$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法</span> <span>if</span> (<span>$_SERVER</span>["REQUEST_METHOD"] == "GET"<span>) { search(); } </span><span>elseif</span> (<span>$_SERVER</span>["REQUEST_METHOD"] == "POST"<span>){ create(); } </span><span>//</span><span>通过员工编号搜索员工</span> <span>function</span><span> search(){ </span><span>//</span><span>检查是否有员工编号的参数 //isset检测变量是否设置;empty判断值为否为空 //超全局变量 $_GET 和 $_POST 用于收集表单数据</span> <span>if</span> (!<span>isset</span>(<span>$_GET</span>["number"]) || <span>empty</span>(<span>$_GET</span>["number"<span>])) { </span><span>echo</span> '{"success":false,"msg":"参数错误"}';<span>//</span><span>jason格式</span> <span>return</span><span>; } </span><span>//</span><span>函数之外声明的变量拥有 Global 作用域,只能在函数以外进行访问。 //global 关键词用于访问函数内的全局变量</span> <span>global</span> <span>$staff</span><span>; </span><span>//</span><span>获取number参数</span> <span>$number</span> = <span>$_GET</span>["number"<span>]; </span><span>$result</span> = '{"success":false,"msg":"没有找到员工。"}'<span>; </span><span>//</span><span>遍历$staff多维数组,查找key值为number的员工是否存在,如果存在,则修改返回结果</span> <span>foreach</span> (<span>$staff</span> <span>as</span> <span>$value</span><span>) { </span><span>if</span> (<span>$value</span>["number"] == <span>$number</span><span>) { </span><span>$result</span> = '{"success":true,"msg":"找到员工:员工编号:' . <span>$value</span>["number"] . ',员工姓名:' . <span>$value</span>["name"] . ',员工性别:' . <span>$value</span>["sex"] . ',员工职位:' . <span>$value</span>["job"] . '"}';<span>//</span><span>jason格式</span> <span>break</span><span>; } } </span><span>echo</span> <span>$result</span><span>; } </span><span>//</span><span>创建员工</span> <span>function</span><span> create(){ </span><span>//</span><span>判断信息是否填写完全</span> <span>if</span> (!<span>isset</span>(<span>$_POST</span>["name"]) || <span>empty</span>(<span>$_POST</span>["name"<span>]) </span>|| !<span>isset</span>(<span>$_POST</span>["number"]) || <span>empty</span>(<span>$_POST</span>["number"<span>]) </span>|| !<span>isset</span>(<span>$_POST</span>["sex"]) || <span>empty</span>(<span>$_POST</span>["sex"<span>]) </span>|| !<span>isset</span>(<span>$_POST</span>["job"]) || <span>empty</span>(<span>$_POST</span>["job"<span>])) { </span><span>echo</span> '{"success":false,"msg":"参数错误,员工信息填写不全"}'<span>; </span><span>return</span><span>; } </span><span>//</span><span>TODO: 获取POST表单数据并保存到数据库 //提示保存成功</span> <span>echo</span> '{"success":true,"msg":"员工:' . <span>$_POST</span>["name"] . ' 信息保存成功!"}'<span>; } </span>?>4. The following is the form of jQuery
<span><!</span><span>DOCTYPE HTML</span><span>></span> <span><</span><span>html</span><span>></span> <span><</span><span>head</span><span>></span> <span><</span><span>meta </span><span>http-equiv</span><span>="Content-Type"</span><span> content</span><span>="text/html; charset=utf-8"</span><span>></span> <span><</span><span>title</span><span>></span>Demo<span></</span><span>title</span><span>></span> <span><</span><span>style</span><span>></span><span> body, input, select, button, h1 </span><span>{</span><span> font-size</span><span>:</span><span> 28px</span><span>;</span><span> line-height</span><span>:</span><span>1.7</span><span>;</span> <span>}</span> <span></</span><span>style</span><span>></span> <span></</span><span>head</span><span>></span> <span><</span><span>body</span><span>></span> <span><</span><span>h1</span><span>></span>员工查询<span></</span><span>h1</span><span>></span> <span><</span><span>label</span><span>></span>请输入员工编号:<span></</span><span>label</span><span>></span> <span><</span><span>input </span><span>type</span><span>="text"</span><span> id</span><span>="keyword"</span> <span>/></span> <span><</span><span>button </span><span>id</span><span>="search"</span><span>></span>查询<span></</span><span>button</span><span>></span> <span><</span><span>p </span><span>id</span><span>="searchResult"</span><span>></</span><span>p</span><span>></span> <span><</span><span>h1</span><span>></span>员工新建<span></</span><span>h1</span><span>></span> <span><</span><span>label</span><span>></span>请输入员工姓名:<span></</span><span>label</span><span>></span> <span><</span><span>input </span><span>type</span><span>="text"</span><span> id</span><span>="staffName"</span> <span>/><</span><span>br</span><span>></span> <span><</span><span>label</span><span>></span>请输入员工编号:<span></</span><span>label</span><span>></span> <span><</span><span>input </span><span>type</span><span>="text"</span><span> id</span><span>="staffNumber"</span> <span>/><</span><span>br</span><span>></span> <span><</span><span>label</span><span>></span>请选择员工性别:<span></</span><span>label</span><span>></span> <span><</span><span>select </span><span>id</span><span>="staffSex"</span><span>></span> <span><</span><span>option</span><span>></span>女<span></</span><span>option</span><span>></span> <span><</span><span>option</span><span>></span>男<span></</span><span>option</span><span>></span> <span></</span><span>select</span><span>><</span><span>br</span><span>></span> <span><</span><span>label</span><span>></span>请输入员工职位:<span></</span><span>label</span><span>></span> <span><</span><span>input </span><span>type</span><span>="text"</span><span> id</span><span>="staffJob"</span> <span>/><</span><span>br</span><span>></span> <span><</span><span>button </span><span>id</span><span>="save"</span><span>></span>保存<span></</span><span>button</span><span>></span> <span><</span><span>p </span><span>id</span><span>="createResult"</span><span>></</span><span>p</span><span>></span> <span><</span><span>script </span><span>src</span><span>="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script</span><span>></span><span> $(document).ready(</span><span>function</span><span>(){ $(</span><span>"</span><span>#search</span><span>"</span><span>).click(</span><span>function</span><span>(){ $.ajax({ type: </span><span>"</span><span>GET</span><span>"</span><span>, url: </span><span>"</span><span>serverjson2.php?number=</span><span>"</span> <span>+</span><span> $(</span><span>"</span><span>#keyword</span><span>"</span><span>).val(), dataType: </span><span>"</span><span>json</span><span>"</span><span>, success: </span><span>function</span><span>(data) { </span><span>if</span><span> (data.success) { $(</span><span>"</span><span>#searchResult</span><span>"</span><span>).html(data.msg); } </span><span>else</span><span> { $(</span><span>"</span><span>#searchResult</span><span>"</span><span>).html(</span><span>"</span><span>出现错误:</span><span>"</span> <span>+</span><span> data.msg); } }, error: </span><span>function</span><span>(jqXHR){ alert(</span><span>"</span><span>发生错误:</span><span>"</span> <span>+</span><span> jqXHR.status); }, }); }); $(</span><span>"</span><span>#save</span><span>"</span><span>).click(</span><span>function</span><span>(){ $.ajax({ type: </span><span>"</span><span>POST</span><span>"</span><span>, url: </span><span>"</span><span>serverjson.php</span><span>"</span><span>, data: { name: $(</span><span>"</span><span>#staffName</span><span>"</span><span>).val(), number: $(</span><span>"</span><span>#staffNumber</span><span>"</span><span>).val(), sex: $(</span><span>"</span><span>#staffSex</span><span>"</span><span>).val(), job: $(</span><span>"</span><span>#staffJob</span><span>"</span><span>).val() }, dataType: </span><span>"</span><span>json</span><span>"</span><span>, success: </span><span>function</span><span>(data){ </span><span>if</span><span> (data.success) { $(</span><span>"</span><span>#createResult</span><span>"</span><span>).html(data.msg); } </span><span>else</span><span> { $(</span><span>"</span><span>#createResult</span><span>"</span><span>).html(</span><span>"</span><span>出现错误:</span><span>"</span> <span>+</span><span> data.msg); } }, error: </span><span>function</span><span>(jqXHR){ alert(</span><span>"</span><span>发生错误:</span><span>"</span> <span>+</span><span> jqXHR.status); }, }); }); }); </span><span></</span><span>script</span><span>></span> <span></</span><span>body</span><span>></span> <span></</span><span>html</span><span>></span>
<?<span>php </span><span>//</span><span>设置页面内容是html编码格式是utf-8 //header("Content-Type: text/plain;charset=utf-8"); </span> <span>header</span>('Access-Control-Allow-Origin:*'<span>); </span><span>header</span>('Access-Control-Allow-Methods:POST,GET'<span>); </span><span>header</span>('Access-Control-Allow-Credentials:true'<span>); </span><span>header</span>("Content-Type: application/json;charset=utf-8"<span>); </span><span>//</span><span>header("Content-Type: text/xml;charset=utf-8"); //header("Content-Type: text/html;charset=utf-8"); //header("Content-Type: application/javascript;charset=utf-8"); //定义一个多维数组,包含员工的信息,每条员工信息为一个数组</span> <span>$staff</span> = <span>array</span><span> ( </span><span>array</span>("name" => "洪七", "number" => "101", "sex" => "男", "job" => "总经理"), <span>array</span>("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "开发工程师"), <span>array</span>("name" => "黄蓉", "number" => "103", "sex" => "女", "job" => "产品经理"<span>) ); </span><span>//</span><span>判断如果是get请求,则进行搜索;如果是POST请求,则进行新建 //$_SERVER是一个超全局变量,在一个脚本的全部作用域中都可用,不用使用global关键字 //$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法</span> <span>if</span> (<span>$_SERVER</span>["REQUEST_METHOD"] == "GET"<span>) { search(); } </span><span>elseif</span> (<span>$_SERVER</span>["REQUEST_METHOD"] == "POST"<span>){ create(); } </span><span>//</span><span>通过员工编号搜索员工</span> <span>function</span><span> search(){ </span><span>//</span><span>检查是否有员工编号的参数 //isset检测变量是否设置;empty判断值为否为空 //超全局变量 $_GET 和 $_POST 用于收集表单数据</span> <span>if</span> (!<span>isset</span>(<span>$_GET</span>["number"]) || <span>empty</span>(<span>$_GET</span>["number"<span>])) { </span><span>echo</span> '{"success":false,"msg":"参数错误"}'<span>; </span><span>return</span><span>; } </span><span>//</span><span>函数之外声明的变量拥有 Global 作用域,只能在函数以外进行访问。 //global 关键词用于访问函数内的全局变量</span> <span>global</span> <span>$staff</span><span>; </span><span>//</span><span>获取number参数</span> <span>$number</span> = <span>$_GET</span>["number"<span>]; </span><span>$result</span> = '{"success":false,"msg":"没有找到员工。"}'<span>; </span><span>//</span><span>遍历$staff多维数组,查找key值为number的员工是否存在,如果存在,则修改返回结果</span> <span>foreach</span> (<span>$staff</span> <span>as</span> <span>$value</span><span>) { </span><span>if</span> (<span>$value</span>["number"] == <span>$number</span><span>) { </span><span>$result</span> = '{"success":true,"msg":"找到员工:员工编号:' . <span>$value</span>["number"] . ',员工姓名:' . <span>$value</span>["name"] . ',员工性别:' . <span>$value</span>["sex"] . ',员工职位:' . <span>$value</span>["job"] . '"}'<span>; </span><span>break</span><span>; } } </span><span>echo</span> <span>$result</span><span>; } </span><span>//</span><span>创建员工</span> <span>function</span><span> create(){ </span><span>//</span><span>判断信息是否填写完全</span> <span>if</span> (!<span>isset</span>(<span>$_POST</span>["name"]) || <span>empty</span>(<span>$_POST</span>["name"<span>]) </span>|| !<span>isset</span>(<span>$_POST</span>["number"]) || <span>empty</span>(<span>$_POST</span>["number"<span>]) </span>|| !<span>isset</span>(<span>$_POST</span>["sex"]) || <span>empty</span>(<span>$_POST</span>["sex"<span>]) </span>|| !<span>isset</span>(<span>$_POST</span>["job"]) || <span>empty</span>(<span>$_POST</span>["job"<span>])) { </span><span>echo</span> '{"success":false,"msg":"参数错误,员工信息填写不全"}'<span>; </span><span>return</span><span>; } </span><span>//</span><span>TODO: 获取POST表单数据并保存到数据库 //提示保存成功</span> <span>echo</span> '{"success":true,"msg":"员工:' . <span>$_POST</span>["name"] . ' 信息保存成功!"}'<span>; } </span>?>