【达达前端】Ajax实战项目源码讲解（快速入门的实例）Github源码

作者 | Jeskson

来源 | 达达前端小酒馆

源码地址：

https://github.com/huangguangda/Ajaxitm

什么是Ajax技术？实战中的运用ajax技术，了解前后端交互的方式，了解移动端的模式，了解H5的新技术，了解CSS3的使用，和JQuery的使用。

Ajax技术可以提高用户体验，无刷新的与后台进行数据的交互，异步的操作方式，可以不用刷新页面提高性能。

了解前后端的交互流程，主要分为三部分，客户端，服务端，数据库，环境搭建，wamp，phpMyAdmin。

wamp，window，Apache，mysql，php。

创建项目：

创建一个名为AjaxItem的小项目

接下来附上我的代码

<!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>

运行起来的效果是如下截图

添加一个服务端跳转的页面reg.php，服务端要找到输入框的值

提交表单方式：GET，POST

指定当前页的编码

header("Content-type:text/html;charset=utf-8");

连接数据库mysql

$con = mysql_connect();

默认值：config.default.php

<!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提交的特点：

上面截图可以看出传输数据的区别，我们一般对于数据的查询，尽量采用get的方式，而我们要对数据的修改，添加或者是删除，我们可以用post比较好一点。

服务端的书写：

选择数据库：mysql_select_db();建立数据库，建表，键字段

指定数据库的编码格式

mysql_query("set names utf8");

获取传输数据

$_GET
$_POST

创建数据库：

创建表：

创建数据

sql查询：

select * from 表 where 字段 = 值
mysql_query
mysql_num_rows

reg.php

<!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>

index.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>

reg.php代码：

<?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，没有找到为0

if($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

sql查询：

select * from 表 where 字段 = 值
mysql_query
mysql_num_rows

sql添加

insert into 表（字段）values（值）

Ajax基本使用：

XMLHttpRequest
open
onreadystatechange

readyState
0未初始化
1初始化
2发送数据
3数据传送中
4完成

send

onreadystatechange

status
http状态码
200
301
304
403
404
500

statusText

responseText
 responseXML
 JSON.parse

POST方式：
需要设置头信息
位置在send前

setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
setRequestHeader(‘Content-Type’, ‘application/json’);

JSON_stringify

JQuery中的Ajax

$.ajax

url
type
data
success
error
dataType
async

提供公共代码

require_once()

获取数据
mysql_fetch_row
mysql_fetch_assoc
mysql_fetch_array
mysql_fetch_object

增删改查
delete from 表 where 字段 = 值
update 表 set 字段 = 新值 where id = $id;

Functions to create xhrs

function createStandardXHR() {
 try {
  return new window.XMLHttpRequest();
 }catch(e){}
}

function createActiveXHR() {
 try {
  return new window.ActiveXObject("Microsoft.XMLHTTP");
  }catch(e){}
}

index.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',true);

}
</script>
</body>
</html>

user.php

<?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":"可以注册"}';
}
?>

index.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.send('username'+encodeURIComponent(this.value));
}
</script>
</body>
</html>

index.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>

JQuery:

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;
}

ajax.html

<!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>

jquery.php

<?PHP

  //echo 'red';
  echo '{"color":"red","width":"200px"}';

?>

请求相同部分：

require_once(‘connect.php');

ajax1.html

<!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>

ajax2.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>

ajax3.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>

ajax4.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>

ajax5.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>

connect.php

<?PHP

  header("Content-type: text/html; charset=utf-8");
  $con = mysql_connect('localhost','root','');
  mysql_select_db('ajaxitem');
  mysql_query('set names utf8');

?

data.php

<?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);

?>

user.php

<?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" : "可以注册"}';
  }

?>

jquery.php

<?PHP

  //echo 'red';
  echo '{"color":"red","width":"200px"}';

?>

reg.php

<?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>";
    }
  }

?>

总结

在博客平台里，未来的路还很长，也希望自己以后的文章大家能多多支持，多多批评指正，我们一起进步，一起走花路。

非常感谢读者能看到这里，如果这个文章写得还不错，觉得「达达」我有点东西的话，觉得我能够坚持的学习，觉得此人可以交朋友的话，求点赞?? 求关注?? 求分享?? 对暖男我来说真的

非常有用！！！

?? 不要忘记留下你学习的脚印 [点赞 + 收藏 + 评论]

作者Info：

【作者】：Jeskson
【原创公众号】：达达前端小酒馆。
【福利】：公众号回复 “资料” 送自学资料大礼包（进群分享，想要啥就说哈，看我有没有）！
【转载说明】：转载请说明出处，谢谢合作！~

大前端开发，定位前端开发技术栈博客，PHP后台知识点，web全栈技术领域，数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。谢谢支持，承蒙厚爱！！！

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

请点赞！因为你们的赞同/鼓励是我写作的最大动力！

欢迎关注达达的CSDN！

这是一个有质量，有态度的博客

原文地址：https://www.cnblogs.com/dashucoding/p/12113724.html

时间： 2024-10-01 07:46:49

【达达前端】Ajax实战项目源码讲解（快速入门的实例）Github源码的相关文章

