时间：2023-05-24 09:00:01 | 来源：网站运营
时间：2023-05-24 09:00:01 来源：网站运营
【达达前端】Ajax实战项目源码讲解（快速入门的实例）Github源码：
在线咨询
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><form> 用户名：<input type="text"> <input type="submit" value="注册"></form></body></html> header("Content-type:text/html;charset=utf-8"); $con = mysql_connect(); <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><form action="reg.php"> 用户名：<input type="text" name="username"> <input type="submit" value="注册"></form></body></html> 2
$_GET$_POST select * from 表 where 字段 = 值mysql_querymysql_num_rows <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><form action="reg.php" method="post"> 用户名：<input type="text" name="username"> <input type="submit" value="注册"></form></body></html> <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><form action="reg.php" method="post"> 用户名：<input type="text" name="username"> <input type="submit" value="注册"></form></body></html> <?php// 定义编码格式header("Content-type:text/html;charset=utf-8");// 连接mysql$con = mysql_connect("localhost",'root','123456');mysql_select_db('ajaxitem');mysql_query('set names utf8');$username = $_POST['username'];$sql = "select * from reg where username = '$username'";$query = mysql_query($sql);// 如何区分查询到还是没有查询到呢？//mysql_num_rows($query);// 找到为1，没有找到为0if($query && mysql_num_rows($query)){ echo "<script>alert('已经有人注册过了')</script>"; echo "<script>history.back()</script>";}else {$sql = "insert into reg(username) values ('$username')";$sql = mysql_query($sql);if($query){ echo "<script>alert('注册成功')</script>"; echo "<script>window.location = 'index.html'</script>";}}?> : 3
select * from 表 where 字段 = 值mysql_querymysql_num_rowssql添加insert into 表（字段）values（值） XMLHttpRequestopenonreadystatechangereadyState0未初始化1初始化2发送数据3数据传送中4完成send onreadystatechangestatushttp状态码200301304403404500statusText responseText responseXML JSON.parsePOST方式：需要设置头信息位置在send前setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');setRequestHeader(‘Content-Type’, ‘application/json’);JSON_stringify JQuery中的Ajax$.ajaxurltypedatasuccesserrordataTypeasync require_once()获取数据mysql_fetch_rowmysql_fetch_assocmysql_fetch_arraymysql_fetch_object增删改查delete from 表 where 字段 = 值update 表 set 字段 = 新值 where id = $id; Functions to create xhrsfunction createStandardXHR() { try { return new window.XMLHttpRequest(); }catch(e){}}function createActiveXHR() { try { return new window.ActiveXObject("Microsoft.XMLHTTP"); }catch(e){}} <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><form action="reg.php" method="post"> 用户名：<input type="text" name="username"> <input type="submit" value="注册"></form><div id="div"></div><script>var oInput = document.getElementById("input1");var oDiv = document.getElementById('div1');oInput.onblur = function () { var xhr = new XMLHttpRequest(); xhr.open('POST','user.php',true);}</script></body></html> <?php// 定义编码格式header("Content-type:text/html;charset=utf-8");// 连接mysql$con = mysql_connect("localhost",'root','123456');mysql_select_db('ajaxitem');mysql_query('set names utf8');$username = $_GET['username'];$sql = "select * from reg where username = '$username'";$query = mysql_query($sql);if($sql && mysql_num_rows($query)){ echo '{"code":0, "message": "已经有人注册过啦" }';}else { echo '{"code":1,"message":"可以注册"}';}?> <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><form action="reg.php" method="post"> 用户名：<input type="text" name="username"> <input type="submit" value="注册"></form><div id="div"></div><script>var oInput = document.getElementById("input1");var oDiv = document.getElementById('div1');oInput.onblur = function () { var xhr = new XMLHttpRequest(); // xhr.open('POST','user.php?username='+encodeURIComponent(this.value),true); xhr.open('POST','user.php',true); // 监听整个流程，多次触发 xhr.onreadystatechange = function () { if(xhr.readyState == 4) { if(xhr.status == 200) { xhr.responseText; // xhr.responseXML // console.log(JSON.parse(xhr.responseText)); var obj = JSON.parse(xhr.responseText); if(obj.code) { oDiv.innerHTML = obj.message }else { oDiv.innerHTML = obj.message } } } }; // xhr.send(null); xhr.send('username'+encodeURIComponent(this.value));}</script></body></html> <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><form action="reg.php" method="post"> 用户名：<input type="text" name="username"> <input type="submit" value="注册"></form><div id="div"></div><script>var oInput = document.getElementById("input1");var oDiv = document.getElementById('div1');oInput.onblur = function () { var xhr = new XMLHttpRequest(); // xhr.open('POST','user.php?username='+encodeURIComponent(this.value),true); xhr.open('POST','user.php',true); // 监听整个流程，多次触发 xhr.onreadystatechange = function () { if(xhr.readyState == 4) { if(xhr.status == 200) { xhr.responseText; // xhr.responseXML // console.log(JSON.parse(xhr.responseText)); var obj = JSON.parse(xhr.responseText); if(obj.code) { oDiv.innerHTML = obj.message }else { oDiv.innerHTML = obj.message } } } }; // xhr.send(null); // xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); // xhr.send('username'+encodeURIComponent(this.value)); // 'username=dada&age=12' // xhr.setRequestHeader('Content-Type','application/json'); // xhr.send('{ "username": dada, "age": 12}'); // xhr.send(JSON.stringify({"username":"dada","age":12})); // {"username":"dada","age":12} -> $.param() -> "useranme=dada&age=12"}</script></body></html> if(s.data && s.processData && typeof s.data !== "string"){ s.data = JQuery.param(s.data, s.traditional);}inspectPrefiltersOrTransports(prefilters, s, options, jqXHR);if(state === 2){return jqXHR;} <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>$.ajax({ url: 'jquery.php', type: 'GET', data: {username: "dada"}, success: function(data){ console.log(data); }});</body></html> <?PHP //echo 'red'; echo '{"color":"red","width":"200px"}';?> require_once(‘connect.php'); <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><script>//get : http://localhost/reg.php?username=dada//post : http://localhost/reg.php</script></head><body><form action="reg.php" method="post"> 用户名 : <input type="text" name="username"> <!--username=dada--> <input type="submit" value="注册"></form></body></html> <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title></head><body><form action="reg.php" method="post"> 用户名 : <input id="input1" type="text" name="username"> <!--username=dada--> <input type="submit" value="注册"></form><div id="div1"></div><script>var oInput = document.getElementById('input1');var oDiv = document.getElementById('div1');oInput.onblur = function(){ var xhr = new XMLHttpRequest(); xhr.open('GET','user.php?username='+encodeURIComponent(this.value),true); xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ //console.log(xhr.status); //console.log(xhr.statusText); if(xhr.status == 200){ //console.log(xhr.responseText); //console.log(JSON.parse(xhr.responseText)); var obj = JSON.parse(xhr.responseText); if(obj.code){ oDiv.innerHTML = obj.message; } else{ oDiv.innerHTML = obj.message; } } } }; xhr.send(null);};</script></body></html> <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title></head><body><form action="reg.php" method="post"> 用户名 : <input id="input1" type="text" name="username"> <!--username=dada--> <input type="submit" value="注册"></form><div id="div1"></div><script>var oInput = document.getElementById('input1');var oDiv = document.getElementById('div1');oInput.onblur = function(){ var xhr = new XMLHttpRequest(); xhr.open('POST','user.php',true); xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ //console.log(xhr.status); //console.log(xhr.statusText); if(xhr.status == 200){ //console.log(xhr.responseText); //console.log(JSON.parse(xhr.responseText)); var obj = JSON.parse(xhr.responseText); if(obj.code){ oDiv.innerHTML = obj.message; } else{ oDiv.innerHTML = obj.message; } } } }; //xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //xhr.send('username='+encodeURIComponent(this.value)); //'username=dada&age=12' //xhr.setRequestHeader('Content-Type', 'application/json'); //xhr.send('{"username":"dada","age":12}'); //xhr.send(JSON.stringify({"username":"dada","age":12})); //{"username":"dada","age":12} -> $.param() -> 'username=dada&age=12' };</script></body></html> <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><script src="jquery-2.1.3.min.js"></script><script>$.ajax({ url : 'jquery.php', type : 'POST', data : {username:"dada"}, dataType : 'json', async : false, success : function(data){ //xhr.responseText console.log(data); //var obj = JSON.parse(data); //console.log(obj); }, error : function(err){ console.log(err.status); console.log(err.statusText); }});console.log(123);</script></head><body></body></html> <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><script src="jquery-2.1.3.min.js"></script><script>$.ajax({ url : 'data.php', type : 'POST', data : {username:"dada"}, dataType : 'json', async : false, success : function(data){ //xhr.responseText console.log(data); //var obj = JSON.parse(data); //console.log(obj); }, error : function(err){ console.log(err.status); console.log(err.statusText); }});console.log(123);</script></head><body></body></html> <?PHP header("Content-type: text/html; charset=utf-8"); $con = mysql_connect('localhost','root',''); mysql_select_db('ajaxitem'); mysql_query('set names utf8');? <?PHP require_once('connect.php'); //$sql = "delete from reg where username = 'da1'"; //$query = mysql_query($sql); $sql = "update reg set username = 'da1' where id = 4"; $query = mysql_query($sql); $sql = "select * from reg limit 2"; $query = mysql_query($sql); //print_r($query); //print_r(mysql_num_rows($query)); //$row = mysql_fetch_row($query); //print_r($row); /*while($row = mysql_fetch_row($query)){ //数组下标的方式输入 print_r($row); }*/ /*while($row = mysql_fetch_assoc($query)){ //数组键值的方式输入 print_r($row); }*/ /*while($row = mysql_fetch_array($query)){ //数组整体的方式输入 print_r($row); }*/ /*while($row = mysql_fetch_object($query)){ //对象键值的方式输入 print_r($row); }*/ /*while($row = mysql_fetch_assoc($query)){ //数组键值的方式输入 print_r($row['username']); }*/ /*while($row = mysql_fetch_object($query)){ //对象键值的方式输入 print_r($row -> username); }*/ while($row = mysql_fetch_assoc($query)){ //数组键值的方式输入 $data[] = $row; } //print_r(json_encode($data)); echo json_encode($data); ?> <?PHP require_once('connect.php'); $username = $_REQUEST['username']; $sql = "select * from reg where username = '$username'"; $query = mysql_query($sql); if($query && mysql_num_rows($query)){ echo '{"code":0 , "message" : "已经有人注册过啦"}'; } else{ echo '{"code":1 , "message" : "可以注册"}'; }?> <?PHP //echo 'red'; echo '{"color":"red","width":"200px"}';?> <?PHP //username -> hello require_once('connect.php'); $username = $_POST['username']; $sql = "select * from reg where username = '$username'"; $query = mysql_query($sql); if($query && mysql_num_rows($query)){ echo "<script>alert('已经有人注册过啦')</script>"; echo "<script>history.back()</script>"; } else{ $sql = "insert into reg(username) values('$username')"; $query = mysql_query($sql); if($query){ echo "<script>alert('注册成功')</script>"; echo "<script>window.location = 'index.html'</script>"; } }?> 【作者】：Jeskson
【原创公众号】：达达前端小酒馆。
【福利】：公众号回复 “资料” 送自学资料大礼包（进群分享，想要啥就说哈，看我有没有）！
【转载说明】：转载请说明出处，谢谢合作！~
关键词：入门,实例,讲解,实战,项目
