ajax 前后台数据传输 form表单提交
我们在实际的开发过程中必定是有前后台数据交互 而现在只有两种数据传输的方法一个是ajax和form表单提交
前后台数据传输，是非常重要的，一个页面没有前后台数据交互的话那也只是一个静态页面而已
在此之前我们打开文件的方式都是双击通过file协议，本地打开 一个文件
file:///C:/Users/John/Desktop/ajax1/1.html
像是这样在本地打开的文件是没有服务端所以我要使用xammp APP模拟一个服务端
这样才可以更好的学习前后台的数据传输 xammp 集成了apache服务器，mysql数据库，php服务端语言，集成的软件
如何使用xammp 软件
在安装完成后
xammp服务存放的路径：xammp安装目录中的htdocs文件夹，删除里面所有的文件，这样的话可以防止自己的文件被搞混淆。
在将自己想要打开的文件放入htdocs文件夹
然后下一步打开软件
点击Config按钮 在点击第一个Apache按钮进入文本设置端口号
红色的记号设置端口号尽量设置为3000以上的4位数这样的话成功率高
怕有些端口被其他的软件占用了导致失败
都设置成功后点击Starl按钮生成环境成功
这里我设置的端口号是8888
接下使用端口号的进入方法来试试把
注意这里进入的网页链接
http://ip地址:端口号/文件的路径 这里我设置的端口号是8888
在看看我们在htdocs文件夹中放入自己的文件
注意这里浏览器只能识别html文件像上面CSS文件和js文件浏览器是识别不除来的
在搭建好了服务端环境后就可以学习接下来的前后台数据传输了
上面也说了有两种方法
一种是Ajax Ajax也是现在主流的前后端数据交互的方法 当要局部刷新的时候，我们采用Ajax请求。
ajax的优点在于
1. 通过异步模式，提升了用户体验
2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
3. Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。
<body>
<h1>注册账号请输入中文</h1>
用户名
<input type="text" name="" id="input1">
<span class="deom"></span> //提示信息
<br>
<button>检查用户名是否可用</button>
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.js"></script> //jq CDN
<script>
$("button").on("click", function() { //通过单击击的方式
$.ajax({ //启动jq 的ajax的方法
type: "GET", //这里是传输的方法
url: "02.php", //这里是模仿服务端的后台文件地址
data: {
input1: $("#input1").val() //
},
success: function(data) { //data封装的xhr.responseText
console.log(data) //服务端返回的数据
if (data == 1) { //通过返回的数据来判断并且做出相应的行为
$(".deom").html("用户名已经存在").css({
color: "red"
})
} else {
$(".deom").html("用户名可以使用").css({
color: "springgreen"
})
}
},
error: function(xhr) {
console.log(xhr.status)
}
})
})
</script>
</body>
之前说过要模拟一个服务端出来所以这里使用PHP模仿
<?php // 定义一个数组，用来存储用户名，实际肯定是存在数据库，从数据库中去获取 $db = ['蔡徐坤','香蕉君','邪剑仙']; // 参数，根据接口文档来进行定义的 $uname = $_GET['input1']; // 首先假设没有 $exists = false; // 循环判断 foreach($db as $n){ if($n === $uname){ $exists = true; break; } } if($exists){ echo "1"; //1代表用户名已经存在 }else{ echo "0"; //0代表用户名可以使用 } ?>
现在进入页面操作一下
以上是AJax的前后端数据代吗可以绑定失去焦点事件
2.第二种form表单提交
<body>
<h1>通过form表单的提交方式完成前后端通信</h1>
<form action="02.php" method="GET"> //这里是GET提交方法
<input type="text" name="userName" placeholder="请输入用户名">//后台通过name属性来获取前台的数据
<br>
<input type="text" name="userPwd" placeholder="请输入密码">
<br>
<input type="submit">
</form>
</body>
使用form表单提交提交错误的话就整个页面都会刷新 用户填写的信息都会消失所以不建议使用