.NET Core实战项目之CMS 第二章入门篇-快速入门ASP.NET Core看这篇就够了

作者:依乐祝原文链接:https://www.cnblogs.com/yilezhu/p/9985451.html 本来这篇只是想简单介绍下ASP.NET Core MVC项目的(毕竟要照顾到很多新手朋友),但是转念一想不如来点猛的(考虑到急性子的朋友),让你通过本文的学习就能快速的入门ASP.NET Core.既然是快速入门所以过多过深的内容我这里就一笔带过了!然后在后面的一些列文章中再慢慢的对其中的概念进行阐述. 本文已收录至.NET Core实战项目之CMS 第一章入门篇-开篇及总体规

Log4Qt快速入门——Log4Qt日志格式化源码解析

Log4Qt快速入门--Log4Qt日志格式化源码解析一.Layout 1.Layout简介 Log4Qt提供了多种Layout对象,用于格式化日志输出,指定日志级别.线程名称.Logger名称.日期时间等信息.Layout类是Log4Qt API中的抽象类.PatternLayout:根据一个模式字符串输出日志事件:SimpleLayout:输出日志事件的级别和消息:TTCCLayout:输出日志事件的时间.线程名称.Logger名称和嵌套的诊断上下文信息.PatternLayout和TTC

夺命雷公狗ThinkPHP项目之----商城5快速入门

本章是快速入门篇,有基础可直接跳过: 1.创建一个数据库名叫shopp的,然后穿件一张表 #创建用户表 create table user( id int unsigned not null auto_increment primary key comment '用户编号', username varchar(50) not null default '' comment '用户名', email varchar(50) not null default '' comment '电子邮箱', p

mybatis源码总结--快速入门

首先在此声明,本人是通过学习湖畔微风<深入浅出mybatis>基础之上对代码进行总结. <深入浅出mybatis> http://blog.csdn.net/hupanfeng/article/details/9068003 一.mybatis解析配置文件 SqlSessionFactoryBuilder类是mybatis的入口,在创建SqlSeesionFactory时会解析配置文件,将文件中的信息保存在Configuration对象中. 其中的类XmlConfigureBuli

vue2.0项目实战（5）vuex快速入门

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能. 以上是vuex的官方文档对vuex的介绍,官方文档对vuex的用法进行了详细的说明.这里就不再细讲vuex的各个用法. 为什么要用vuex 当你打算开发大型单页应用(SPA),会

.NET Core实战项目之CMS 第十三章开发篇-在MVC项目结构介绍及应用第三方UI

作为后端开发的我来说,前端表示真心玩不转,你如果让我微调一个位置的样式的话还行,但是让我写一个很漂亮的后台的话,真心做不到,所以我一般会选择套用一些开源UI模板来进行系统UI的设计.那如何套用呢?今天就以我们系列实战教程中的CMS系统为例来应用第三方的后台模板LayuiCMS2.0为例来进行实战演练吧! 本文已收录至<.NET Core实战项目之CMS 第一章入门篇-开篇及总体规划> 作者:依乐祝首发地址 "DotNetCore实战"公众号原文地址:https://w

.NET Core实战项目之CMS 第十四章开发篇-防止跨站请求伪造（XSRF/CSRF）攻击处理

通过 ASP.NET Core,开发者可轻松配置和管理其应用的安全性. ASP.NET Core 中包含管理身份验证.授权.数据保护.SSL 强制.应用机密.请求防伪保护及 CORS 管理等等安全方面的处理. 通过这些安全功能,可以生成安全可靠的 ASP.NET Core 应用.而我们这一章就来说道说道如何在ASP.NET Core中处理"跨站请求伪造(XSRF/CSRF)攻击"的,希望对大家有所帮助! 本文已收录至<.NET Core实战项目之CMS 第一章入门篇-开篇及总体

.NET Core实战项目之CMS 第七章设计篇-用户权限极简设计全过程

写在前面这篇我们对用户权限进行极简设计并保留其扩展性.首先很感谢大家的阅读,前面六章我带着大家快速入门了ASP.NET Core.ASP.NET Core的启动过程源码解析及配置文件的加载过程源码解析并引入依赖注入的概念.Git的快速入门.Dapper的快速入门.Vue的快速入门.不知道大伙掌握的怎么样了!如果你有兴趣的话可以加入我们的.NET Core实战项目群637326624跟更多的小伙伴共同进行交流下. 接下来我们就正式进入.NET Core实战项目之CMS的设计篇了.在设计篇呢,我们

.NET Core实战项目之CMS 第十七章 CMS网站系统的部署

原文:.NET Core实战项目之CMS 第十七章 CMS网站系统的部署目前我们的.NET Core实战项目之CMS系列教程基本走到尾声了,通过这一系列的学习你应该能够轻松应对.NET Core的日常开发了!当然这个CMS系统的一些逻辑处理还需要优化,如没有引入日志组件以及缓存功能,权限目前只支持控制到菜单,却没有控制到具体的功能(其实这块只是苦于样式不会处理,不然的话也会把功能加上),不过话又说回来,这些都是次要的,后期有时间慢慢补上吧,因为我开这个系列的初衷也是对大家入门.NET Core