Maison > Article > développement back-end > Ajax+PHP+MySQL 登陆示例,_PHP教程
PHP是一门很好的语言,可以很方便的开发web应用程序,下面介绍一下PHP如何通过AJAX方式实现登录功能:
登录界面中,javascript脚本用ajax方式异步请求dologin.php,dologin.php负责用户信息验证(包括验证码,php生成验证码可以自行搜索).登录界面的代码如下:
<span><span> 1</span> <span><?</span><span>php session_start();</span><span>?></span> <span> 2</span> <span><!</span><span>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span><span>></span> <span> 3</span> <span><</span><span>html </span><span>xmlns</span><span>="http://www.w3.org/1999/xhtml"</span><span>></span> <span> 4</span> <span><</span><span>head</span><span>></span> <span> 5</span> <span><</span><span>meta </span><span>http-equiv</span><span>="Content-Type"</span><span> content</span><span>="text/html; charset=gb2312"</span> <span>/></span> <span> 6</span> <span><</span><span>title</span><span>></span>login<span></</span><span>title</span><span>></span> <span> 7</span> <span><</span><span>link </span><span>rel</span><span>="stylesheet"</span><span> type</span><span>="text/css"</span><span> href</span><span>="CSS/login.css"</span> <span>/></span> <span> 8</span> <span><</span><span>script </span><span>src</span><span>="JS/ajaxhelper.js"</span><span> type</span><span>="text/javascript"</span><span>></</span><span>script</span><span>></span> <span> 9</span> <span><</span><span>script </span><span>src</span><span>="JS/jquery-1.3.2.min.js"</span><span> type</span><span>="text/javascript"</span><span>></</span><span>script</span><span>></span> <span> 10</span> <span><</span><span>script </span><span>type</span><span>="text/javascript"</span><span>></span> <span> 11</span> <span>function</span><span> chkForm() { </span><span> 12</span> <span>if</span><span> (m$(</span><span>'</span><span>username</span><span>'</span><span>).value </span><span>==</span> <span>""</span><span>) { </span><span> 13</span> <span> 14</span> <span> alert(</span><span>'</span><span>用户名不能为空.</span><span>'</span><span>); </span><span> 15</span> <span> m$(</span><span>'</span><span>username</span><span>'</span><span>).focus(); </span><span> 16</span> <span>return</span> <span>false</span><span>; </span><span> 17</span> <span> 18</span> <span> } </span><span> 19</span> <span>if</span><span> (m$(</span><span>'</span><span>password</span><span>'</span><span>).value </span><span>==</span> <span>""</span><span>) { </span><span> 20</span> <span> 21</span> <span> alert(</span><span>'</span><span>密码不能为空.</span><span>'</span><span>); </span><span> 22</span> <span> m$(</span><span>'</span><span>password</span><span>'</span><span>).focus(); </span><span> 23</span> <span>return</span> <span>false</span><span>; </span><span> 24</span> <span> 25</span> <span> } </span><span> 26</span> <span>if</span><span> (m$(</span><span>'</span><span>password</span><span>'</span><span>).value </span><span>!=</span> <span>""</span> <span>&&</span><span> m$(</span><span>'</span><span>username</span><span>'</span><span>).value </span><span>!=</span> <span>""</span><span>) { </span><span> 27</span> <span> 28</span> <span>var</span><span> xmlhttp </span><span>=</span><span> createRequest(); </span><span> 29</span> <span>if</span><span> (xmlhttp) { </span><span> 30</span> <span> m$(</span><span>'</span><span>loading</span><span>'</span><span>).innerHTML </span><span>=</span> <span>"</span><span><font color='red'>loading...</font></span><span>"</span><span>; </span><span> 31</span> <span>var</span><span> username </span><span>=</span><span> m$(</span><span>'</span><span>username</span><span>'</span><span>).value; </span><span> 32</span> <span>var</span><span> pwd </span><span>=</span><span> m$(</span><span>'</span><span>password</span><span>'</span><span>).value; </span><span> 33</span> <span>var</span><span> code </span><span>=</span><span> m$(</span><span>'</span><span>txtCode</span><span>'</span><span>).value; </span><span> 34</span> <span>var</span><span> url </span><span>=</span> <span>"</span><span>dologin.php</span><span>"</span><span>; </span><span> 35</span> <span> xmlhttp.open(</span><span>"</span><span>POST</span><span>"</span><span>, url, </span><span>true</span><span>); </span><span> 36</span> <span> xmlhttp.onreadystatechange </span><span>=</span><span> ValidateResult; </span><span> 37</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>); </span><span> 38</span> <span> xmlhttp.send(</span><span>"</span><span>username=</span><span>"</span> <span>+</span><span> escape(username) </span><span>+</span> <span>"</span><span>&password=</span><span>"</span> <span>+</span><span> escape(pwd) </span><span>+</span> <span>"</span><span>&code=</span><span>"</span> <span>+</span><span> escape(code)); </span><span> 39</span> <span> 40</span> <span> } </span><span>else</span><span> { </span><span> 41</span> <span> alert(</span><span>'</span><span>xmlHttp创建失败.</span><span>'</span><span>); </span><span> 42</span> <span> 43</span> <span> } </span><span> 44</span> <span> 45</span> <span>function</span><span> ValidateResult() { </span><span> 46</span> <span>if</span><span> (xmlhttp.readyState </span><span>==</span> <span>4</span><span>) { </span><span> 47</span> <span>if</span><span> (xmlhttp.status </span><span>==</span> <span>200</span><span>) { </span><span> 48</span> <span>if</span><span> (xmlhttp.responseText </span><span>!=</span> <span>""</span><span>) { </span><span> 49</span> <span> 50</span> <span>//</span><span>window.alert(xmlhttp.responseText);</span> <span> 51</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>); </span><span> 52</span> <span>if</span><span> (obj.result </span><span>==</span> <span>true</span><span>) { </span><span> 53</span> <span> alert(</span><span>"</span><span>提示:</span><span>"</span> <span>+</span><span> obj.info); </span><span> 54</span> <span> window.location </span><span>=</span> <span>'</span><span>index.php</span><span>'</span><span>; </span><span> 55</span> <span> 56</span> <span> } </span><span>else</span><span> { </span><span> 57</span> <span> alert(</span><span>"</span><span>错误:</span><span>"</span> <span>+</span><span> obj.info); </span><span> 58</span> <span> 59</span> <span> } </span><span> 60</span> <span> } </span><span>else</span><span> { </span><span> 61</span> <span> window.alert(</span><span>"</span><span>从服务器获取失败</span><span>"</span><span>); </span><span> 62</span> <span> 63</span> <span> window.location.reload(); </span><span> 64</span> <span> } </span><span> 65</span> <span> m$(</span><span>'</span><span>loading</span><span>'</span><span>).innerHTML </span><span>=</span> <span>""</span><span>; </span><span> 66</span> <span> } </span><span> 67</span> <span> } </span><span> 68</span> <span> 69</span> <span> } </span><span> 70</span> <span> 71</span> <span> 72</span> <span> } </span><span> 73</span> <span> 74</span> <span> } </span><span> 75</span> <span> 76</span> <span>function</span><span> m$(id) { </span><span> 77</span> <span>return</span><span> document.getElementById(id); </span><span> 78</span> <span> } </span><span> 79</span> <span> 80</span> <span>function</span><span> changeCode() { </span><span> 81</span> <span>var</span><span> xmlhttp </span><span>=</span><span> createRequest(); </span><span> 82</span> <span>if</span><span> (xmlhttp) { </span><span> 83</span> <span> m$(</span><span>'</span><span>loading</span><span>'</span><span>).innerHTML </span><span>=</span> <span>"</span><span><font color='red'>loading...</font></span><span>"</span><span>; </span><span> 84</span> <span>var</span><span> dt </span><span>=</span> <span>new</span><span> Date().getTime(); </span><span> 85</span> <span>//</span><span> alert(dt);</span> <span> 86</span> <span>var</span><span> url </span><span>=</span> <span>"</span><span>function/imagecode.php?dummay</span><span>"</span> <span>+</span><span> escape(dt); </span><span> 87</span> <span> xmlhttp.open(</span><span>"</span><span>GET</span><span>"</span><span>, url, </span><span>true</span><span>); </span><span> 88</span> <span> xmlhttp.onreadystatechange </span><span>=</span><span> ValidateResult; </span><span> 89</span> <span> xmlhttp.send(</span><span>null</span><span>); </span><span> 90</span> <span> 91</span> <span> } </span><span>else</span><span> { </span><span> 92</span> <span> alert(</span><span>'</span><span>xmlHttp创建失败.</span><span>'</span><span>); </span><span> 93</span> <span> 94</span> <span> } </span><span> 95</span> <span> 96</span> <span>function</span><span> ValidateResult() { </span><span> 97</span> <span>if</span><span> (xmlhttp.readyState </span><span>==</span> <span>4</span><span>) { </span><span> 98</span> <span>if</span><span> (xmlhttp.status </span><span>==</span> <span>200</span><span>) { </span><span> 99</span> <span>var</span><span> dt </span><span>=</span> <span>new</span><span> Date().getTime(); </span><span>100</span> <span>var</span><span> url </span><span>=</span> <span>"</span><span>function/imagecode.php?dummay</span><span>"</span> <span>+</span><span> escape(dt); </span><span>101</span> <span> m$(</span><span>'</span><span>imgCode</span><span>'</span><span>).src </span><span>=</span> <span>"</span><span>function/imagecode.php?dummay</span><span>"</span> <span>+</span><span> escape(dt); </span><span>102</span> <span> m$(</span><span>'</span><span>loading</span><span>'</span><span>).innerHTML </span><span>=</span> <span>""</span><span>; </span><span>103</span> <span> } </span><span>104</span> <span> } </span><span>105</span> <span>106</span> <span> } </span><span>107</span> <span> } </span><span>108</span> <span>109</span> <span>function</span><span> showTool() { </span><span>110</span> <span> $(</span><span>'</span><span>#divToolTip</span><span>'</span><span>).css(</span><span>"</span><span>display</span><span>"</span><span>, </span><span>"</span><span>block</span><span>"</span><span>); </span><span>111</span> <span> } </span><span>112</span> <span>113</span> <span>function</span><span> hideTool() { </span><span>114</span> <span> $(</span><span>'</span><span>#divToolTip</span><span>'</span><span>).css(</span><span>"</span><span>display</span><span>"</span><span>, </span><span>"</span><span>none</span><span>"</span><span>); </span><span>115</span> <span> } </span><span>116</span> <span> window.onload </span><span>=</span><span> initPage; </span><span>117</span> <span>118</span> <span>function</span><span> initPage() { </span><span>119</span> <span> $(</span><span>'</span><span>#divToolTip</span><span>'</span><span>).css(</span><span>"</span><span>display</span><span>"</span><span>, </span><span>"</span><span>none</span><span>"</span><span>); </span><span>120</span> <span> } </span><span>121</span> <span></</span><span>script</span><span>></span> <span>122</span> <span></</span><span>head</span><span>></span> <span>123</span> <span><</span><span>body</span><span>></span> <span>124</span> <span><</span><span>div </span><span>style</span><span>="background-color:#2A3F55; height:80px;"</span><span>></span> <span>125</span> <span>126</span> <span></</span><span>div</span><span>></span> <span>127</span> <span><</span><span>div </span><span>style</span><span>="min-height:500px;"</span><span>></span> <span>128</span> <span>129</span> <span><</span><span>div </span><span>class</span><span>="left"</span><span>></span> <span>130</span> <span>131</span> <span><</span><span>div </span><span>style</span><span>="margin:120px auto auto auto; height:300px; text-align:left"</span><span>></span> <span>132</span> <span><</span><span>div </span><span>style</span><span>="font-size:26px;color:#2A3F55; text-align:center;"</span><span>></span><span>Ajax PHP Demo System </span><span>133</span> <span><</span><span>img </span><span>src</span><span>="Images/appstorm-icon.png"</span><span> alt</span><span>="appcation storm image"</span><span> style</span><span>="position:relative;top:-18px; left:-12px; vertical-align:middle; text-align:center;font-size:10px; width:65px; height:46px;"</span><span>/></span> <span>134</span> <span></</span><span>div</span><span>></span> <span>135</span> <span><</span><span>br</span><span>/></span> <span>136</span> <span><</span><span>hr </span><span>style</span><span>="border:dashed thin #2A3F55;width:70%; text-align:center;"</span><span>/></span> <span>137</span> <span><</span><span>div </span><span>style</span><span>="font-size:13px;color:#999999; margin:20px auto 0 auto; padding-left:200px;"</span><span>></span> <span>138</span> Author:<span><</span><span>a </span><span>href</span><span>="#"</span><span> onmousemove</span><span>="showTool();"</span><span> onmouseout</span><span>="hideTool();"</span><span>></span>wangming<span></</span><span>a</span><span>></span> <span>139</span> <span></</span><span>div</span><span>></span> <span>140</span> <span><</span><span>div </span><span>style</span><span>="font-size:13px;color:#999999;margin:20px auto auto auto; padding-left:200px;"</span><span>></span>DateTime:2009-9-1<span></</span><span>div</span><span>></span> <span>141</span> <span><</span><span>div </span><span>style</span><span>="font-size:13px;color:#999999;margin:20px auto auto auto; padding-left:200px;"</span><span>></span>Version:1.0.0<span></</span><span>div</span><span>></span> <span>142</span> <span><</span><span>div </span><span>style</span><span>="font-size:13px;color:#999999;margin:20px auto auto auto; padding-left:200px;"</span><span>></span>Email:wangmingemail@163.com <span></</span><span>div</span><span>></span> <span>143</span> <span><</span><span>div </span><span>id</span><span>="divToolTip"</span><span>></span> <span>144</span> <span><</span><span>img </span><span>src</span><span>="Images/ming.jpg"</span><span> height</span><span>="86px;"</span><span>/></span> <span>145</span> <span><</span><span>span </span><span>class</span><span>="authordes"</span><span>></span> <span>146</span> <span><</span><span>br</span><span>/></span> <span>147</span> 姓名:wangming<span><</span><span>br</span><span>/></span> <span>148</span> 电商06-2<span><</span><span>br</span><span>/></span> <span>149</span> <span></</span><span>span</span><span>></span> <span>150</span> <span>151</span> <span></</span><span>div</span><span>></span> <span>152</span> <span>153</span> <span></</span><span>div</span><span>></span> <span>154</span> <span>155</span> <span></</span><span>div</span><span>></span> <span>156</span> <span>157</span> <span><</span><span>div </span><span>class</span><span>="right"</span><span>></span> <span>158</span> <span>159</span> <span><</span><span>form</span><span>></span> <span>160</span> <span><</span><span>br</span><span>/></span> <span>161</span> <span><</span><span>table </span><span>class</span><span>="flogin"</span><span>></span> <span>162</span> <span><</span><span>tr</span><span>></span> <span>163</span> <span><</span><span>td</span><span>></span>用户名:<span></</span><span>td</span><span>></span> <span>164</span> <span><</span><span>td</span><span>><</span><span>input </span><span>type</span><span>="text"</span><span> name</span><span>="username"</span><span> id</span><span>="username"</span><span>/></</span><span>td</span><span>></span> <span>165</span> <span><</span><span>td</span><span>></</span><span>td</span><span>></span> <span>166</span> <span></</span><span>tr</span><span>></span> <span>167</span> <span><</span><span>tr</span><span>></span> <span>168</span> <span><</span><span>td</span><span>></span>密<span> </span>码:<span></</span><span>td</span><span>></span> <span>169</span> <span><</span><span>td</span><span>><</span><span>input </span><span>type</span><span>="password"</span><span> name</span><span>="password"</span><span> id</span><span>="password"</span> <span>/></</span><span>td</span><span>></span> <span>170</span> <span><</span><span>td</span><span>></</span><span>td</span><span>></span> <span>171</span> <span></</span><span>tr</span><span>></span> <span>172</span> <span><</span><span>tr</span><span>></span> <span>173</span> <span><</span><span>td</span><span>></span>验证码:<span></</span><span>td</span><span>></span> <span>174</span> <span><</span><span>td</span><span>></span> <span>175</span> <span><</span><span>input </span><span>type</span><span>="text"</span><span> name</span><span>="txtCode"</span><span> id</span><span>="txtCode"</span><span> size</span><span>="12"</span> <span>/></span><span> </span> <span>176</span> <span><</span><span>img </span><span>src</span><span>="function/imagecode.php"</span><span> id</span><span>="imgCode"</span><span> alt</span><span>="image code"</span><span> height</span><span>="22px;"</span><span> style</span><span>=" vertical-align:bottom;"</span><span>/></span> <span>177</span> <span></</span><span>td</span><span>></span> <span>178</span> <span><</span><span>td</span><span>><</span><span>input </span><span>type</span><span>="button"</span><span> class</span><span>="btnrefresh"</span><span> onclick</span><span>="changeCode();"</span> <span>/></</span><span>td</span><span>></span> <span>179</span> <span></</span><span>tr</span><span>></span> <span>180</span> <span><</span><span>tr</span><span>></span> <span>181</span> <span><</span><span>td</span><span>></</span><span>td</span><span>></span> <span>182</span> <span><</span><span>td</span><span>><</span><span>input </span><span>type</span><span>="button"</span><span> class</span><span>="btnlogin"</span><span> onclick</span><span>="chkForm();"</span> <span>/></</span><span>td</span><span>></span> <span>183</span> <span><</span><span>td</span><span>></</span><span>td</span><span>></span> <span>184</span> <span></</span><span>tr</span><span>></span> <span>185</span> <span><</span><span>tr</span><span>></span> <span>186</span> <span><</span><span>td</span><span>></</span><span>td</span><span>></span> <span>187</span> <span><</span><span>td</span><span>><</span><span>span </span><span>id</span><span>="loading"</span><span>></</span><span>span</span><span>></</span><span>td</span><span>></span> <span>188</span> <span><</span><span>td</span><span>><</span><span>span </span><span>id</span><span>="code"</span><span>></</span><span>span</span><span>></</span><span>td</span><span>></span> <span>189</span> <span></</span><span>tr</span><span>></span> <span>190</span> <span>191</span> <span></</span><span>table</span><span>></span> <span>192</span> <span></</span><span>form</span><span>></span> <span>193</span> <span></</span><span>div</span><span>></span> <span>194</span> <span>195</span> <span></</span><span>div</span><span>></span> <span>196</span> <span><</span><span>div </span><span>style</span><span>="background-color:#2A3F55; height:60px; margin:auto 0 0 0; clear:both; text-align:center; line-height:60px; color:#FFFFFF;font-size:12px;"</span><span>></span> <span>197</span> <span>©</span><span>Copyright 2015. </span><span>198</span> <span></</span><span>div</span><span>></span> <span>199</span> <span></</span><span>body</span><span>></span> <span>200</span> <span></</span><span>html</span><span>></span></span>
<span><span> 1</span> <span>function</span><span> createRequest() { </span><span> 2</span> <span>try</span><span> { </span><span> 3</span> request = <span>new</span><span> XMLHttpRequest(); </span><span> 4</span> } <span>catch</span><span> (tryMS) { </span><span> 5</span> <span>try</span><span> { </span><span> 6</span> request = <span>new</span> ActiveXObject("Msxml2.XMLHTTP"<span>); </span><span> 7</span> } <span>catch</span><span> (otherMS) { </span><span> 8</span> <span>try</span><span> { </span><span> 9</span> request = <span>new</span> ActiveXObject("Microsoft.XMLHTTP"<span>); </span><span>10</span> } <span>catch</span><span> (failed) { </span><span>11</span> request = <span>null</span><span>; </span><span>12</span> <span> } </span><span>13</span> <span> } </span><span>14</span> <span> } </span><span>15</span> <span>return</span><span> request; </span><span>16</span> <span>} </span><span>17</span> <span>18</span> <span>function</span><span> getActivatedObject(e) { </span><span>19</span> <span>var</span><span> obj; </span><span>20</span> <span>if</span> (!<span>e) { </span><span>21</span> <span>//</span><span> early version of IE</span> <span>22</span> obj =<span> window.event.srcElement; </span><span>23</span> } <span>else</span> <span>if</span><span> (e.srcElement) { </span><span>24</span> <span>//</span><span> IE 7 or later</span> <span>25</span> obj =<span> e.srcElement; </span><span>26</span> } <span>else</span><span> { </span><span>27</span> <span>//</span><span> DOM Level 2 browser</span> <span>28</span> obj =<span> e.target; </span><span>29</span> <span> } </span><span>30</span> <span>return</span><span> obj; </span><span>31</span> <span>} </span><span>32</span> <span>33</span> <span>function</span><span> addEventHandler(obj, eventName, handler) { </span><span>34</span> <span>if</span><span> (document.attachEvent) { </span><span>35</span> obj.attachEvent("on" +<span> eventName, handler); </span><span>36</span> } <span>else</span> <span>if</span><span> (document.addEventListener) { </span><span>37</span> obj.addEventListener(eventName, handler, <span>false</span><span>); </span><span>38</span> <span> } </span><span>39</span> }</span>
<span><span> 1</span> <?<span>php </span><span> 2</span> <span>session_start</span><span>(); </span><span> 3</span> <span>header</span>("Content-type:text/html;charset=gb2312");<span>//</span><span>防止返回的中文乱码</span> <span> 4</span> <span>$name</span>=<span>$_POST</span>['username'<span>]; </span><span> 5</span> <span>$pwd</span>=<span>$_POST</span>['password'<span>]; </span><span> 6</span> <span>$imagecode</span>=<span>$_POST</span>['code'<span>]; </span><span> 7</span> <span>if</span>(<span>strtoupper</span>(<span>$imagecode</span>)==<span>$_SESSION</span>["code"<span>]) </span><span> 8</span> <span> { </span><span> 9</span> <span>include</span>("conn/conn.php"<span>); </span><span>10</span> <span>$sql</span>="select studentName,studentPwd from tbstudent where studentId='".<span>$name</span>."'"<span>; </span><span>11</span> <span>$result</span>=<span>mysql_query</span>(<span>$sql</span>,<span>$conn</span><span>); </span><span>12</span> <span>if</span>(<span>$row</span>=<span>mysql_fetch_assoc</span>(<span>$result</span><span>)) </span><span>13</span> <span> { </span><span>14</span> <span>if</span>(<span>$pwd</span>==<span>$row</span>['studentPwd'<span>]) </span><span>15</span> <span> { </span><span>16</span> <span>$_SESSION</span>['username']=<span>$row</span>['studentName'<span>]; </span><span>17</span> <span>//</span><span>echo "{'result':true,'info':'登陆成功!','code':'".$_SESSION["code"]."'}";</span> <span>18</span> <span>echo</span> "{'result':true,'info':'登陆成功!'}"<span>; </span><span>19</span> <span>20</span> <span> } </span><span>21</span> <span>else</span> <span>22</span> <span> { </span><span>23</span> <span>echo</span> "{'result':false,'info':'密码错误!'}"<span>; </span><span>24</span> <span> } </span><span>25</span> <span> } </span><span>26</span> <span>else</span> <span>27</span> <span> { </span><span>28</span> <span>echo</span> "{'result':false,'info':'该用户不存在!'}"<span>; </span><span>29</span> <span> } </span><span>30</span> <span> } </span><span>31</span> <span>else</span> <span>32</span> <span> { </span><span>33</span> <span>echo</span> "{'result':false,'info':'验证码错误!'}"<span>; </span><span>34</span> <span> } </span><span>35</span> ?></span>
<span><span>1</span> <?<span>php </span><span>2</span> <span>$conn</span>=<span>$mysql_connect</span>("localhost","root", ""<span>); </span><span>3</span> <span>mysql_select_db</span>("bbs",<span>$conn</span><span>); </span><span>4</span> <span>mysql_query</span>("SET NAMES GB2312"<span>); </span><span>5</span> ?></span>
与登录无关,只为了记录一下PHP如何在数据库MYSQL上实现CURD操作.